CSS: Cascading Style Sheets

CSS (Cascading Style Sheets) are becoming more popular on the web since every browser after IE 5.1 and Netscape 6 supports CSS, which allows users to control a lot of the styling, or skinning of a website in code rather than with graphics. This is great because not only does it speed up load times of a site, but it also makes maintenance and coding much simpler.

For starters, many people look at CSS and seem to get overwhelmed by it. The first key to learning CSS is the fact that there is no specific structure a CSS must abide by, although there are rules to follow and codes to memorize.

For those of you with Dreamweaver, you'll have the easiest time getting to know CSS by using any program manuals that come with the software. You'll also find a CSS tool which will help you get started coding your CSS and let you know what you can do with each element.

First, let's note the rules of CSS . Let's create an example sheet (this is a blank page called 'example.css'):

/* An ultra stylesheet from Ultrashock */
.ultra {font-family:verdana;font-size:10px;color:#333333}
a.shock {text-decoration:none;font-family:verdana;font-size:10px;color:#333333}
a.shock:hover {text-decoration:underline}

Notice a couple of things. The period in the front of a line denotes a new style. AN 'a' in front of the new period denotes a style for a link. Although the two don't have to be separate and this isn't the only way to do this, we're going to assume this is the only way for now.

Another thing to notice is the name. Notice that we named it whatever we want. Following the name will be the definition which is in between the brackets.

At the very top is simply a comment. It's always helpful if you comment your CSS so you know what everything is for reference later when you want to change everything.

All that's left to know is what goes into the brackets. This is the predefined code you may want to memorize or find a handy reference. http://www.w3schools.com/css/css_reference.asp may be a good start for a reference. What goes in these brackets are definitions how you want your text, links, tables and/or forms to be displayed. In other words, control the color and size of your text, or the background of your page, or the border of your table(s), etc.

Then, to use the CSS, you need to attach the stylesheet to your document one of two ways:

1. Place this in your head tag...
   
   <link href="example.css" rel="stylesheet" type="text/css">
   
2. Place this in your head tag:
   
   <style type="text/css">
   <!--
   @import url("example.css");
   -->
   </style>

Neither one poses an advantage over the other, save the second option being W3C compliant. Both are commonly used.

Now it's time to put your new styles to use . Once you have your stylesheet linked to you page you can use the styles. You use styles within your HTML tags, where they become known as 'classes'. For instance:

HTML
<td width="100%" align="center" valign="top" class="ultra">

All the text within that table will take on the definitions specified in your CSS. Any links within that table will need to be defined like this:

HTML
<a href="http://whatever.com" class="shock">A Test URL</a>

This is the low-down basics to CSS and may be somewhat hard to follow. If you're really interested in learning, try picking up a book or scouring the Internet for some more lengthy tutorials, but this should at least introduce you to the topic. Just understand CSS is not complex and its very flexible.