CSS Basics

Benifets, Anatomy, and CSS Resources

by Karey Cummins, RTB Wizards

Skip to section:
Benefits of CSS | Anatomy of CSS | CSS Resources

Part 1 - The Benefits of CSS:

Pages load faster because redundant coding is removed from each page.
You can change colors, fonts, and more on all of your pages by editing only one CSS page.
Because style sheets are designed to "cascade", you can easily add extra items to single pages or to blocks of text.
Many old HTML tags are being "deprecated" or phased out of current browser standards. By using CSS today, your web pages will be viewable as new browsers are introduced.

CSS is an excellent addition to plain HTML.

With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it.

With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.

Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.

Finally, CSS can be written so the user will only need to download it once - in the external style sheet document. When surfing the rest of your site the CSS will be cached on the users computer, and therefore speed up the loading time.

The biggest benefit of CSS is how easy it is to read. It actually makes sense! When you see something in the style sheet that looks like this - border: 1px solid #000000 - you know at a glance that it's a solid border that is 1 pixel wide and is black.

As you read through the rest of these Help Center pages, you may decide that your older web pages could be made much better with the addition of a nice style sheet.

The only reason not to use CSS in your design is not knowing how.

Part 2 - Anatomy of CSS

The tutorial below will take apart an external style sheet and show you what all of the code means. It's actually very simple to learn. It also allows you to have greater control over how your pages display to your visitors. Note: We're only tackling the basics......if you want to learn more, we suggest you visit our CSS Resources below for a list of our favorite books and sites featuring CSS tutorials.

------------------------------------------------------------

The Body Definition

BODY {
background-color : #FFFFFF;
font-family : Verdana, Arial, sans-serif;
font-size: 80%;
color: #000000
margin: 0px;
scrollbar-arrow-color: #000000;
scrollbar-face-color: #7D9AC9;
scrollbar-3dlight-color: #7D9AC9;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #7D9AC9;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #FFFFFF;
}

Just like the body html tag, you can set the background color, font family, font size, font color, line spacing (the distance between lines) and much more. Font sizes can be set in pixels (14px), in points (12pt), as a percentage (100%), and as a relative size (smaller). We prefer using a percentage so the viewer can adjust the text size in their browser as needed.

The scrollbar items are just for fun. Just like it says, it sets the colors of the right-side scroll bars on the screen. This is only viewable on IE 5.5 and higher and Netscape 6.2. These attributes are ignored by older browsers and your viewer will see the standard grey bars.

You can set your color parameters in hex code as shown, or by name (black), or by RGB such as rgb (000, 000, 000). We think using the hex code is the easiest.

------------------------------------------------------------

The Paragraph, Table, Cell and List Item (bullets) Definitions

P, TABLE, TD, TR, LI {
font-family : Verdana, Arial, sans-serif;
font-size : 100%;
}

Since quite a bit of your text begins with the Paragraph tag <p> or is inserted into a table or cell, we can specify the font family, and the size of the text. In this case we have specified that we want all paragraph text to be 100% of the text size specified in the body attribute above. This brings you text that is the size on this page. You can, of course, make your text larger or smaller by changing this percentage.

--------------------------------------------------------------

Hyperlink Definitions

A:LINK { color : #7D9AC9; text-decoration: none; }
A:VISITED { color : #7FBCAA; text-decoration : none; }
A:HOVER { color : #000000; text-decoration : underline overline; }
A:ACTIVE { color : #A980A6; text-decoration : none; }

You can state whether you want your links underlined and even apply a "hover" effect to your text links. There are several eye-catching effects you can apply to text links to make them more noticeable and appealing.

Note: The hover effect is not supported by older browsers and will be ignored.

--------------------------------------------------------------

Heading Definitions

H1 { font-size : 120%; font-weight : bold; color : #E8878E; }
H2, H3, H4, H5, H6 { font-size : 100%; font-weight : bold; color : #E8878E; }

These are your heading properties. Because search engines place emphasis on heading tags, we have made the first heading <h1> to be 120% of the body font size and specified that the text shall appear in bold and then defined the font color.

The remaining headings (H2 - H6) are specified in one statement to be one color and one size.

----------------------------------------------------------------

Special Classes:

.catalog {
font-family : Verdana, Arial, sans-serif;
text-align: justify;
padding: 20px;
line-height: 15px;
}

The flexibility in style sheets comes with the use of "classes". A class can be a variety of elements that are grouped together under a name which begins with a period.

In this example, we have created a class called "catalog". When we apply this class to a table cell, that cell will have the following:

Will use the appropriate font and/or font family
Will have the text justified
Will have a cell padding of 20 pixels
Will have the text lines spaced 15 pixels apart
.hottopicone {
background-color: #AAD2C5;
padding: 5px;
line-height: single;
font-size: 75%;
}

In this example, we have created a class called "hottopicone". When we apply this class to a table cell, that cell will have the following:

Will have a specific background color
Will have a cell padding of 5 pixels
Will have the text lines single spaced rather than expanded
Will have the font sized at 75% of the body font attribute (the text will be 25 percent smaller)

Part 3 - Resources: Learning More about CSS

One of the great advantages of CSS is that there are so many learning resources right on the web. Here are some of our favorites:

Take a Class:

http://www.eclecticacademy.com/websitedev.htm#css (Yes, I'm the teacher! It's a fun class and you get my undivided attention for 6 weeks. This class builds a solid foundation and makes takes the mystery out of using cascading style sheets.)

Tutorial Sites:

http://www.w3schools.com/css/
http://www.echoecho.com/css.htm
http://www.javascript-page.com/css/
http://www.mako4css.com/

Some CSS Razzle-Dazzle:

http://glish.com/css/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.meyerweb.com/eric/css/edge/
http://www.bluerobot.com/web/layouts/
http://hotwired.lycos.com/webmonkey/97/33/index1a_page2.html?tw=authoring
http://hotwired.lycos.com/webmonkey/authoring/stylesheets/index.html

Interesting Reading:

http://www.alistapart.com/stories/fear/
http://www.alistapart.com/stories/alternate/

Making it Easy:

http://www.westciv.com/style_master/house/