In this lesson, we will learn how to make some elements stand out from other otherwise identical elements.
Making some elements stand out
In workshop number 2, you learned some new ways to specify which elements that were to be styled. As an example, you styled the page header, without styling the main header. Let's take another look at something similar to what we did in the example:
Using just header as selector, the style instructions apply to all headers in the document.
When using main header instead we are a bit more specific, saying that the style instructions should only apply to the elements that are inside the main element. All headers outside of the main element will not be affected.
We're even more specific, when we use body > header because now we're saying that we only want to style the header elements that are direct children of the body element.
Using these kinds of selectors, we can narrow down the elements that is to be styled in a specific way - but there are other ways to do so as well.
The class attribute
If you want to style one or more elements, but not all, in a specific way, you can add a class to each of them. The value of the class attribute - the class - can be used as a selector in CSS:
In this example, we're adding the class pink to the paragraph. This class can now be used as a selector in CSS:
To add more than one class to an element, add them all as values to the same class attribute, and separate each class value with a space:
This is a very simplified example, as you can of course add more style instructions to each block.
A class may be added to several elements - so if you have several different elements on the page that you want to align or change the color of, you just add the class containing those style instructions to all those elements.
When creating classes, there are some general rules that apply:
All classes must start with a letter (a-z, A-Z)
Other than that, they may contain more letters, numbers, dashes and underscores. Spaces are not allowed.
They are case sensitive, meaning that class="center" and class="Center" are two different classes.
Class values should make sense when it comes to the format that they contribute with.
The id attribute
The id attribute may be added to any element, just like the class attribute:
The value of the id attribute may also be used as a selector in CSS:
Notice the # prefix.
The main difference between the class and the id attribute is that the value of the id attribute has to be unique. No two elements may have the same id.
The id may be used for styling the element, just as we saw in example 4.26, but since id's are unique, we may also use them for other things, e.g. bookmarks:
Instead of navigating to a new page, the bookmark link takes you to the element with the id value in question - in this example, to the element with the id value news.
We now know how to add style instructions to specific element. In the next lesson, we will look at something that can help us style the different boxes on the page.