Style Sheets, CSS

Introduction

Before doing this tutorial, you should already be comfortable with creating a very basic HTML document consisting of a head and body section. You should understand how to use the Body tag to place a background image or graphic. You should know how to use link attributes within the body tag. And you should know some basic font tags including ways to set the size, typeface, and color. If you're not sure about these, please take a moment to run through our basic HTML tutorial. Then come back here when you're done.

When HTML first came out, the only way to control the appearance of text was to use font tags. Additional tags were needed to make text bold or italic. Still more tags were needed to set alignment. In the past, the HTML body tag was used to control the appearance of hyperlinks as well as the page background color or image.

The problem with this is simple. Say you created a website for your workplace. The boss likes it but wants you to change the typeface, size, and colors. Suddenly you find yourself going through hundreds of tags on dozens of pages. There must be a better way!

Luckily there is a better way; a method that will let you put most of your style attributes in one place. You'll be using something called "Styles" or "Style Sheets" or "Cascading Style Sheets" (often referred to as "CSS").

There are three methods for doing this:

1. You can put style tags into a separate text file ending in .css and then tell your web pages to just go get all the info there.
2. They can appear in the HEADer part of each of your web pages.
3. Or they can be use in the body of your web pages right next to the text you're trying to format. This last way is similar to what you now do with font tags.

These three different levels seem to "cascade" downward from a separate file (the most efficient) to the HTML body (the least efficient).

Getting Started

Let's start with the Second method I mentioned. We'll create a web page where we use Style tags.

There are some special tags that you'll always use when placing style tags into the HEADer part of your document:

<HTML>
<HEAD>
<TITLE>My First CSS Page</TITLE>
<STYLE TYPE="text/css">
All your style tags will go here. You can put in as many as you want.
</STYLE>
</HEAD>

Remember that you're making a Style tag sandwich. The <style> and </style> tags are the bread. All of your style attributes are the meat for your sandwich.

The style tags themselves look a bit different than HTML tags. They always follow this format:

selector { property1: value1; property2: value2 }

Replacing the Body Tag

This tag would give you a blue background:

BODY {background: Blue}

We've made the background property of the Body selector blue.

What if you want to set more than one property? No problem.

