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="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <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" />
</head>
    <body>
        <div id="description">
            This is a description.
        <img class="myImage" src="pic.jpg" />
    </div>
        <div id="contact">
            Contact me.
        </div>
    </body>
</html>
 
 


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
 
#description{
    color:#dda0dd;
    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
}
 
 
#contact{
    list-style-type: circle;
    list-style-position: outside;            //common list formatting properties
 
}
 
-->
</style>


Links

Here are some pages of reference for making Cascading Style Sheets:
CSS Tutorial - http://www.w3schools.com/css/default.asp
HTML.net - http://www.html.net/tutorials/css/introduction.asp

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 - http://www.html.net/tutorials/css/introduction.asp

Learning CSS
http://www.dkeithrobinson.com/asterisk/archive/2004/07/learning-css.php

CSS from the Ground up
http://www.wpdfd.com/editorial/basics/index.html

References

"Cascading Style Sheets." January 21, 2008. Wikipedia. January 21, 2008. <http://en.wikipedia.org/wiki/Cascading_Style_Sheets>
"Web design terminology beginning with the letter C." January 21, 2008. DesignTalkboard. January 21, 2008. <http://www.designtalkboard.com/glossary/web/c-glossary.php>