• Home
• FAQs
• Forums
• Links
• Online Tools
• phpBB
• Scripts
• Tutorials:
• Apache
• CSS
• Databases
• Graphics
• Hosting
• HTML & XHTML
• Miscellaneous
• Perl
• PHP

• About us
• Contact us
• Credits
• Link to us

Write a tutorial for us
Bookmark this tutorial

Print this tutorial
Comment on this tutorial

What is CSS? Why should I use it? Where can I learn more about it?

Introduction

This article is designed to be a quick introduction to using Cascading Style Sheet (CSS). If you are looking for information on table-less CSS layouts, my page about switching from tables to css for layout will serve you better.

This is not a complete tutorial. It is an introduction designed to give the complete beginner some basic notions for dealing with the world of CSS and getting started. Beyond the technical aspect, we would also like to point here to resources on the Internet which discuss the implications of using CSS (or not!), and how to use it.

OK, so what is CSS?

CSS stands for Cascading Style Sheets. You have probably already used style sheets, with MSWord for example. CSS is just the style sheet method to use with HTML. We won't really discuss the "cascading" part too much here; you just need to know that style properties are inherited from parent element to child element, and that any later setting overrides previous settings.

And why should I use CSS?

Using CSS means adhering to the basic principle of separating design from content. HTML (which stands for HyperText Markup Language...) was never designed to make your pages pretty. It was designed to give structure to documents, leaving all the presentation work to the browser.

With the years however, browser companies have added "extensions" (some of which have become standards) supposed to give the designer some control over presentation. And on their side, designers have been using "hacks" and "workarounds" to force HTML into producing a rigid layout. David Siegel in the mid-nineties was a perfect example of this - though his attitude has changed since. Indication if there is one that this "philosophy" is outdated?

But why separate design from content? My page looks fine as it is!

Easier maintenance

If you use style sheets in your word processing application, you will already have an idea of how style sheets can make life easier for you. If I decide to change the font of all my headings, it is much simpler to change the rule in the style sheet which says "Headings are in WinkeyWonkey" than change each individual heading (overlooking the fact that you are bound to forget one)

With HTML and CSS, same thing. You can change 5 <font> tags in each of the four pages of your site (though you will probably have much more!), or you can change a single line in your style sheet...

Cross-browser compatility

Coding HTML for structure allows your page to be read and its structure to be understood by any browser - even if it doesn't look as pretty. Jakob Nielsen tells us that old browsers are here for a while, and although the browser push has good hope of making things change, there are still here. New mediums and devices to access the web are becoming more popular every day. Now it is palm pilots and cellphones, tomorrow it might be your wristwatch.

Accessibility issues

CSS allows the user to override the designer's style sheet settings with his own. This is particularly important for people with disabilities, who may need XL fonts on their screen, or may be using an aural device.

The two last points assume that you want a maximum of people to be able to view your pages. "Internet democracy" is often hyped, but the web still rests upon the ideal that anybody with a connection should be able to view your page. Implementing CSS does not cost you much, and it ensures that you do not leave anyone out.

The web needs standards - CSS is a standard

If you aren't ready to take this as granted, hop to W3C.org and webstandards.org for a dissertation on the topic.

OK, looks good to me. How do I use CSS?

Here comes The Problem: Bad browser support

Current browsers do not have complete CSS support. And that is what makes it a big issue. If you follow the "rules" for CSS strictly, you can be sure that your page will not appear as you had planned in any browser.

But all in all, it isn't that bad. I used to promote CSS-enhancement as the solution. Even though my views on the subject have changed, I am aware that lots of people will still want to go this way. So I have left the instructions for making your pages CSS-enhanced without making them CSS-dependant at the end of this document.

Use CSS

I now recommend to use CSS as much as possible as it was intended to be used. This means coding your page in HTML with no presentational markup whatsoever. It also means coding with the structure of the page in mind, and not its appearance. Use headings to organize your document, and not to make text bigger. Abandon tables. I'm aware that these techniques are recent, and might seem scary to the beginner. But having successfully walked a few people through them, I can assure you that it is feasable - and in some respects, much simpler than battling with complicated layouts.

Step-by-step instructions

1. First, write your pages in very plain HTML. Do not include align attributes, or <font> tags. Do not use <p> or <br> to add extra spaces.
   Simply use HTML as it was intended to be used: to indicate the structure of your document.
2. If you want to support both NN4.x and IE, use linked style sheets. For that, you need to enter the following line in the <head>... </head> part of your document:

   <link rel="stylesheet" href="/yourstylesheet.css" type="text/css">

   assuming "yourstylesheet.css" is the name of the style sheet and it is placed in the root directory of your site.
   If you judge that NN4.x and older browsers are too bad with CSS to be allowed to choke on your stylesheet (and I would agree with you on that!), use @import instead:

   <style type="text/css" media="all">@import "/yourstylesheet.css";</style>

3. Create a new plain text file named "yourstylesheet.css" (or whatever), and place in it the rules for your style sheet, like for example:
   

   A:link, A:visited, A:active {text-decoration: none; font-weight: bold}
   A:hover { color: red}
   P { line-height: 120% }
   STRONG {font-weight: bold}
   EM {font-style: italic }
   ADDRESS { font-style: italic; text-align: left}
   .nav, .content { background-color: #FFCCFF }
   .attention { color: #FF0000, font-weight: bold }

   or whatever you want to define. Properties applied to HTML tags (in uppercase here) are applied to each instance of that tag. To apply a class (starting with a period, like ".content"), you need to call it using the class attribute. Almost all tags support that attribute.
   Examples:
   • <p class="content>
   • <table class="nav">
   • <span class="attention">

For more detailed information on using style sheets, have a look at the resources listed in the sidebar and on the table-less page.

Word to CSS

If you have Microsoft Word documents that need converting to HTML, I strongly encourage you to use W2CSS as it produces clean and standard code.

CSS-enhancement: basic principles

Warning: as I have mentioned just about everywhere I could, I do not recommend CSS-enhancement any more. What I recommend now is to use only CSS for all presentation questions, including columnar layout.

First, you need to have handy a CSS reference which indicates which properties are supported by which browsers. Do not believe it blindly (the ultimate test is to test yourself!) - but it can help you get a clear view of the - dismaying - situation.

The idea is to make a page which looks OK in all browsers, and which looks better the more the browser can digest CSS. In particular, you will use CSS to do the things that only CSS can do.

If you are not ready to replace your layout tables with CSS, please keep them simple! You'll notice that the cellpadding and cellspacing attributes will still be needed, because of the poor support for the CSS box model in certain browsers.

If you have questions or suggestions about this tutorial, feel free to email me: tara@climbtothestars.org.

© 4WebHelp and Tara