0. Today’s featured website: (thanks, Amanda!)
1. Fun fact:
Tomorrow is 12/13/14! Tweet a selfie at 10:11am to @MHSCoders for extra credit!
2. Great job on these:
http://www.medfordpublicschools.org/departments-programs/school-lunch/farm-to-school-program/
https://www.facebook.com/pages/Medford-MA-USA/220803434722705
3. What you already can do with CSS:
Let’s review what you’ve already learned how to do with CSS
4. CSS Continued
Today you will learn about classes, margins, and padding.
Classes are useful to apply any separate or different style properties you want to anything. For example, you can apply unique style properties to only certain paragraphs that will override any other style properties you have defined in your style sheet. Today we will practice doing that with a paragraph.
Margins and padding are part of the box model and define ways to offset content on your page. Margins and padding help position all content on your page from the top, bottom, left, and right and help provide a buffer so your content is spaced out evenly and does not overlap (unless you want it to).
To do:
a. Get the code by clicking here.
b. Copy the code and paste it into a new, blank Notepad++ file
c. Save the file as csspractice3.html
d. Change the background color of the #wrapper (see color names here)
e. Change the background color of each section
f. Change the fonts in each section (use this; just copy and paste the font names)
g. Change the value of left for #rightboxtop (currently 370px) so that this box no longer overlaps the left boxes
h. Change the top value for #rightboxbottom (currently 180) so it no longer overlaps #rightboxtop
i. Change the border colors and styles for #leftboxmiddle and #rightboxbottom (remember, other border styles are solid, dotted, dashed, double, groove, ridge, inset and outset.)
j. Add another paragraph in the #rightboxbottom section and apply the funky class to it. You can use this text for the paragraph:
Lorem ipsum dolor sit amet, harum primis no sed, falli libris pro ea, his et augue volumus suscipit.
k. Create a new class by copying and pasting the funky class. Give it a new name. Then change all of the properties. Now, apply this new class to your h1.