CSS Classes and an Introduction to Colour Formats

<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />

Learning objectives

By the end of this chapter you will:

• be able to define custom CSS rules ('classes') to selectively apply style rules to individual elements
• be able to attach classes to HTML elements using the class attribute
• have an understanding of a variety of ways to express colour in CSS. </aside>

In the last chapter, we learned about the element selector in CSS. The element selector in CSS is the name of an HTML element without the angle brackets. After the selector, we write some braces {} and inside a list of stylistic properties that we want to change, and the values we want to change them to.

Here's a code example:

li {
	list-style-type: square;
	font-weight: bold;
	color: saddlebrown;
}

Redefining the element selector (in this case the li, or 'list item' element) means that we alter the appearance of all elements of that type from their default appearance.

Using CSS to customise the appearance of elements is an efficient means to standardise a website's design  — once we include a link to a stylesheet that declares how we want the element to look, any new element of that type that is added to the HTML document takes on that appearance (and doesn't need to be manually 'styled').

Imagine a scenario though where we might need elements of the same type to have different visual characteristics:

• What if a certain paragraph needs to be made more prominent than others? (eg. with a larger font and a border.)
• What if a collection of elements (eg. <div></div> boxes or 'division' tags) need to have a different background colour? eg. for a colour selector on a purchasable product.)
• What if we want to use a colour highlight to add a subtle cue to help categorise our content?

<aside> <img src="/icons/checklist_green.svg" alt="/icons/checklist_green.svg" width="40px" />

Quick Exercise (2 mins)

On this last note: head over to The Guardian Australia: https://www.theguardian.com/au and hover your mouse over the items in the main navigation element.

• What do you note about the coloured highlight that appears on each of these items?
• Where else do you see these colours on the page?

Briefly discuss how colour is used as a cue with the person next to you (or by posting in the chat on Zoom).

</aside>

If element selectors make elements of the same type look alike, how do we go about doing this kind of variation of style within the same element with CSS?

This is a perfect opportunity to learn about and use CSS classes.