Exit tutorial


HTML Tutorial
Cascading Style Sheet Tutorials
CSS Introduction: Part 1

This is part one of a three-part 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 a lot more flexibility and control over your page layout. CSS is the future, as some HTML tags will be phased out in favor of the CSS counterparts.

Implementation

CSS tags can be implemented in three ways; embedded, inline, and linked. Embedded style tags are coded into the HEAD section of your page, inline style tags are coded into standard HTML tags, and linked tags are called from a separate file. Embedded style and linked style use the same format, so that's what we'll be covering first, although this introduction covers embeded style sheets.

But What Are CSS Tags?

CSS tags are newer HTML tags that redefine the way you can and should lay out your web pages. They offer much more control and flexibility, and, in fact, will replace some older HTML tags in future browser versions. Don't panic, that's a good piece down the road. The <center> tag has been officially defunct for quite some time, but because so many webmasters still use it, browser developers still support it. It will be that way for a long time, but you can get ahead of the game by learning the future of the web now so you won't have to scramble to fix your site later.

First, so you know this isn't going to be extremely difficult to learn, let's compare a CSS tag to a HTML tag. Here's a HTML tag example:

<body bgcolor="red">

In the tag above, "body" is the HTML command, "bgcolor" is the attribute to be modified, and "red" is the modifying value of the attribute. In other words, "body" tells the browser that this command involves the body of the document, "bgcolor" tells the browser the body color is the part of the body tag to modify, and "red" tells the browser to make the color of the page red. To illustrate those parts in a tag format, it would look like this:

<HTMLtag   attribute="value">

I hope that isn't too confusing. CSS tags are written a little different, but for the most part have the same basic 3-part style. The same CSS tag would look like this:

body {background-color: red;}

In the CSS tag above, "body" is the equivalent of the HTML_tag, only in CSS it's called the "selector." Inside the curly braces, "color" is the equivalent of the HTML attribute, only in CSS it's called the "property" - it tells the browser which property of the selector to affect just as the attribute tells which part of an HTML tag to affect in a standard HTML tag. The "red" part is the equivalent of the HTML value, and is called by the same name. Let's put that in tag format and compare them side by each:

CSS: selector {property: value;}
HTML: <HTMLtag attribute="value">

or, using real tags:

CSS: body {color: red;}
HTML: <body bgcolor="red">

In HTML, your attribute is followed by an equal sign (=) and then the value in quotation marks; in CSS, the property is following by a colon and there are no quotation marks used in most tags. The property and value are enclosed in the curly braces.

At this point you might be wondering what the big deal about CSS is, after all, the example I've shown doesn't actually do anything different than the standard HTML body tag. Besides the one point made about being able to update one file and have that update your whole web site, there are many other benefits to using CSS. Here are a few samples to whet your appetite:

  • You can set page margins on all sides - no more table or transparent gif tricks for left border backgrounds, and you'd be surprised at how much better a page looks with top, right and bottom margins as well.

  • You can set font size to the exact height you want, in the main body, the headings, and anywhere else. If you want a question mark 6" tall you can do it.

  • You can highlight words, entire paragraphs, headings or even individual letters with background colors.

  • You can overlap words and make logo-type headers without making images. This can be useful in making fast-loading, cool-looking title images without a need to use a graphics program.

  • Linked style sheets are extremely nice if you use the same style throughout your site. You simply place a separate CSS file on your server and link to it in the HEAD section of your web page and your layout elements are called from there. If you want to change your site, you only have to change that one separate file instead of changing every page.

  • Precise positioning!

The list goes on and on, and we'll be covering much of it in the months ahead. First, let's look at how to set up an embedded style sheet. An embedded style sheet goes in the HEAD section of your page. If all we were doing was using the body tag as in the example above, it would go like this:

<head>

<style type="text/css">
<!--
body {color: red;}
-->
</style>

</head>

Technically speaking, the comment containers (the opening <!-- and the closing -->) aren't needed, but you should use them because they keep older browsers that can't parse CSS from displaying the style tag text directly on the page.

Not all browsers support CSS, some people are still using old versions of IE and Netscape that only read up to HTML version 2. However, the overwhelming majority of your visitors will be using browsers that do parse CSS.

[Back to the Stage 6 Index]