Style Sheet Demo
Style sheets make it easy to give a look and feel to your document without cluttering the body with lots of tags.
Some things that are difficult without Style Sheets, are downright easy: margins, backgroud-color, etc
Here's a nice outline format, just using standard H1-H6 Tags:
Top Level Heading (H1)
Next level Heading (H2)
Third Level Heading (H3)
Fourth Level Heading (H4)
Fifth Level Heading (H5)
Inline Style Can Override the Generic Style (H5)
But Doesn't Affect Subsequent Uses of the Tag (H5)
Style Sheets make the body text more readable by moving lots of formatting to the header.
The Div tag can change text attributes for all text within the div tag.
The H4 header used the default text color which was red, but is now navy
After the /Div tag, the text attributes revert to the document value.
Here's another H4 header, back to red
More Fun CSS Properties
End of Div, so we are back to the default cursor and text.
When you move here, the cursor has changed to a hand and text to green.
The bullets in lists can be changed easily:
- The first item in the list uses the default bullet
- This one is a disc
- This one is a circle
- This one is a square
- This one is decimal
- This one is upper-alpha
- This one is lower-alpha
- This one is upper-roman
- This uses an icon
- This one has none
The span tag can be used to create custom classes:
This text is of class custom1
This text is of class custom2