CxD Archive
Intro to Informatics and Web Development
Intro to Informatics and Web Development
  • Intro to Informatics and Web Development - Front Page
  • 1-1 Intro to Code References
  • 1-2 Basic HTML
  • 1-3 Basic CSS
  • 1-4 Classes and IDs
  • 1-5 Javascript
  • 1-6 Javascript Objects
  • 1-7 If...Else Statements
  • 1-8 For Loops
  • 2-1 Intro to User and Product Research
  • 2-2 Product Investigation
  • 2-3 Interviews
  • 2-4 Personas
  • 3-1 Intro to Interaction Design
  • 3-2 Sketching Interfaces
  • 3-3 Prototypes and Interaction Storyboards
  • 1-8 For Loops
Powered by GitBook
On this page
  • Class vs. ID
  • Syntax
  • Resources
  • Assignment
  • Standard Deliverable
  • Advanced Deliverable
  • Code Review Exercises:
Export as PDF

1-4 Classes and IDs

Previous1-3 Basic CSSNext1-5 Javascript

Last updated 4 years ago

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

<p class=”paragraphs”>Paragraph 1</p>
<p class=”paragraphs”>Paragraph 2</p>

ID - use for one element that you want to have a special format

<p id=”p1”>Paragraph 1</p>

Syntax

Resources

Assignment

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:

Here is a 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) IDs -

2) Classes -

3)

Classes on W3Schools
IDs on W3Schools
codepen file
Seasonal IDs
Apples and Bananas Classes
Extra Lessons and Challenges