For MPMf exercise 6.

1. CSS: Class vs. Id

2. CSS Basics
• Uses design parameters to display HTML
document
• Basic Parameters:
– Font/background colour
– Font
– Width/height (in pixels or other)
– Padding/margins
• Parameters set in CSS document using classes
and id’s

3. Class
• Set of instructions the user sets for a similar
group of obects
• “Codeword” to standardize display
instructions
• Prevents user from having to repeatedly
customize appearance.

4. Example/Syntax of Class
• Want to display multiple images as same size
• In CSS document, define class and parameters
– .homepagepics {width:100px; height:100px;}
• In HTML document, tell how you want
pictures to appear by calling on the class
– <img class="homepagepics" src="picture1" />

5. ID
• Similar to class
– Set of predefined instructions
• Works for a single object only
• ID can only be used on a single object at a
given time

6. Example/Syntax
• Want to create an introductory paragraph to
website
• In CSS document, define the ID and
parameters
– #intro {width:600px; height:300px; font-size:12pt;
color:#FFF;}
• In HTML document, create the box and the
text inside it
– <div id="intro">This is my intro paragraph</div>