Long ago, when the Web was new, the main method of controlling the design of a web page was by using HTML and HTML only. By combining images, tables and FONT tags, you could create a pretty sophisticated design. Many people still use this technique today.

After years of working this way, the web standards group realized that it would make more sense to separate the layout and content of a web page from the actual design. When we talk about design here, we are talking about colors, decorations, font faces and styles, and images used by the website.

Types of Style Sheets

All style sheets work off the same specification or standard. However, there are three different ways to define stylesheets and use them in a web page.

Including a style sheet using the style element

Through the use of the style tag, you can include a stylesheet directly into a web page without creating a separate file. This is useful for sending HTML e-mails with stylized content where you just want one content file. If you want adhere to the CSS philosophy of keeping content separate from design, you should not include style information this way.

<style type="text/css">
   H1 { font-family: arial; font-size: 16pt; font-weight: bold; }
   H2 { font-family: arial; font-size: 12pt; font-weight: bold; }
   H3 { font-family: arial; font-size: 12pt; font-weight: bold; }
</style>

Including a style sheet using the link element

By using the link element, you can reference a website resource located on the same website (by using a relative or absolute link) or on an external site. If you have ever made a reference to an external Javascript file, this works much the same way.

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

Including a style sheet using the @import directive

Another way to import an entire CSS file into your document is through the use of the @import statement. When placed inside a style element, it instructs the web browser to pull in an external stylesheet file.

<style type="text/css">
   @import "example.css";
</style>

Defining styles inline using the style attribute

You may also choose to define style "inline" for each element as needed. Each HTML element can have a style attribute defined for it. The value of these attributes is the style information that you would normally define in an external stylesheet.

<b style="{color: red;}">ERROR!</b>
<div style="{font-size: 16pt;}">Big Heading</div>

Style Sheet Reference

Below is a quick reference of the most commonly used styles that you may use in a stylesheet. Any HTML element can define a CSS style. You can also define styles by using class names and ID selectors.