[3713:Main] | [Sample Welcome Page] | [Handouts Page] | [email me] |
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.
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. |
body, td, th { |
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. |
body { |
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 { |
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 { |
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 { |
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 { |
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 { |
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 { |
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 { |
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 { |
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 { |
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. |
</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.