Lab 2

Goals of this exercise

• Make use of tags, classes, ids and pseudo selectors.
• Adjust text and background colors
• Create reusable classes
• Understand why and how a normalize.css stylesheet works
• Comprehend the web box-model and make use of the box-sizing property
• Add external fonts
• Link up an external stylesheet
• Analyze and debug CSS using the available dev tools

Description

In this exercise, we learned about CSS and the available selectors. Using those selectors we can style different parts of our website like specific elements, classes and potentially ids. You can also implement conditions using pseudo selectors (for example: :hover only actives when you hover the specified element in your website). You can also easily link up fonts with Google Fonts, a free service which offers hundreds of fonts.

Related links

• MDN Docs
• Normalize.css
• Google Fonts

Reflection

What went well?

• Using different selectors and classes such as .highlight, p, main, …
• Debugging CSS when something isn’t right
• Link external stylesheets
• Link external fonts
• Adjust colors and backgrounds

What was difficult?

• Figuring out when to use what pseudo selectors
• Using combination selectors such as main h2, h2 + p, li > a