FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

Implementing CSS

There are 4 ways of implementing CSS: declare inline, embed into the head of your document, link to an external CSS file, import a CSS file.

Inline CSS

Style sheet information is applied to the current element. Instead of defining the style once, then applying the style against all instances of an element (say the <P> tag), you only apply the style to the instance you want the style to apply to.

For example:


<P style="color:#ff9900">
  CSS tutorial.
</p>

Embedded CSS

You embed CSS information into an HTML document using the 'style' element. You do this by embedding the CSS information within <style>...</style> tags in the head of your document.

For example, place the following code between the <head>...</head> tags of your HTML document:


<style type="text/css" media=screen>
p {color:#ff9900;}
</style>

Now, whenever any of those elements are used within the body of the document, they will be formatted as instructed in the above style sheet.

External CSS

An external style sheet is a separate file where you can declare all the styles that you want to use throughout your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.

For example:

Type the following into a plain text file, and save with a .css extension (i.e. external_style_sheet.css).
```
p {font-family: georgia, serif; font-size: x-small;}
h1 {color: #000099; }
```
Add the following between the <head>...</head> tags of all HTML documents that you want to reference the external style sheet.
```
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
```

Imported CSS

You can use the @import rule to import rules from other style sheets.

Add either of the following between the <head>...</head> tags of all HTML documents that you want to import a style sheet into.


@import "imported_style_sheet.css";
@import url("imported_style_sheet.css");

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/css/tutorial/implementing_css.cfm">Implementing CSS</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites