Portfolio Style Guide

Color Palette
background color for the entire page 99CCCC  
background color for the endnote section CCCCCC  
text color in the content section FFFFFF  
background color in the content section 003399  
Highlighted text in the content section is framed to look like the navigation buttons 31496B  
text enclosed withing the "bigger" class FF9933  
background color in the identity section FF9933  
text color in the identity section 31496B  
Navigation background color No. 1 #CCDDDD  
Navigation text color No. 1 #000000  
Navigation background color No. 2 #FFBB55  
Navigation text color No. 2 #FFFFFF  

body { padding: 20px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } - This is the body style. The body style uses font-family Lucida and has padding within the borders of 20 pixels.

h1 { color:#000; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align: center; } - This is the default header 1 formatting. The default text color is black. The text is centered. The font family is Lucida.

p { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif } - This is the default paragraph style. The font family is Lucida.

.email { font-family:"Comic Sans MS", cursive ; font-size:9px; } - This is a class for e-mail links. The font family is "Comic Sans MS", cursive with size of 9 pixels.

ul, ol { font-family: Arial, Helvetica, sans-serif;} - This is the style for ordered and unordered lists. The font family is Arial, Helvetica, sans-serif.

li { padding:3px; } - This is the list item style. List items have 3 pixels of padding on all sides.

#identity { padding-left:90px; background-image:url(../images/edpic.jpg); background-position:top; background-repeat:no-repeat; background-position:top left; min-height:80px;} - Tags with id values of Identity are left padded with 90 pixels. They contain a background image with a picture of Ed positioned on top and left with no repeat. The tag has a minumum height of 80 pixels.

#identity h1, #identity p { font-family:Arial, Helvetica, sans-serif; text-align: center; padding: 0; margin: 0; font-weight:bold; - H1 and P tags within Identity ID's have a font family of Arial, Helvetica, sans-serif. Padding and margins are set to zero. The texted is aligned to the center.

#identity h2 { color:#003399; font-family:Arial, Helvetica, sans-serif; background-color:#FF9933; padding: 0 30px 10px 10px; margin:0 0 15px 0; font-style:italic; } - H2 tags within Identity ID's have a font family of Arial, Helvetica and sans-serif. Padding right is set to 30 pixels. Padding bottom and Left are set to 10 pixels. Margins top, left and right are set to 0. The bottom margin is set to 15 pixels.

#navigation ul li a, #navigation ul li a:visited { text-decoration:none;} - "A" tags within the navigation structure have not text decorations.

#content { padding:20px; -moz-border-radius:3px; } - The default values for the Content section have padding right of 20 pixels. Border corners are rounded in FireFox browsers.

#content, #content h1, #content h2, #content h3, #content h4 { font-family:Arial, Helvetica, sans-serif;} - The default font family within Content is Arial, Helvetica, sans-serif. The font family for h1, h2, h3 and h4 elements within Content is Arial, Helvetica, sans-serif.

#content h1 {font-size:1.5em;} - H1 elements within content ID have a font size of 1.5em.

#content h2 {font-size:1.3em;} - H2 elements within content ID have a font size of 1.5em.

#content h3 {font-size:1.1em;} - H3 elements withing content ID have a font size of 1.1em.

#content .hilite { -moz-border-radius:3px; border-top: solid 1px white; border-right:solid 1px white; } - text enclosed within this hilite tag are decorated to look like navigation buttons

#content { padding:20px; } - Elements withing the content ID have padding on side of 20 pixels.

#content #content h1, #content h2, #content h3, #content h4 {font-family:Arial, Helvetica, sans-serif; } - All H1, H2, H3 and H4 elements within content have a font family of Arial, Helvetica, sans-serif.

.bigger { font-size:1.1em; padding-top:0.5em; padding-bottom:0.5em;} - Text enclosed within the "bigger" class have a font size of 1.1em and padding top and bottom of 0.5em. }

#navigation { width:156px; height:175px; position:relative; font-size:30px; margin:30px 0; float:left; padding:10px 20px 10px 0; } #navigation li {padding:0;} #navigation ul li a, #navigation ul li a:visited {display:block; width:154px; height:24px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; line-height:24px; font-size:16px; -moz-border-radius: 5px 5px 5px 5px;} #navigation ul {padding:0; margin:0;list-style-type: none; } #navigation ul li {float:left; margin-right:1px; position:relative;} #navigation ul li ul {display: none;} /* specific to non IE browsers */ #navigation ul li:hover ul {display:block; position:absolute; top:0; left:155px; width:105px;} #navigation ul li:hover ul li:hover a.hide {width:175px;} #navigation ul li:hover ul li a {display:block; width:175px;} - I am leaving off the details of the navigation flyout menu

#content {margin-left:2em; padding-left:2em; min-height:16em; width:740px; float:left; }

#endnote { clear:both;} - the endnote id clears both floats.

.w3cbutton { margin-right:2em; float:right;} .w3cbutton img {border:none; } -

table.shawntable { table-layout:auto; border:solid thin red; } -

table.shawntable h3 { width:400px; } - H3 tags within the shawntable class have a width of 400 pixels

Home

© 2010 by Ed Einfeld All rights reserved