Orvado Technologies is your one-stop shop for custom web site solutions, quality work at affordable rates
 
orvado side
Support
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; }
</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.

Style Description / Example
font-family

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.

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

font-size

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

Example
font-size: 12px;

font-weight

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.

Example
font-weight: bold;

color

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

Example
font-size: 12px;

Featured Clients

Hoppenrath Publishing

Hoppenrath came to us in need of a backend office that its nationwide staff could access and share files. The problem, how to do it without a database.
Site Map   Terms of Service   Privacy Policy