The Special Case of !important
The !important value can be appended to the value of any CSS declaration. It is a special keyword that can be applied to selectors to override the specificity value. It trumps any other specificity value. In terms of specificity value, it would add another column to become the value 1, 0, 0, 0, 0. It would even take precedence over an inline style.
For example, we might want to create a style rule that is reusable and lets us hide content on a web page. Something like this:
.hide {
display: none;
}
If we apply this class to an element, we want that element to be hidden and to not be rendered on the web page. We might use this to later reveal the element using JavaScript. However, consider the following example:
<style>
div.media {
display: block;
width: 100%;
float: left;
}
.hide {
display: none;
}
</style>
<div class="media hide">
...Some content
</div>
We might expect our div element to be hidden because the .hide class appears second in the style sheet. However, if we apply the specificity calculations we've learned about, we can see that div.media scores 0, 0, 1, 1 and .hide only scores 0, 0, 1, 0. The div.media rule for the display property with block value will override the none value of the .hide class. We can't really use this instance of the .hide class as we don't know whether it will have any effect.
Now consider the same .hide class but using the !important keyword:
.hide {
display: none !important;
}
Adding the !important keyword will make this .hide class much more reusable and useful as we can pretty much guarantee that it will hide content as we desire.
We've learned a lot about CSS in this part of the chapter. Let's apply some of this knowledge to an activity.
Activity 1.02: Styling the Video Store Template Page
In the previous activity, we were tasked with creating boilerplate HTML for a web page for the Films On Demand website. In this activity, we are going to add some style to that template page.
The following figure shows the expected output for this activity:
Figure 1.32: Expected output for styling the video store template page
The steps are as follows:
- We will start with the template from Activity 1.01, Video Store Page Template, which we will save as template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Films on Demand - <!-- Title for page goes here --></title>
<meta name="description" content="Buy films from our great selection. Watch movies on demand.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis scelerisque mauris. Curabitur aliquam ligula in erat placerat finibus. Mauris leo neque, malesuada et augue at, consectetur rhoncus libero. Suspendisse vitae dictum dolor. Vestibulum hendrerit iaculis ipsum, ac ornare ligula. Vestibulum efficitur mattis urna vitae ultrices. Nunc condimentum blandit tellus ut mattis. Morbi eget gravida leo. Mauris ornare lorem a mattis ultricies. Nullam convallis tincidunt nunc, eget rhoncus nulla tincidunt sed. Nulla consequat tellus lectus, in porta nulla facilisis eu. Donec bibendum nisi felis, sit amet cursus nisl suscipit ut. Pellentesque bibendum id libero at cursus. Donec ac viverra tellus. Proin sed dolor quis justo convallis auctor sit amet nec orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</body>
</html>
- We are going to link to an external CSS file. One of the difficulties with styling web pages is handling differences between browsers. We are going to do this by adding a file to normalize our default styles. We will use the open source normalize.css for this. Download the file from https://packt.live/34zqxty. Add the file to a styles folder and link to it from the template.html web page.
- We are going to add a style element to the head element of template.html. In the style element, we want to set some styles used across all pages. We want to do the following:
Set box-sizing to border-box for all elements using the universal selector (*).
Add a font family with the Arial, Helvetica, sans-serif values and a font size of 16px to the whole page.
Add the background color #eeeae4 for the whole page. To do this, we will add a div element wrapper with the pageWrapper ID, where we will set the background color and padding of 16px, and a full-page class, where we will set the minimum height to 100vh (100% of the viewport height).
Add an h1 element selector that sets the margin to 0 and adds padding of 16px to the bottom of the h1 element.
Note
The solution to this activity can be found on page 575.
We've learned a lot about HTML and CSS in this chapter. In the next section, we will learn a little bit about the Chrome developer tools and how we can use them to better understand our web page.