Skip to main content
Version: v1.2

✏️ 1.1.3.2 Practice: Styling with Classes

Goal: Practice the following HTML and CSS from the Styling lesson:

  • adding classes to style large chunks of our webpage
  • applying classes to multiple HTML tags
  • linking an email address with the <a> tag

Warm Up​

  • How is a class added to an HTML element?
  • What does the 'a' in <a> represent?
  • What is the difference between a URL link and an email link?

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 a class 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 .

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 classes.