Cascading Style Sheet (CSS)

Cascading Style Sheets are a (HTML) specification that allows the web developer to use codes to describe how pages contents should look. In particular it is used for styling and laying out text, paragraphs and headings.

CSS is used to help readers of web pages to define colours, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

Basic CSS Example

To create a CSS file, you can use a program as complex as Adobe Dreamweaver or as simple as notepad. If you are using notepad, remember to save your document as a .css file.

Example HTML structure:
<html xmlns="" xml:lang="en" lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title> My Website </title>
    <link rel="stylesheet" type="text/css" href="mycss.css" />
        <div id="description">
            This is a description.
        <img class="myImage" src="pic.jpg" />
        <div id="contact">
            Contact me.

Example CSS stylesheet (mycss.css) corresponding to HTML structure:
<style type="text/css">
// use two forward slashes to make comments. these help you to divide your content
    text-align: left;
    font-size: 10px;
    font-family: Arial, Helvetica, sans serif;      // these are common text formatting properties
img.myImage {
    width: 80px;
    height: 100px;
    border: 0px;                    //common image formatting properties
    list-style-type: circle;
    list-style-position: outside;            //common list formatting properties


Here are some pages of reference for making Cascading Style Sheets:
CSS Tutorial - -

This site shows many examples of how CSS separates presentation from content. The content of the page is the same, but the application of different Cascading Style Sheets allows for drastic changes in the presentation.
CSS Zen Garden -

Learning CSS

CSS from the Ground up


"Cascading Style Sheets." January 21, 2008. Wikipedia. January 21, 2008. <>
"Web design terminology beginning with the letter C." January 21, 2008. DesignTalkboard. January 21, 2008. <>