Tutorials

Cascading Style Sheets (CSS)

This tutorial will give you an introductory overview to Cascading Style Sheets, more commonly referred to as CSS. As a web designer/developer, I use CSS more and more every day, and have come to the realization lately that it may be one of the most powerful items in my ‘web toolbelt’.

What is CSS, and How Do I Use It?

As mentioned above, CSS stands for Cascading Style Sheets. Essentially, what a CSS document does is separate content from layout on a web page, allowing you to style page elements individually or collectively, as needed. A CSS document is composed of a list of styles, which is a definition of things like font sizes, colors, margins, and much more. Each style is given a unique name, called a selector, which is how the HTML pages refer to the styles. For instance, in your CSS document you may have a style for the default paragraph text, which may look something like this:

p {
font-size: 12 px;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}

In this case, the selector is the built in HTML tag <p>, so this will set the style for all paragraphs to have a font size of 12px, use the first available of Arial, Helvetica, or sans-serif typefaces, and to have a color of dark grey. You can style any HTML tag you want, so if most of a site’s text is going to be a certain way throughout every page, I usually declare a ‘default’ text style in the CSS document in a ‘body’ style. You can also define custom styles by making a class (which can be used more than once on a page) or an id (which can only be used once per page.) A sample class definition would look like this in your CSS document (note the period before the selector name – this distinguishes it as a class!):

.sampleClass {
font-size: 10px;
color: #CCCCCC;
}

Now let’s say I want to style a certain paragraph with this .sampleClass class – all I would do is add class=”sampleClass” to that paragraph’s <p> tag, like this:

<p class=”sampleClass”>This is the paragraph text I want to style with my sampleClass.</p>

(An id works basically the same way, except the selector is defined with a preceding ‘#’ sign, i.e. #sampleID.)

I know all this may be a little confusing to you if you’ve never used CSS before, but after just a little practice and experience it really becomes easy! In no time you’ll be styling your entire site’s text -- and with more experience, even creating the entire graphical layout – via your CSS documents! I have collected a few links to help you get started, and they can be found at the end of this tutorial.

Why Should You Use CSS?

Although there are many reasons to use CSS, my main reasons for using it on all sites I do are this:

1. Control - It’s much easier to control the appearance of layouts/text in your sites when using CSS. Imagine designing/maintaining a site like this – which is over 200+ pages – and the client decides that he wants the main content font on every page to be a couple shades darker. Instead of going thru every single page, I can just edit one line in the CSS document and immediately change every page’s content text color. Talk about major time-saving!
2. Code Readability – Since there is considerably less tag markup in a page designed with CSS, it makes it MUCH easier to read/edit the code. By the way, this also makes your site more friendly to search engine robots. (Isn’t that reason enough to use CSS, alone?!)
3. Reduced Page Sizes/Download Times – Also due to less tag markup on the pages, they will load faster.
4. Quicker Page Design Time – Once again, less ‘tag soup’ means that it’s quicker to design/develop every page.
5. Accessibility – Using CSS correctly will result in your pages containing properly structured HTML, such as only using tables to hold tabular data, using <p> tags solely for paragraphs, etc. This means that your pages will be MUCH more accessible by screen readers, text browsers, etc. – and therefore your potential site audience is increased!

Further CSS Resources (Links open in a new window)

• W3C’s Intro to CSS
• WDG’s CSS Guide
• CSS Zen Garden – See the true power of CSS-based layout/design techniques here. This is the site that convinced me to make the switch from table-based layout to CSS.
• A List Apart – Great info, but mostly geared towards more advanced CSS users.