Slacker's Guide to HTML: Style Sheets CSS Guide

Cascading Style Sheets (CSS)

Cascading Style Sheets will enable you to easily format your website without extensive coding. With CSS you can apply certain properties to tags and even to the entire document with one line of code. Instead of manually coding every since instance of the bold tag to be bold and red you can do it once and have it apply to every instance of bold. That might not be the most exciting example, but the implications are what should excite you.

Like most people you probably prefer to work less hard as opposed to working harder. You want to go home early instead of working late. That natural preference for less work is the reason that you should understand and appreciate what CSS can do for you. By using your head for a minute and plotting out a design strategy before you start typing code you can save yourself a lot of time and a lot of boring programming. So keep reading...

Selectors
Properties
Values

Welcome to CSS!

CSS was created by a group of nerdy web programmers in a basement who eventually decided that they didn't have enough time in the day to play Dungeons & Dragons, watch Star Wars reruns and make web pages. So while thinking about the problem one of them decided that HTML needs to have a shortcut. There must be a way to get a lot of the routine and repetitious coding out of the way all at once so you don't have to use the same tags over and over again. And they all sat around and drafted the first version of CSS. And drank hot chocolate. And gave birth to a way for web designers to apply cool effects to their pages and to expand on what new stuff could be done with their HTML markup via CSS.

That was the humble beginnings of Style Sheets. Now on to clarifying exactly what CSS is.

What is CSS?

According to the World Wide Web Consortium "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents". That's a very clear and concise definition. And, like I said before, the best part of CSS is not the fact that it lets you add style but rather than it lets you do it in bulk - to entire pages all at once with one reference.

Styles: Tags, Properties, and Values

This is a simple style:

b {color: blue;}

And that style is set up in this manner: tag {property: value;}

That is the structure of a style. You must first list the HTML tag the style will apply to , then list the property of the tag being acted upon and the specific setting you will change the property to. In the above case you are altering the b (bold tag) tag so that the color (property) of it will be blue (value). The property and value go inside curly braces and must be seperated by a colon (:) and followed by a semi-colon (;).

That style is a simple css rule. A rule has two basic parts. The first part (b in this example) is the selector, and that is the HTML attribute that will be affected. The second part of that rule is the declaration of color: blue; and that identifies what about the selector is changing (color) and then what it is changing to (blue).

Now I'll break that down once again:

Color is the property of the declaration
Blue is the value of the declaration

I'll show you a different example now. Let's assume that you want all of the header elements to be green. You can list multiple selectors if you want, seperated by commas. Here is the example:

H1, H2, H3, H4, H5, H5 {color: green}

Therefore, all the header elements will appear green. That example might get you thinking, but it probably won't. If it did then you might be thinking this: "Can I list more than one declaration?"

If you were thinking that then we'll assume that you want to make everything enclosed within the bold tag blue and italic. Here is the script for that command:

b {color: blue; font-style: italic;}

A semicolon (;) must seperate all declarations. Remember that.

You'll notice that the styles are enclosed in comment tags. Comment tags are not necessary, but it's easy to remember and it'll ensure that your styles don't screw everything up on some old browser.

Three Ways to Have Style

Your clothes might not be in style. Your shoes might be falling apart. Your haircut might be hideous. You might be so ugly that only your mother could truly love you. But all that doesn't matter any more. This is the Internet - the land of make-believe. On the Internet you are smart, you are funny, and you are one sexy bitch - and that's the bottom line. So when you make a web page it better be sexy, too. It better be in style. You can't be the big honcho with some ugly web page. If your code is not in style then you aren't in style. That means you're letting the mask slip - you're off your game. Don't be an asshole - be in style.

Moving on...

There are three ways to get CSS on your site. You can:

Link to an external style sheet
Refer to style in the head of your individual page
Apply a style to the individual tag

And because I just know you folks absolutely adore my graphical representations I will show you a picture of the fundamental difference between those three methods.
Gary Busey knows style when he sees it

From that picture you can soon see the advantages of each method.

The top right box represents a separate file, one I saved as styles.css. It contains all of our styles. You can create and save a file as .css with Notepad or almost anything. The large box represents our HTML document we want to apply style to. In thetop of the head of the large document you can see a section with some style information in it. That part is referring to styles.css as a master file to get all style information from. Lower down, inside the body of that document, you can see a style applied to the bold tag individually.

Those are the three methods of applying a style to a document. You can use all three of them at once if you wanted to, or you can use them one at a time.

If Gary Busey's bothering you just try to ignore him. He'll wander away after a while.

I'll show you the three ways to apply styles with some sample code now.

Linking to an External .CSS File

Linking to an external document allows you to create one master file which will be referenced every time you refer to a style by name or id in the actual document that is being formatted. For example you might make a file called styles.css and include only the following information in it:

b {color: blue;}

And when you included the reference (below) in the top of your document it will mean that all items within the b tag also appear as blue. This is the line you need at the top of your document which will call the external style sheet:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

The external style sheet file does not need to be called styles but it does have to be a .css file. Each time the page with the reference in it is accessed by a browser the styles.css document will also be accessed. The visitor will not be aware that the styles.css document is being accessed, but your browser will treat the tags in the HTML document in the manner that the CSS document describes. In the case of our example above the CSS document tells the HTML document to make all bold words blue.

Head References

You can reference styles within the head of your document. There is no external CSS document required for this. Simple place an opening style tag within the head tags and then define your styles. This will dictate how each described tag will be formatted on that page. First let's look at the code which will go inside the head tag:

<style type="text/css">
<--
b {color: blue;}
-->
</style>

This style has the same effect as the previous example. We are simply making all bold text also be blue. According to that code above each instance of the b tag will have the command color: blue applied to it. Simple drop something inside the bold tags inside the body of your document, like so:

<b>This text will be both bold and blue</b>

And that's it.

Direct References

You can apply a style directly to a tag, as well. This is pretty straightforward. Take a look:

<b style="color: blue;">This text will be both blue and bold</b>

We added the style attribute to the bold tag and we gave the style attribute the property color and the value blue. This is a very easy way to apply styles but it is not a "cost-effective" way to do it. Remember, we are trying to save time and energy. Doing this means that you have to apply each style to each tag individually. This is time-consuming and aggravating.

Therefore, this method is only worth using when you are only using a particular style once of twice and it's use doesn't merit any further typing.

There's much more to learn about Cascading Style Sheets but you're now done with the hardest part. The rest is the fun stuff - you get to see the many formatting options available to you with CSS. You have much more creative freedom that plain HTML allows you.

Selectors
Properties
Values