1-4 Classes and IDs
With what you know so far, you are limited on customizing your website. What if you wanted each paragraph to look different??
Class vs. ID
Class - use for multiple elements that you want to have the exact same format
ID - use for one element that you want to have a special format
Syntax
Resources
Assignment
Here is a codepen file that has been started for you with information about how to make good decisions with your smart phone. Click the Fork button at the top to be able to edit it. Leave the file name alone (“Classes and IDs Assignment - Smart Phone Safety Website”).
Standard Deliverable
1) Add one more smart phone tip to the bulleted list (this will make 5 total)
2) Add a relevant image from the internet to the HTML
3) Use a Class to format the font-family and color of all of the bulleted items (Reminder: this requires a change in your HTML for each bulleted item)
4) Use an ID to format the font-size and background-color of ONLY the bullet point you added (Note: it is possible to have a Class and ID for the same HTML element - <p id=”id-name” class=”class-name”>)
Advanced Deliverable
1) Add a hyperlink to the source of the image OR make your image a clickable link
2) Apply a ‘gradient background’ to your page. Investigate the syntax at W3Schools. (Hint: if you want to style an entire page, you can add the formatting to the <html> tag in your CSS)
Code Review Exercises:
1) IDs - Seasonal IDs
2) Classes - Apples and Bananas Classes
Last updated
