PageResource.com - Web Development Tutorials

Styles in the Head Section

Declaring styles in the head section
home    DHTML Pit Stop  |  CSS Index  |  CSS Properties  |  HTML List

Home/DHTML/CSS/Styles: 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) :

<HEAD>

<STYLE>
<!--
SPAN { color:red; font-style:italic }
-->
</STYLE>

</HEAD>

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!

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. In the next section, we will see a way to get around this problem using classes and IDs rather than declaring a style for the tag itself. So, let's move on to the next section: Using Classes to Declare Styles.

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy