Newlogo.gif (8646 bytes)Cascading Style Sheets - The Basics part 3

The effects of style sheets are cumulative - you can have multiple sheets in a page, and apply multiple rules to the same type of HTML tag.

This page contains two cascading style sheets, like this:

<style>
H1 { color: blue; font-style: italic; }
H4 { color: blue; text-decoration: underline; }
DIV { background-color:cyan; border: 2px blue solid }
</style>

<style>
H1 {text-decoration: underline;}
H4 {font-size:14;}
DIV {margin-left:10%;}
</style>

 <STYLE> tags are sometimes written as:
<STYLE TYPE="text/css">
TYPE="text/css" is the default value and can be omitted. An alternative CSS format, TYPE="text/javascript", is supported by Navigator 4.0, but not by Internet Explorer.

between them, they apply a cumulative set of style modifications to all occurrences of H1, H4 and DIV containers.

H1 text in this page is bold and big (from the default H1 style), blue and italic (from the first style sheet), and underlined (from the second style sheet).

DIVs in this page have cyan backgrounds and a blue border (from the first style sheet), and are indented into the page by 10% of the browser window's width (from the second style sheet).

H4 text in this page is bold (from the browser's default H4 style), blue and underlined (from the first style sheet) and 14 point size (from the second style sheet).

This is also H4-style text, but the <H4> tag has an inline style sheet which overrides the colour and font-size properties of the cascading style sheets. The H4 tag for this text is:

<H4 style="font-size:18pt; color:red;">

(TIP - In Navigator 4.0, it's important to put the 'pt' after the font-size value (e.g. "font-size: 18pt;"). Internet Explorer 4.0 will accept just "font-size:18;", but Navigator will ignore the entire inline sheet if the 'pt' is missing.)

Back to Menu