Introduction to CSS Part 1

Introduction to...

Cascading Style Sheets

Cascading Style sheets, or CSS for short, is used both with and in place of regular HTML. It offers you much more flexibility and control over your page layout, plus you can do things with CSS that can't be done with HTML alone.

An example of that, if you have an up-to-standards browser, would be the colored scrollbars you see on this site. Another example is at the beginning of this tutorial. The khaki colored "Introduction to..." with the black "Cascading Style Sheets" slightly overlapping it, is not an image. That's CSS in action. I overlapped the letters using positioning, which isn't possible with just HTML.

The purpose of CSS is to provide webmasters more control and convenience over page layout and style than HTML offers. With HTML alone, there are various coding tricks that are used to help achieve the desired page layout. The trouble is, these 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 it's also much more reliable.

Using a wall of your house for an 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 style.

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 value
body {background-color: black;}
body is the CSS selector
background-color is the property
black is the 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 term (bgcolor = 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 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 style 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.
You can overlap words and make logo-type headers without making images.
Colored scrollbars!
Precise positioning of elements.
Borders, border styles, backgrounds, margins, and padding can be set for any 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 quite well, and for those that don't your page will still render for them, it just won't be in all its glory.

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.

Back | Next | CSS Tutorials Index

Web Design

Site Information

More Boogie Jack Sites

Introduction to...

Cascading Style Sheets

But What Are These Styles?

CSS Does More