Skip to main content

✏️ Practice: Styling with Classes and Ids

Goal: Practice the following HTML and CSS from the previous styling lessons:

  • adding classes to style large chunks of our webpage
  • adding ids to style single elements within our webpage
  • applying classes to multiple HTML tags

Warm Up​

  • How is a class attribute added to an HTML element?
  • How is an id attribute added to an HTML element?
  • When can we use an id versus a class on an HTML element?

Code​

Meet the goal by completing one of these projects. Remember to create separate folders for each project in your home directory, commit regularly and push any changes to each project's remote repository on GitHub.

Cupcake Shop​

  • Create a new website for a cupcake shop. Your site should have images, text and links. Be creative!
  • Pick three HTML elements and give them a class called flashy, and create a CSS rule to make them red and italic.
  • Create an id called best and add it to the most popular cupcake featured on your site. Apply a style of your choice to make it stand out.

Boring Lecture​

  • Create a new project called boring-lecture.html that is a fake page about a boring subject of your choice. Use lorem ipsum text to fill up the page using <p> tags.
  • Create a section of the page at the beginning for an introduction to the lecture; in that intro, include a <h2> subheading, a paragraph or two, and a picture. Give each of these elements the class intro.
  • Create CSS rules for h2.intro, p.intro, and img.intro. Remember that in CSS, classes are prefaced with a .
  • Add an id to one element to give it unique styling that cannot be used elsewhere.

Extended Practice with your Cat and Dog Pages​

  • If you have not already done so, add some styles of your own choosing to your cat's homepage and your dog's blog. Make sure to use both classes and ids.