CSS Internal Style Sheet

How to use & style with  CSS using an internal style sheet in the head section

Results per page:

Match

Match: any search words all search words

Page Menu

 

Internal Style Sheets Introduction

Where to place CSS Internal Style Sheet in an HTML page

 

Internal Style Sheets Introduction

 

  • An internal Style Sheets is sometimes called In page Style sheet & is used to define the styles for a single HTML page.
  • Internal Style Sheets are the best method for an HTML page that needs its own styles different from the rest of the site.
  • If a web site uses the same design on more than 1 page normal use external style sheet(s)

Where to place CSS Internal Style Sheet in an HTML page

  • CSS Internal Style Sheet are placed In the head section of the web page.  
  • The styling rules are placed within the <style> tag. E.g.
    <style>Your styling goes here</style>
/html>

CSS inline Syntax

HTML element style="{ property: value; property: value; }"

 

HTML element

Any HTML Element. In this Lesson we will use the body, p paragraph and some of the headings h1, h2 etc.

 

Curly Brackets { }

Only the curly brackets must be used.
Do not use ( ) or [ ]

 

Property

There are 100s of different properties that style sizes, fonts, text styles, borders, padding, margins, positioning, color (CSS uses the American spelling), etc.

 

Value

Each property has a selection of values

E.g. Color has 140 different color names such as red, green, blue, yellow, cyan, magenta, white, black, lightgray etc. With a total of over 16 million colours using the hex color system e.g. #000000 to #FFFFFF

 

The Look of an Element

ALL Elements look like a box. In the centre is the content, this can be surrounded all 4 sides or on selected sides, by padding, then a border, then on the outside margins which is space between elements

All these sections can be styled with CSS

See a diagram of the Box Model

 

Main Content H2 Header

Main Content. 

  • List

H3 Sub heading

More Content

H4 Sub Heading