With what you know so far, you are limited on customizing your website. What if you wanted each paragraph to look different??
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
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”).
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”>)
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)
1) IDs - Seasonal IDs
2) Classes - Apples and Bananas Classes
