Orvado Technologies is your one-stop shop for custom web site solutions, quality work at affordable rates
orvado side
What Is CSS?
Sep 06, 2006 - Kenneth W. Richards

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; }

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";

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.

Style Description / Example

Use this to declare the font face to display. Typical font families are arial, helvetica, times new roman. Some generic styles are serif and sans-serif.

font-family: tahama,arial,sans-serif;


Use this to declare the size of the font to display. This size may be expressed in points (12pt) or pixel size (10px).

font-size: 12px;


Use this to declare the weight of the font to display. Typical font weights are bold and normal. Internet Explorer also supports the non-standard value bolder.

font-weight: bold;


Use this to declare the color of text or other elements such as horizontal rules (hr).

font-size: 12px;

Featured Clients

Islander Gifts

Islander gifts is an online e-commerce site for rare and unique Hawaiian Gifts suitable for the entire family.
Site Map   Terms of Service   Privacy Policy