WEBMASTERSDATABASE.COM OWNS THE COPYRIGHT TO THIS TUTORIAL! PLEASE WRITE FOR FURTHER USE ON YOUR SITE! Introduction to Cascading Stylesheets
Every webmaster has encountered it: You've made a site with twenty pages or more, and you want to redesign the entire thing. That means you have to go to every individual page and scour the code to make changes to each page's background and text color, layout, customized headings, links, and other aspects. This is a tedious job that nobody likes, but which everybody has to cope with at one time or another.
Not anymore. Enter cascading stylesheets, the fabulous method of building pages that enables you to revamp the entire site's style by updating one or just a handful of pieces of code. Basically what happens is that you use a special group of tags in addition to your regular HTML to create
styles, which change the display of content between one set of tags; and tag
classes, code categories that let you change every instance of that particular class by modifying the main entry.
On the downside, CSS isn't universally usable, and differs slightly between browsers. Nonetheless, it's very helpful if most of your audience is using newer browsers such as Internet Explorer 4 and Netscape Navigator 4. The following are supported by both of these.
How to Add CSS
There are three ways to put stylesheets on your site. The first and most simplest is called
inline stylesheets. With this method, you add a STYLE attribute to just about any HTML tag to make a one-time change to the content. Say, for instance, that I'm getting rid of the old FONT tags in favor of CSS, and that I want a boldface, green text that's a bit bigger than normal. In this case I'm using the SPAN tag, which can be used just about anywhere you want. Other tags such as P or B also work, as will many other HTML tags. CSS notations usually have a series of
category:value pairs separated by semicolons (
, with the whole thing enclosed in double quotes ("). Here's how this example of inline styles will look on your page, followed by the code.
CSS -- better than sliced bread! Code:
<SPAN STYLE="color:green; font-weight:bold; font-size:130%;">CSS -- better than sliced bread!</SPAN>
You can also use a CLASS instead of STYLE, like this (See below for an explanation of classes.):
Code:
<SPAN CLASS="greentext">CSS -- better than sliced bread!</SPAN>
The next CSS method is called
embedded. That means they're stuck into the HEAD of the webpage and the specifications affect that entire page. Here's what it looks like:
Code:
<HEAD>
<TITLE>My First CSS-Supercharged Page!</TITLE>
<STYLE TYPE="text/css">
<!--
div.code { width:100%; border-color:gray; border-style:dotted; border-width:1px; padding:10px; font-weight:bold; text-align:left; }
.title { font-size:200% }
.sub1 { font-size:150% }
-->
</STYLE>
</HEAD>
Instead of being in quotes, you'll notice that these are enclosed in curly brackets ( { } ). The comment tags ( <!-- --> ) are used to hide the styles from browsers that can't handle them, keeping the code from appearing on the page itself. Embedded stylesheets can be specified in one of several ways.
[1] You can pick a certain HTML tag and then say what should happen every time that tag appears on the page. (Note in this example that the text is still boldfaced with the B tag unless you specify otherwise.)
Nifty purple-colored text Code:
B { color:purple; }
...
</HEAD>
<BODY ...>
...
<B>Nifty purple-colored text</B>
[2] Besides that, you can also set a CLASS for a specific tag by putting a period and a name after it. As you can see, you're free to add as many style specifications as you need for each element.
(would show a red 10px box here but cant because its in a forum :D)
Code:
div.code { border-color:red; border-style:solid; border-width:3px; padding:10px; font-style:italic; }
</HEAD>
<BODY ...>
<DIV CLASS="code">Have you boxed in your text today?</DIV>
[3] Finally, a CLASS can be added to every tag that specifies that class, which allows it to be used on a number of different elements. You can also see here how STYLE can be specified to add to the basic CLASS.
Yellow is the color (colour) of the brilliant sun. Code:
.highlight { background-color:yellow; }
</HEAD>
<BODY ...>
...
<DIV CLASS="highlight" STYLE="height:70px; width:100px;">Yellow is the color</DIV><BR>
<SPAN CLASS="highlight">of the brilliant sun.</SPAN>
The last way to use CSS, and the most efficient, is the
linked stylesheet. In this method, you create a separate text file ending in .CSS that holds styles written in the same manner as those of the embedded ones. Then you include the filename of the style you want to use on each page like this:
Code:
<HEAD>
...
<LINK REL=stylesheet HREF="style.css" TYPE="text/css">
</HEAD>
That's all there is to it! You have now gained the wisdom needed to transform your webpage updates from dull repetitions to basking in the joy of stylesheets. Use your new powers for good.
(P.S. - For an extensive reference of stylesheet tags, check out
WebMonkey's Stylesheets Guide.) ----------------------------------------------------------------------
Adam Gentry, this article's author, enjoys playing with stylesheets, HTML, and other geeky pursuits. Check out his Web design business or write to him if you need any internet-related help. (His WD member name is "WebForGod" 
CSS Tutorial!
CSS Tutorial! 
Linear Mode
