● The dimensions on this chart are important in putting together the website.

● Midterm two weeks away from the next class.

CSS Written in Class:
● #header, #footer {background: red; height: 100px}
● If “height” and “line-height” are the same you can center text. Example:
○ Height: 100px; line-height: 100px;
○ This only works if you have 1 line of text.
● Color: white; text-shadow
● Body{width:800px; margin:50px auto}
● Block Level Elements:
○ “Div” elements are block level, meaning, they all want to start on their own line.
○ “Width” only affects the content area. NOT the margin, padding, etc. (refer to the
css box model we discussed in earlier classes if you don’t understand marching,
padding, etc).
● Don’t use {display:inline-block} just yet. It can disrupt things being stacked and it’s hard
to use.

Float Property:
● All objects are float “none” by default.
 ● Float gives a “text-wrapping” effect
○ You can float objects to the left/right
● Float makes objects move to the top layer of the page.
● Floating an object makes it like an in-line vertical object.

More CSS used to complete website:

● #navigation{float:left; background:#Ccc}
● #navigation, #content{height:60px}
● #content{overflow:auto}
○ This will create a default scroll bar to contain information that goes off the page.
You can then scroll up and down to reveal more information.
● #navigation{float:left;width:200px}
● #navigation, #content{height:600px}

—hold down control key over color on a Mac to see what it is? Idk, exactly what this does but
you can try it out in class!

Final CSS used in class:

● Body{width:800px;margin 50px auto; background:#ccc; box-shadow:4px 4px 8px #555}
● Code{display:block;background:black;padding:20px;margin:20px}
○ Makes examples (the examples that we are required to add to each topic in the
css glossary) stack instead of being side by side
● Code{border:inset thick}
○ Adds a decorative inset to the code examples
● #navigation li {list-style:none}
○ Any li (list) inside of the navigation class will NOT have bullets
● a {text-decoration:none}
○ Gets rid of the underline
● a:visited{color:blue}
○ Changes visited links to blue
● a:hover{color:red; font-size:120%}
○ When mouse hovers over anchor change color to red and grow by 120%.