Classes in CSS allow the same styling to be applied to multiple elements, while IDs can only be applied to individual elements. Classes are defined with a "." prefix followed by a name, then curly braces containing style rules, and are applied to elements using the "class" attribute. IDs are defined with a "#" prefix followed by a name, then curly braces containing style rules, and are applied to elements using the "id" attribute. Both classes and IDs allow for reusable styling without repeating CSS code.

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>