Example of Well Documented CSS

Link to Example of Well Documented HTML

 
 /*
   New Perspectives on HTML and CSS
   Tutorial 4
   Case Problem 1

   History Style Sheet
   Author: Colleen Lohr
   Date:   7/5/2014

   Filename:         history.css
   Supporting Files: 

*/

/* Rubric item #10, passed css html validator */

/* Grading Rubric #13, add a style rule in history.css to display the header, section, and nav elements as blocks */


header, nav, section {
   display: block;
}


/* Styles for the Page Body */

body * {
   padding: 0px;
   margin: 0px;
}

body {
background-color: rgb(51,51,51);
}


/* Styles for the Page Header */

header {
   background-color: rgb(51, 51, 51);
   text-align: center;
   width: 55em;
}

header img {
   height: 4em;
}


/* Vertical Navigation List Style */
/* Grading Rubric #14, float the navigation list on the left page margin */

nav.vertical {
   float: left;
   width: 15em;
   background-color: rgb(51, 51, 51);
}

nav.vertical li {
   font-family: 'Century Gothic', sans-serif;
   font-size: 0.7em;
   list-style-type: none;
   line-height: 1.4em;
   margin: 0em 0em 1.2em 1em;
}

/* Grading item #15, within the nav list: set the color. remove the under line  */

nav.vertical a {
   color: rgb(212, 212, 212);
   text-decoration: none;
}

/* Grading item #15, within the nav list: change the color when user hovers */

nav.vertical a:hover {
   color: white;
}


/* Speech */
 

#speech {
   background-color: rgb(212, 212, 212);
   width: 40em;
   float: left;
   font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

#speech h1 {
   background-color: rgb(51, 51, 51);
   color: rgb(212, 212, 212);
   font-size: 2em;
   text-align: center;
}

#speech p {
   font-size: 0.9em;
   margin: 1em;
}


/* Rubric item #16, use a pseudo-class to create a drop-cap in text of Lincoln's speech */

#speech h1+p:first-letter {
   font-size: 4em;
   float: left;
   line-height: 0.8;
   margin-right: 0.3em;
   padding: 0em 0.2em 0.2em 0em;
   border-right: solid black 0.02em;
   border-bottom: solid black 0.02em;
}

#speech h1+p:first-line {
   text-transform: uppercase;
}


/* Rubric item #17 create and irregular line wrap by using Lincolns image */

#speech img {
   clear: right;
   float: right;
   margin-top: 0px;
   margin-bottom: 0px;
}