BODY {background: #F0F8FF}
a:link { color: blue }
a:visited { color: purple }
a:active { color: red }

Now let's get fancy. Style tags let you do more than can be done with plain HTML.

BODY {background: #F0F8FF}
a:link { color: blue }
a:visited { color: purple; text-decoration: none }
a:hover { color: blue; text-decoration: underline; background: #add8e6 }
a:active { color: red; text-decoration: none }

Remember, a link is a hyperlink that hasn't been clicked yet. A visited link is one that has been clicked. A "hover" setting can change the color of a link or the background under the link. It is activated when someone places a mouse over the link.

You'll also notice the reference to text-decoration: none
That removes the underline from your links. If you use this, it's good to set a hover color change. That way when someone places the mouse over the text, they’ll recognize the fact that it is indeed clickable.

The example above used a background color. What if you want to use a background image? No problem!

BODY { background-image:url (back.jpg) }

This sets an image file called back.jpg as your background image.

As mentioned, style tags let you do things that you can't do with HTML. So let's have some fun:

BODY { background-image:url(back.jpg);
background-color: #F0F8FF
background-repeat: no-repeat;
background-position: bottom left;
background-attachment:fixed }

Repeat or no-repeat determines whether or not your background image will tile to fill up all of the available space in a visitor's browser window.
Position lets you specify what portion of the page the background should occupy.
The Fixed value is one of my favorites. It places the background on a web page with super-glue. You can scroll through the page and see the foreground text and images scroll but the background will not scroll. Pretty cool, huh?

Here is an example of a fixed background:
fixedbackground.htm
As you scroll down to read the text, you'll notice that the text and foreground image scroll whereas the background does not.

Before moving on, we have to establish a default attribute for the text on our pages. Text that hasn't been given any other attributes will appear in this style. To do so, you use:

BODY {font-family: Verdana; font-size: 10pt }

Margins

There's one more thing we can do with our Body tag. And it's one of my favorites. If you've read a book, you know that it has right and left margins. One of the problems with web pages is that unless you do something about it, text will stretch from one side of the browser window to the other with no margins at all. This doesn't look very good. Luckily, we can add margin tags like this:

BODY {font-family:verdana; font-size: 10pt;
margin-top: 0px;
margin-right: 60px;
margin-bottom: 0px;
margin-left: 60px }

Now let's put it all together and see what we have:

Headings, Fonts, Paragraphs

You don't want all of the text on your page to be the same size, color and typeface do you? That could be pretty boring. Luckily there are other HTML tags that you can add style attributes to.

The <H1> tag is used to set a Heading, size 1. This is the largest size available. Let's give that some more style:

H1 {font-size: 20pt; font-family: arial; font-variant: small-caps; color="#708090" }

Any text that you put between <H1> and </H1> tags anywhere on your page will have these attributes:

The font face will be Arial, the size will be 20pt, the color will be #708090 (kind of blue-gray) and the font variant (special font handling) will be small-caps.

You could go on to define H1 through H6 in this way if you wanted to.
You can also handle multiple elements (or selectors) in the same style tag:

p, h4, h5, h6 { font-family: Verdana; color: green }

Anything within <p> and </p> tags, <h4> </h4> tags, <h5></h5> tags, and <h6></h6> tags would be in the Verdana font and green. You can set font face, color, even alignment.

You may remember that we set a default text color as part of our body tag. The setting defined above for the paragraph tag will override the body text color setting Style attributes can also be defined for HTML lists or tables:

li, ol, ul {font-family Verdana, Arial; color: blue }
td, tr, table {font-family Verdana, Arial; color: maroon }

Defining your own style selector using a class ID

Say you wanted to place a copyright at the bottom of the page. You could use:

.copyright { font-size: 8pt; color: red }

To invoke this style, you'd use this HTML tag in the body of your document where you want the copyright to appear:

It would appear like this:

This is mine, mine, all mine! 2004

If you're new to the DIV tag, it's used to define a word, a phrase, a paragraph, a section, or any other logical "hunk" of information. It's designed to replace the Paragraph tag. In the copyright example, I defined my copyright phrase as a hunk of info and applied the "copyright" class ID to it.

Now let's add those settings for our headings, lists, tables and .copyright class we've made.

Putting It All Together

<HTML>
<HEAD>
<TITLE>My First CSS Page</TITLE>
<STYLE TYPE="text/css">
BODY {font-family:verdana; font-size: 10pt;
margin-top: 0px;
margin-right: 60px;
margin-bottom: 0px;
margin-left: 60px;
background-image:url(back.jpg);
background-color: #F0F8FF;
background-repeat: no-repeat;
background-position: bottom left;
background-attachment:fixed }
a:link { color: blue }
a:visited { color: purple; text-decoration: none }
a:hover { color: blue; text-decoration: underline; background: #add8e6 }
a:active { color: red; text-decoration: none }
H1 {font-size: 20pt; font-family: arial; font-variant: small-caps; color="#708090" }
H2 {font-size: 16pt; font-family: arial; font-variant: small-caps; color="#708090" }
H3 {font-size: 12pt; font-family: arial; font-variant: small-caps; color="#708090" }
p, h4, h5, h6 { font-family: Verdana; color: green }
li, ol, ul {font-family Verdana; color: blue }
td, tr, table {font-family Verdana; color: maroon }
.copyright { font-size: 8pt; color: red; }
</STYLE>
</HEAD>
<BODY>
All page content goes here
</BODY>
</HTML>

You'll notice that we still have the old style <body> and </body> tags. Older browsers like it that way. As long as you don't define attributes in that body tag, the style you've set in the header will apply.

Try it, you'll like it

Here is a template file using some of the Style tags we've been talking about this far: csstemplate.htm.
Click the link then select "View Source". This will open the source in Windows Notepad.
Try making changes to the style tags and saving the file to your hard drive.
View the page you've just saved in your browser.
Make more changes. Then reload the page in your browser to see them take effect.

Other Ways to use Style Tags

Several pages ago, I mentioned that there are 3 ways to use CSS. We've been talking about the second way – putting all of the style tags into the HEADer section of each web page.

Linked or External Style Sheets

What if you have a website with 800 pages? Having to change even one attribute on all of those pages would take forever. So if you're doing a large or complex site, you'll want to use the first method mentioned – a text file with the name ending in .css

There are two steps: You already have your style tags in the HEADer portion of one of your web pages. Copy everything between the opening <STYLE> and closing </STYLE> tags. Do not copy these tags.
Open Windows Notepad and paste in the text that you've just copied.

Step 1: Save that file as: first.css
The contents of the file will simply just this text:

BODY {font-family:verdana; font-size: 10pt;
margin-top: 0px;
margin-right: 60px;
margin-bottom: 0px;
margin-left: 60px;
background-image:url(back.jpg);
background-color: #F0F8FF;
background-repeat: no-repeat;
background-position: bottom left;
background-attachment:fixed }
a:link { color: blue }
a:visited { color: purple; text-decoration: none }
a:hover { color: blue; text-decoration: underline; background: #add8e6 }
a:active { color: red; text-decoration: none }
H1 {font-size: 20pt; font-family: arial; font-variant: small-caps; color="#708090" }
H2 {font-size: 16pt; font-family: arial; font-variant: small-caps; color="#708090" }
H3 {font-size: 12pt; font-family: arial; font-variant: small-caps; color="#708090" }
p, h4, h5, h6 { font-family: Verdana; color: green }
li, ol, ul {font-family Verdana; color: blue }
td, tr, table {font-family Verdana; color: maroon }
.copyright { font-size: 8pt; color: red; }

Step 2: Now we need to tell your web page to go look at first.css to find instructions and apply them to the body section of that web page.

To do so, use:

Now let's look at that in context:

<HTML>
<HEAD>
<TITLE>My page</TITLE>
<link rel="stylesheet" type="text/css" href="first.css">
</HEAD>
<BODY>
All page content goes here
</BODY>
</HTML>

As you can see, there are no longer any style tags in the HEADer part of our web page. That link replaces them and points to the first.css file that we created.

You could have hundreds of web pages pointing to this file and could immediately change all of them by changing values in first.css.

Inline Style Tags

The third way to use styles is to place them in the body text of your web page. This is less desirable because you lose the convenience of having everything in the same place. Sometimes this method is called an "Inline Style". It would look like this:

<P STYLE="color: green; font-family: Verdana"> This text would be green in Verdana font.</P>

You could also use:

<SPAN STYLE="font-family: Arial">Hello</SPAN>

Wrapping Up

To recap, there are 3 ways to use Style tags:

1. In an external .css file
2. In the Header part of an HTML document
3. In the body text of an HTML document

This is where the word "Cascading" comes in. If you have different settings in each of these style types, the one closest to the text or object it is applied to gets to take over. Because of this, you can use the #3 method if you want a small portion of text formatted differently that specified in your #1 external style sheet or #2 Header style definition.

CSS References and Resources

There are many more things that can be done with CSS. Please use these links to learn more.

Official CSS tutorials at W3C Schools (very complete but techie):
http://www.w3schools.com/css/default.asp

Style Tutorials at HTMLGoodies (great for beginners!):
http://www.htmlgoodies.com/beyond/css.html

CSS tutorial by the Web Design Group:
http://www.htmlhelp.com/reference/css/

CSS Quick Reference:
http://www.htmlhelp.com/reference/css/properties.html
-and-
http://www.wdvl.com/Quadzilla/StyleSheets/ssquickref.html.