Declaring styles in head section

Lesson-3 (Declaring Styles in Head Section)

Well, the style attribute was okay, but you may have noticed it did not make anything much easier than it was to use several html tags. Well, now we are going to see a method of using style sheets that will begin to make life a little easier because you won't have to write the same thing numerous times on one page to get the effect you desire.

To do this, we are going to declare a style inside the head section of the page. A style in the head section must begin with the <STYLE> tag and end with the </STYLE> tag. Below is an example that declares the style for the <SPAN> tag in the head of the document. (The SPAN tag is a division in a page. It won't break to the next line after you close the tag, like the DIV tag does) :

The whole thing begins with the <STYLE> tag. Right after the STYLE tag you will notice that we begin an html comment. This hides the contents of the STYLE tag from browsers that do not recognize it, so it won't be printed on your page.

Now you see this line:

SPAN { color:red; font-style:italic }

This line declares that every time you use the <SPAN></SPAN> tags in your page, the text between the tags will be red and italic. Notice you do not use the less-than "<" or greater-than ">" signs around the SPAN declaration. Also, rather than using equal signs or quote marks, we place the style properties inside two curly brackets { } to declare the style properties. The properties are each separated with a semicolon. For more on the style properties and values, see the previous section for more on the syntax for declaring a style property and its value.

Now that you have that in your head section, you can just use the <SPAN></SPAN> tags to make yur text red and italic, rather than writng out two tags for it each time you need the effect:

<SPAN>I am red and italic,</SPAN> but I am not. <BR>
<SPAN>I am red and italic too!</SPAN>

This will give you the following:

I am red and italic, but I am not.
I am red and italic too!

Now if you were using Netscape, you probaly did not see the red and italic text above. Netscape doesn't seem to support this feature yet, so here is what it will look like when Netscape puts out a new browser supporting this feature:

I am red and italic, but I am not.
I am red and italic too!

You can declare a style this way for almost any tag, but sooner or later you'll run out of tags, or you will not want EVERY instance of a certain tag to do the same thing.