The Slacker's Guide to Cascading Style Sheets

The Slacker's Guide to Style Sheets is a tutorial on how to implement styles with your web page or website. By making settings in the head of a document or in a completely seperate document, you can have these settings affect your whole web page or site. This is sorta like styles in Microsoft Word.

There are three ways to implemenet style sheets onto your web pages. Those three ways to attach styles to your documents are as follows:

Linking to an external style sheet, which is a file you create which has nothing more than a list of styles in it and is designated as a .css file. Here's an example of how to link to an external stylesheet:


<LINK REL=STYLESHEET TYPE=
"text/css" HREF=
"www.me.com/mystyle.css"
MEDIA=screen>

That link calls the page that is loading up to take on any characteristics specified in the file "mystyle.css".

You can also utilize style sheets by listing styles in the head of the document that you would like to have thestyles affect. If you would like all H1 elements to be green then you might include this command inside the head of the document:


<style type=text/css>

<!--

H1 {color: green}

-->

</style>

Notice the comment tags surrounding the actual style information. Those tags are there so that browsers that cannot handle style sheets will simply ignore the whole style declaration and move on instead of trying to read it an getting confused.

The third way to use style sheets is to directly embed them into yout page when needed, but I don'tsee the point in this unless you'll only be using style sheets at a minimum. You would include it inside the body of the document. Look:


<html>

<head>

<title>My Page</title>

</head>

<body>

<p>

This text is normal

</p>

<p style: "color: green">

This text is green

</p>

</body>

</html>

Now that you know how to "call" style sheets to function on your page, you might want to know just what the hell they are. I guess I should tell you. I will use a very simple example to start with, explaining each of it's elements, and then I will use a few more complex examples. Here is a very simple style:


p {color: blue}

That style is a simple css 'rule'. A rule has two basic parts. The first part (p) is the 'selector', and that is the html attribute that will be affected.
The second part of that rule is the 'declaration' ( 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 a little further:
Color is the property of the declaration.
Blue is the value of the declaration.
Now I'llshow you a different example. Let's assume that you want all of the header elements to be green. You can list 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, OK?

Now I'll mention something that needs to be included in all style references that you make. When listing styles you should of course, just as in HTML, have opening and closing tags. The opening and closing tags for a style are as so:


<style type=text/css>

<!--

....info (declaration)

blah, blah...

-->

</style>

You'll notice that the styles are enclosed in comment tags. These tags must remain there because not all browsers can recognize styles (and if they don't recognize styles they display it as text, which isn't pretty). So, always keep styles inside comment tags.

So, you now have a slight understanding of style sheets, I hope. In the following pages I will discuss the MANY things you can achieve with style sheets, such as changing entire sights with the change of one word in one file! Continue by clicking on a link below.

Selectors are the HTML tags that you change with any given style. You can include selectors in your css (cascading style sheets) code in a few ways. The 'selectors' link below will explain that.
Properties are the characteristics of the HTML tag in your style that you will be changing. There are innumerable properties to be toyed with. They are all discussed in this guide.
Values are the settings for the properties. If a property is "color", a value might be "blue".