Cascading Style Sheets by State College of Florida Professor Floyd Jay Winters
Cascading Style Sheets use a style sheet language to quickly modify styles, formatting and presentation for an entire Web site, while easily bringing a consistent look and feel to a customized site. The syntax looks a lot like JavaScript.

Cascading Style Sheets can:
  1. Consistently define page layout - such as
    a. the body background
    b. the position of the header and footers
    c. the alignment of text
    d. the borders of a table
  2. Consistently define colors and fonts for the entire site
  3. Allows Web weavers to create custom class styles such as .Title or .Subtile or .NavLink
  4. Allows for very quick and easy updates of the entire site's layout, colors, fonts...
  5. Reduces the overall code size for each page
  6. Allows for a quick formatting of text through the use of the class attribute
  7. Allows the Web weaver to use Div tags instead of tables, so that an entire Web site can be redesigned in literally minutes

The code below allowed this page to load it's "External" Cascading Style Sheet:

<head>
<title>Cascading Style Sheet Demo</title>
<link href="WinWebTutor.css" rel="stylesheet" type="text/css" /> <!-- Load Cascading Style sheet -->
</head>

You can choose view the sourse of this page to see this code.
You may also see how the styles below are referenced such as:
<td class="title"> for the blue title on the top of this page
or
<td class="nav"> for the green nav bar under the title on the top of this page


Below is a brief look at how CSS file statements should be constructed:
  1. Each block in enclosed in braces ({ })
    Example used in css code: h1 {font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; color: #660000;}
  2. Colons (:) are used to assign values
    Example used in css: font-size: 24px;
  3. Each attribute line ends with a semicolon (;)
    Example used in css: font-size: 24px;
  4. Each custom class starts with a period (.)
    Examle used in css: .title {font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: bold;}
    Example used in HTM: <td class="title">Cascading Style Sheet</td>
  5. Each custom ID starts with a pound sign (#)
    Example used in css: #masthead { font-family: Arial, Helvetica, sans-serif; font-size: 18px;}
    Example used in HTML : <div id="masthead">
  6. /* Comments are entered like this. They are notes that are ignored. */

The actual code for a css file for a similar page starts below:

/* HTML selectors like body, h1, and table can be modified in Cascading Style Sheets */
/* New custom class selectors can be created in Cascading Style Sheets. They begin with a period (.) */
/* ID selectors can be used in a style sheet to define an anchor or a division on a page They begin with a # */

body {
width: 790px;      /* So page does not fill entire screen */
margin-left: auto; margin-right: auto; /* Center Body */
padding: 0;
background-image:url('../images/bg2820Image.jpg');
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333; /* Dark Grey */
line-height: 24px;
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold; font-style: oblique;
color: #660000;      /* dark red */
}

a {
color: #330099;
font-weight: bold;
}

a
:hover {
color: #DEDECA;      /* Change color to give rollover effect */
background-color: #330099;
}

table {
width: 760px;
border-color:blue; border-style:ridge;
background-color: #FFFFCC;      /* Light yellow */
text-align:left; vertical-align:top;
}
td {
border: solid; border-color: #66CC99; border-width: 1;
border-bottom:none; border-right:none;
padding-left: 4px; padding-right: 4px;
}

/* Below are IDs. They begins with a # */
#masthead {
font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 200px; color: #333333;
/* Note how you can put it all on one line if you want. But usually each attribute is on its own line. */
}

#footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
color: #000099;
line-height: 22px;
text-align:center;
}

  /* Below are Classes. They starts with a dot (.) */

.title {    
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px; font-weight: bold; line-height: 38px;
color: #FFFFAA;      /* Light Yellow */
background-color: #000099;
text-indent: 5px;
}

.titleSmaller {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFAA;
background-color: #000099;
line-height: 38px;
}

.subtitle {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px; font-weight: bold;
color: #000099; font-style: oblique;
line-height: 20px;
}

.header {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFFF66;
background-color: #990000;
}

.nav {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px; font-weight: bold;
background-color: #66CC99;
text-align:right;
}

.navLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; font-weight: bold;
background-color: #DEDECA;
}