header

CSS • Annotated

This specifies the Character encoding
@charset “UTF-8”
html {
The background of the page is gray
background-color: gray;
}

This is the wrapper which holds the inner elements of the page
#container {
background-color:white;
font-family:verdana,arial,ms sans;
height:100%;
margin:0 auto 10px;
padding:10px;
text-align:left;
width:760px;
border: 1px solid #666666;
}

body {
This specifies the default font size for the body font-size:12px;
}

These are the settings for the header, where i have my name and the course name, the background of the header is set to blue
.header {
The left margin is intentionally set to -35px because i wanted the header to seem to come out of the page
margin-left:-35px;
margin-right:-1.4%;
padding-bottom:1px;
padding-right:15px;
padding-top:1px;
text-align:right;
The header width is set to 700px
width:700px;
}

This class specifies various values for the navigation bar
.navigation {
The width of the navigation bar was cut down to 645px so that it didn't extend more than the header
width: 645px;
margin-bottom:5px;
color: #335588;
height: 30px;
padding-left: 30px;
padding-top: 1px;
I gave a bottom border to the navigation bar to enhance the look and also to indicate a separation between the content and the navigation
border-bottom:3px solid #335588;
}

These ul-settings remove the bullet images from unordered lists
.navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;

}

This class sets the alignment of the links to the left
.navigation li {
float:left;
}

This sets up various values for the links, by default all the links have a blue blackground and there is a box around the links giving an impression of tabs
.navigation li a {
background-color: #AFCFFE;
text-decoration:none;
font-weight: bold;
padding:5px;
margin:0px 2px;
color: #335588;
border:1px solid #335588;
}

This makes sure that the font changes color to white when hovering over the links, this is a feedback to the user
.navigation li a:hover {
border-bottom:1px #000000 dashed;
font-weight: bold;
color: #FFFFFF;
}

the class nav1 is similiar to the navigation class, this is for the next level of navigation for the example and process pages. The only difference is the color of links and background
.nav1 {
width: 645px;
color: #335588;
height: 20px;
padding-left: 30px;
font-size:11px;
border-bottom:1px #AFCFFE solid;
}

.nav1 ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.nav1 li {
float:left;
}

.nav1 li a {
text-decoration:none;
font-weight: bold;
padding:6px;
color: #335588;
border:#AFCFFE 1px solid;
background-color: #D7E7FF;
margin:0px 2px;
}

.nav1 li a:hover {
border-bottom:1px #000000 dotted;
font-weight: bold;
color: #000000;
}

The id selected specifies the properties of the link to the page that is currently being displayed. For example, the home link will not work from the homepage itself if the div id is specified as selected
#selected {
color: #000000;
text-decoration:none;
font-weight: bold;
padding:5px 5px 4px 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #335588;
border-right-color: #335588;
border-bottom-color: #FFFFFF;
border-left-color: #335588;
}

This id is similiar to selectec, this works for the second navigation bar
#selected1 {
color: #000000;
text-decoration:none;
font-weight: bold;
padding:5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #AFCFFE;
border-right-color: #AFCFFE;
border-bottom-color: #FFFFFF;
border-left-color: #AFCFFE;
}

I use the header H1 for the text in my header. The bottom margin is intentionally set to -10px so that i can bring the text below closer
h1 {
color:white;
margin-bottom:-10px;
margin-top:10px;
}

I use the header H2 for page descriptions. The left border is intentionally set to 15px to direct the user to look at the content
h2 {
padding:3px;
border-left:15px solid #335588;
}

This class sets the properties for the small text in the header
.header_small {
color:white;
font-size:10px;
padding:0 2px 0 0;
}

This class is a wrapper for the content
.content {
border-left:1px solid;
margin-left:10px;
}

This class specifies the properties of the text that goes into the website.
.body_content {
font-size:12px;
padding-left:20px;
padding-right:35px;
padding-top:5px;
text-align: justify;
}

This is is used to format references
#reference {
font-size:10px;
padding-left:20px;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
margin-left:20px;
margin-right:35px;
background-color:#F2F2F2;
font-style: italic;
}

the links class is used to remove the default underline and color of hyperlinks. this makes hyperlinks look better
a.links {
text-decoration:none;
border-bottom:dotted 1px #335588;
}

This class is used to format the comments on the annotated css document
b.blue {
color:#335588;
background-color:#CCCCCC;
}

This class formats the blue box for the footer
.footer {
width: 760px;
margin-bottom: -10px;
background-color: #335588;
text-align: center;
}

This class formats the text for the footer
.footer_text {
color:white;
font-size:10px;
padding-bottom:10px;
padding-top:15px;
text-align:center;
}

The email link thats placed in the footer is formatted using this class
.email {
color: #DDDDDD;
font-style: italic;
border-bottom: hidden;
font-style: oblique;
text-decoration: none;
}