Cascading
Style Sheets - The Basics part 2Cascading
Style Sheets - The Basics part 2This version of the page contains the following Cascading Style Sheet:
| <style> <!-- H1 { color: blue; font-style: italic; } H4 { color: blue; text-decoration: underline; } DIV { background-color:cyan; border: 2px blue solid } --> </style> |
The rules in a style sheet can be enclosed in HTML comment markers <!-- --> so that older, non CSS-compatible browsers will ignore them instead of displaying them on screen. |
This sheet contains three style rules. The first rules modifies the browser's built-in H1 style, changing its foreground (text) colour to blue and its font style to italic. The second rule modifies the H4 style, making it blue and underlined. The third rule changes the style for <DIV>... </DIV> containers, giving them cyan backgrounds and a blue border.
Here are the results:
This text is in default style
This text is inside a <DIV>...</DIV> container.
This is more text in default style.
This text is inside another DIV
These are 'all-occurrences' rules, i.e. they are automatically applied to all occurrences of the specified object (HTML tag) types within the page. You can see this in action in the examples above - the H1, H4 and DIV items have been restyled, but if you check the page source you'll see that the tags (<H1>, <DIV> etc) are exactly the same as in the first, non-CSS version of the page.
Note also that the CSS rules modify the built-in styles, rather than completely replacing them. For example, the H1 style retains its default large font size and bold font weight, but changes to blue italic.