Uncle Bacon: A site developed by Brian Treese and hosted by Couto Solutions

CSS Quick Start - Introduction

When it comes to CSS there are many ways to implement different styles and rules, however, some are better than others for various reasons. Styles can be added Inline on specific HTML tags in your HTML documents by simply adding the "style" attribute:

<div style=""></div>

This method can be useful in some very rare instances but overall should be avoided because it can mean that similar styles can be found in many different areas making it difficult to create and manage a consistent look.

A stylesheet is a list of CSS selectors and their coresponding rule sets which declare how these selectors will apear when rendered in a browser. A designer can place what are known as embeded stylesheets in the head tag of their HTML documents:

<head>
  <style type="text/css">
    div {border: solid 1px red; color: red, font-weight: bold;}
    h1 {font-size: 150%; background-color: black;}
  </style>
</head>

These embeded styles can be a little more useful than inline styles but should also be used sparingly as they too can allow for redundant style declarations and difficult to manage style consistancy.

The best overall method is to completely seperate the style from the structure of the HTML by linking HTML documents to external stylesheets. These external stylesheets are very similar in structure to embeded stylesheets accept they are not found in the head tags of the page but rather their own .css file. This procedure requires only a link tag in the head tag of your HTML documents with a path to the location of your .css file:

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

This method allows the designer to declare all of their style information in one location making global changes much more simplistic while keeping file sizes minimal by reducing the number of redundant of style declarations.

By using CSS we can eliminate the use of deprecated HTML tags such as the <font> tag, thus, making our Websites much esier to manage, customize, change, and quicker to load by consolidating otherwise bloated documents. For a list of deprecated HTML tags and their style equivalent please visit www.highdots.com.

©2009 Uncle Bacon. All Rights Reserved