Templates Lesson

CSS Document Styles - Templates Lesson

Before we create document level or external styles lets review the syntax used to create these styles, it is slightly different than the inline style code.

Cascading style sheets create rules which control HTML tags.

Rules consists of a selector which identifies the name of the HTML tag and then a declaration which identifies properties and values, which will be applied to the tag.

Rules syntax:
selector { property:value; property:value, value, value; }

H3 { color:#663399; font-family: Arial, Helvetica, sans-serif";}

Now that we have some terminology under our belt lets create a document level style. This style will control the behavior of the <H3> tags within an entire Web page.

1. I return to my inline.html file and insert an opening <style> tag below the head tag and then follow with the closing </style> tag. Every CSS style rule contained between these tags will affect the HTML tags used on the entire page.

2. Below the style tag I have inserted what looks like a comment

This is actually a document level style which will affect all the <H3> tags on this page.

3. Let's move down to the body of the document. Remember this sentence?

<H3>I am a plain old boring sentence, CSS code get to have all the fun :-></H3>

Insert 4 more copies of this heading which contains the standard h3 tag and add another copy of the heading with the inline style code.

Your document should now look like this:

<style>

</style>

<TITLE>Linda's CSS test page</TITLE>
</HEAD>
<BODY bgcolor="ffffff"> <br /> <br />

<H3 style="color: 663399; font-family: Arial, helvetica, sans-serif">I am an example of an "inline style" which produces purple text displayed in the arial font</H3>

<H3 >I am a plain old boring heading 3 tag, CSS code get to have all the fun :-></H3>
<H3 >I am a plain old boring heading 3 tag, CSS code get to have all the fun :-></H3>
<H3 >I am a plain old boring heading 3 tag, CSS code get to have all the fun :-></H3>
<H3 >I am a plain old boring heading 3 tag, CSS code get to have all the fun :-></H3>

<H3 >I am a plain old boring heading 3 tag, CSS code get to have all the fun :-></H3>

<H3 style="color: 663399; font-family: Arial, helvetica, sans-serif">I am an example of an "inline style" which produces purple text displayed in the arial</H3> </BODY> </HTML>

4. Save the file under a new name so you can compare it to the original.

5. Now open up the "in-doc.html" file in your browser. Here is an example of how the page should display

Document Style and Inline example

There are a total of 7 headings on the page. Five headings are controlled by the document level style and the browser displays them as rust text in the font "comic sans". Two headings are controlled by the inline style, the browser displays this text in purple and the font face Arial.

The HTML code used for the 5 rust headings was the plain old <H3> tag, the document style which was embedded in the head of the document is controlling the formatting for these headings.

What about those purple headings? The inline style which contained style code within the <H3> tag, overrides the document level style. Inline style take precedence over document level styles. Put another way inline styles cascade over document level styles.

Did you notice that all of the headings are now italic? Why did that happen? Well a document level style controls ALL instances of tags within the Web page. Since the inline style did not contain a property for font-style it accepted the documents level style's "font-style" of "italic". The purple color of this heading is controlled by the inline style and the italic formatting from the document level style.

Now that I have had a taste of the power of CSS - I want more. I wonder if this is how Napoleon got started?

Let's create an external style sheet and link to it from 3 web pages

CSS Document Styles - Templates Lesson

<style>  </style>

<style>

</style>