[3713:Main] [Sample Welcome Page] [Handouts Page] [email me]

The Table below will provide a breakdown of the CSS as seen on Wendy Roussin's sample Welcome Page

Remember: All CSS rules have a SELECTOR and 1 or more DECLARATIONS. Each declaration has a PROPERTY and a VALUE.
You choose the SELECTOR - some of which are required.
You can decide which DECLARATIONS you wish, then set their PROPERTIES and VALUES.
If you want a group of SELECTORS to share identical DECLARATIONS - you can combine them into 1 rule.

Pay attention to the syntax. The spacing needs to be exactly as indicated.

css visual description

The Code What It Does What You Can Change*

<style type="text/css">

Opens the Style tag. This one indicates that you are using an internal style sheet.

Nothing

<!--

Comment Tag. Using a comment tag here helps older browsers read your code. Now considered optional by some designers.

Nothing.
BUT --You can skip this tag if you would like.

body, td, th {
font-family: Arial, Helvetica, sans serif;
font-size: 16px;
color: #FFF;
}

Sets the font size, color, and family for the body and for table cells and table headers.

Sets the font family indicated at 16 pixels and white.

The values for font-family, font-size, and color.

Click here to see a sample of common font families.

body {
background-color: #333;
margin-left: 25px;
margin-top: 25px;
}

Sets the background color for the page and the left and top margins.

The color is a dark gray with margins of 25 pixels.

The values for the background color and left/top margins.

You can also add bottom and right margins but they aren't commonly used.

a:link {
font-weight: bold;
text-decoration: none;
color: #999;

}

This is a pseudo-class CSS rule. It sets the color, font-weight, and text-decoration for a link.

This is a light gray, bold link that is not underlined.

The values for the color, font-weight, and text-decoration. Most likely, you would just change the color.

It is generally a good idea to set up links to appear differently than normal text.

a:visited {
text-decoration: none;
color: #999;
}

This is a pseudo-class CSS rule. It sets the color, font-weight, and text-decoration for a visited link.

This is a light gray, bold visited link that is not underlined.

The values for the color, font-weight, and text-decoration. Most likely, you would just change the color.

It is generally a good idea to set up links to appear differently than normal text.

a:hover {
text-decoration: underline;
color: #900;
}

This is a pseudo-class CSS rule. It sets the color, font-weight, and text-decoration for a link while the mouse is over the link.

This is a darker red, bold hover link that is underlined.

The values for the color, font-weight, and text-decoration. Most likely, you would just change the color.

It is generally a good idea to set up links to appear differently than normal text.

a:active {
text-decoration: none;
color: #999;
}

This is a pseudo-class CSS rule. It sets the color, font-weight, and text-decoration for a link while in the state of being clicked.

This is a light gray, bold active link that is not underlined.

The values for the color, font-weight, and text-decoration. Most likely, you would just change the color.

It is generally a good idea to set up links to appear differently than normal text.

h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}

This sets all of the 6 possible Heading font-weights to bold. Heading are used to set differing text sizes in HTML.

You can change the font-weight or exclude some Heading sizes from your choice.

h1 {
font-size: 24px;
color: #CCC;
}

Sets the font-size and color for the h1 Heading.

This is 24 pixels and a light, neutral gray.

You can change the font-size or color.

You can also add a font-weight if you haven't done so already.

h2 {
font-size: 18px;
color: #CCC;
}

Sets the font-size and color for the h2 Heading.

This is 18 pixels and a light, neutral gray.

You can change the font-size or color.

You can also add a font-weight if you haven't done so already.

h3 {
font-size: 16px;
color: #CCC;
}

Sets the font-size and color for the h3 Heading.

This is 16 pixels and a light, neutral gray.

You can change the font-size or color.

You can also add a font-weight if you haven't done so already.

h4 {
font-size: 14px;
color: #CCC;
}

Sets the font-size and color for the h4 Heading.

This is 14 pixels and a light, neutral gray.

You can change the font-size or color.

You can also add a font-weight if you haven't done so already.

-->

Closes Comment tag.

Nothing.
BUT -- Skip this tag if you didn't use a comment tag to open the style section.

</style>

Closes the Style tag

Nothing


* You can also add and subtract DECLARATION PROPERTIES and VALUES in many of these examples.
My responses generally indicate changes from the rule as written, all possibilities are not included.
I did not set a h5 or h6 property in my sample page, so there was not a CSS rule written for either h5 or h6.

<top>