Once you've become comfortable with the core HTML concepts, it's time to add some style to your website.

Back when HTML was first designed, styling and element formatting was all handled as part of the HTML code, using the <font> tag and its many cousins. That all changed with HTML 4.0, when the World Wide Web Consortium (also known as W3C) added CSS to the mix. Cascading Style Sheets give the web designer far more control over the appearance of her pages than HTML alone.

There are three basic ways to define style attributes:

1. Within the body of the page, commonly called "inline styling." For example, if you wanted to make a single paragraph in your page display in 14-pixel red text, you could define the style within the paragraph tag itself as follows:

<p style="font-size: 14px; color: #ff0000;">This is a paragraph</p>

2. Within the head of the page, commonly called an "internal style sheet." If you wanted all paragraphs in one particular page to display in 14-pixel red text, you would place the following code in the head of that page:

<style>
p {
font-size: 14px;
color: #ff0000;
}
</style>

3. Within a separate file, commonly called an "external style sheet." If you wanted a number of pages within your website to have 14-pixel red paragraphs, first you'd create a new file called something like stylesheet.css (the name of the file can vary according to your preference, but it must use the extension .css) and enter the following code in that page:

p {
font-size: 14px;
color: #ff0000;
}

After you've saved style.css you would then create a special link from all those pages where you want 14-pixel red paragraphs, by placing the below code in their head sections:

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

As a general rule, you should keep as much of your stylesheet data as possible in an external stylesheet. Not only does this save all that time it would take you to scatter stylesheet definitions throughout your site, but it also reduces page loading times if all the CSS information for your entire site is contained in one document. When a visitor browses through multiple pages of your site, the visitor's computer only needs to load the stylesheet once.

Yet another way to connect to stylesheet information is the @import statement. @import allows you to connect to an external stylesheet from within another stylesheet. It's used as follows:

@import url("otherstyle.css");

The @import statement should be the first item in the stylesheet or it won't work. You can also use @import in the head of an HTML document, with the same results as placing a link to an external sheet. This method is most commonly used to 'hack' or trick certain browsers; most older browser versions ignore @import, so you can use this method to hide stylesheet data from them while still providing the data to visitors with newer browser versions.