Why You Should Use CSS

The purpose of CSS is to provide webmasters more control over page layout and display than HTML offers. With HTML alone, there are various coding tricks that are used to help achieve the desired page layout. The trouble with that is those tricks often don't work the same, if at all, in all browsers. CSS standards were designed so that these tricks are no longer needed, so CSS is much more predictable and reliable than resorting to those old tricks.

Using a wall of your house for a loose analogy, HTML is the studding behind the wall; and CSS is the wall covering, colors, and placement of the content on the wall. In other words, when properly used, HTML defines the structure of your web page while CSS defines the appearance.

Aside from consistent display standards, one of the greatest benefits of using CSS is if you use external style sheets, you can make one change to the style sheet and have that change take place throughout your entire web site. There will be more about that later in this tutorial.

But What Are These Styles?

The styles are whatever you decide, within the structure of the language. For example, if you want all your H1 size headings to be in red text, and all your paragraphs to have the first line indented by 20 pixels, you can create the rules that define those styles. Once the rules are created, every time you use an H1 heading it will be in red text, and every time you start a new paragraph the first line will be indented by 20 pixels. Of course, if you want to, you can also override the style rules.

Creating a rule isn't as difficult as it sounds. A style rule is simply how you define an HTML element to behave. For example, to write the style rule so all H1 headings are rendered in red text, I'd create the rule in my style sheet like this:

h1 {color: red;}

There now, that doesn't look too hard does it? It really isn't hard. It's just a matter of learning bits and pieces of code as you need them, just as you did with HTML. Let's compare HTML to CSS to help you visualize the similarities and differences.

HTML Example	CSS Example
<body bgcolor="black"> body is the HTML element bgcolor is the attribute black is the attribute value	body {background-color: black;} body is the CSS selector background-color is the property black is the property value

The CSS selector is merely the HTML element that you wish to set a rule for. The HTML attribute and CSS property are the same thing, although the actual terms (bgcolor vs. background-color) can be different. And both the HTML attribute and CSS property are given a value.

An HTML element is modified from the default value by either...

giving the HTML element an attribute and value; or
giving the CSS selector a property and value.

So you can see they both work similarly, only they use different terms and formatting. The advantages to using CSS is that you...

only have to create one rule to effect the style each time you use an HTML element, whereas with HTML, you have to code the attribute into each use of the element.
with CSS you can change one file and have that change reflected on every page of your site; whereas with HTML, you have to find and make that change in every place on every page that you used that element.

CSS Does More

Here are just a few things that you can do with CSS that can't be done in HTML alone without resorting to quirky tricks that don't work the same in all browsers:

Set different page margins for all sides of your page.
Set font size for any text element to the exact height you want, no more preset size limitations.
You can highlight single words, entire paragraphs, headings or even individual LETTERS with different background colors, background images, text colors and fonts if you really want to go crazy bananas.
You can overlap words and make logo-type headers without making images.
Colored scrollbars! Note: colored scrollbars are NOT official CSS, they are a Microsoft extension to CSS so using colored scrollbars is technically an illegal code practice, but it doesn't cause any harm if you like them. Colored scrollbars also only work in Internet Explorer.
Precise positioning of elements.
Borders, border styles, backgrounds, margins, and padding can be set for any visual HTML element.
Set the font for whole tables, no need to recode a font into each table cell.
Make the first letter of each paragraph different, set letter spacing, change the space between lines of text, and much, MUCH MORE!

The only real disadvantage to using CSS is that not all browsers offer full support for it . . . yet. Even that disadvantage is minimal because well over 90% do support it extremely well; and the ones that don't offer full support do support the main features, it's the lesser known items they don't support, so your page will degrade fairly well in browsers that don't fully support CSS.

At some point everyone has to move into the future, and the time to start using CSS began long ago. One day, those surfers hanging on to older browsers will find few sites that work as intended, and webmasters will find their site design changing - not because they've changed it - but because they've continued using code that has become obsolete and is no longer supported.

This tutorial continues...

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]