Multiple CSS Selectors And Overriding: CSS Web Design Series Part 3

Multiple CSS Selectors

Multiple CSS Selectors And Overriding
Get the source code for this lesson at the end of the post!

Multiple CSS selectors and overriding is the topic for today. We’re going to continue with some more CSS rule basics. In the two examples below, we have all 6 HTML headings coded in the body element of our HTML document, and what they look like when ran in a browser without any CSS code.

HTML headings code

Headings Display No CSS

As you may already know, the 6 HTML headings have their own default sizes ranging from small to very large. These default sizes can be altered with CSS, and often are just by adding a font-size: declaration to the CSS rule. We will now create a CSS rule that has multiple selectors in order to change the style for more than one heading with just one rule. Following with the internal style sheet CSS that we’ve been using, we will put our CSS in the HTML head element again in between our opening and closing style tags. Below is the CSS rule and what our page now looks like in the browser.

Multiple CSS Selectors

Headings display with multiple selectors

Our CSS rule has three selectors; the h1, h3, and h5. We separate them with a comma and a space. In the declaration block, we set the rule to change the background color to red. Now, when the page is saved and ran in the browser; we can see the updated styles. The h1, h3, and h5 headings all have a red background that spans the entire length of the browser. This is how almost everything is displayed by default. If you remember, our HTML document is read from top to bottom; one line at a time. So it will display our elements one after the other starting from the top. This is known as a block display. We’ll learn a few other ways of displaying our HTML elements down the road, and how we can set a specific height and width for each of them. For now, every new element that gets rendered and displayed on our page will take up the width of the browser; and the next element that is displayed will begin on the next line.

Now that we understand how we can apply CSS to many HTML elements at a time by using multiple selectors, we are going to reuse one of the previous selectors from our CSS rule to override its background-color. FYI, this isn’t a practical use of CSS. This is solely for learning purposes. In the future when you have CSS rules with many style declarations, you might want to override one of the styles for a particular reason. For this example, let’s say that we wanted to override the red background property for the h3 heading, and we also wanted to add in a different font color. We would create another CSS rule underneath the one we just made. See below:

h3 override CSS rule

As you could see, this type of coding really wouldn’t make any sense unless our CSS rule with multiple selectors had many style declarations in it that we wanted to keep for the h3 heading. But for example purposes, we have now created an h3 CSS rule with two declarations. One is to override the background color of red that we previously set, to now be blue, and the other is to make our font color white. Our page would now look like this when we run it:

h3 override displayed

The only element that changed is the h3. It now has a blue background and white text. You may ask why does it display with a blue background when we have both red and blue background declarations set for the h3 heading. The short answer to that is because our document is read from top to bottom. So originally the browser set the background color to red, and then it was overridden afterward to blue. We will eventually see better examples of overriding CSS styling.

Playing around with CSS is incredibly fun; seeing what unique designs that you can come up with. For a little side project, incorporate the width: property into your CSS to see what type of results that you get. Two examples of how to use the width property would be, width: 100px; or width: 60%;. There are many ways to do the same thing with CSS. In the future, it will come down to which system that you prefer or are more comfortable with. For the time being, we’ll keep things simple in order to make the code easy to understand. Have fun creating some new HTML elements and CSS rules. I’ll see you in the next post.

Source Code


<!DOCTYPE html>
<html>
<head>
<title>Changing Font Styles</title>

<style>
h1, h3, h5{
background-color: red;
}
h3{
background-color: blue;
color: white;
}
</style>

</head>

<body>
<h1>Heading 1</h2>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: