CSS Internal Style Sheet

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