How to Use CSS Selectors

Now that you know how to create CSS files and call different elements on the page, we are going to talk about using IDs and classes in CSS.

If you go back to our styles.css file, you'll see that we have different styles for different tags like body, paragraph, and heading. However, what happens when you want to have a particular style for only a specific paragraph and not all paragraphs?

This is where IDs and classes come handy. After removing all the content in styles.css file to start from scratch, add some IDs to our HTML elements.
For the <h1> tag, I'm going to add an ID called page-title, and for the <p> tag, I'm going to add a class called content. I'm also going to create another paragraph and have the same class associated with it. Remember, our ID can be used only once in the page, whereas a class can be used any number of times.

Next, I'm going to create a <div> tag, and nest the <h1> tag inside it. This <div> tag has an ID called "heading". If you see, I use a tab to indent the nested content, this helps with readability.

<!DOCTYPE html>
<html>
  <head>
    <title>Embedded CSS</title>
    <link href="css/custom/styles.css" rel="stylesheet">
  </head>

  <body>
    <div id="heading">
      <h1 id="page-title">My Heading</h1>

      <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>

      <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </body>

</html>

Now, go to styles.css. Again, if you remember, IDs have a "#" sign, so our code is:

#heading {
  padding: 42px;
  background-color: #e8e8e8;
}

#page-title {
  font-family: sans-serif;
  color: #ab3939;
}

Here, I'm changing the background color of the <div> area to a light grey, and also adding some padding around it. The background-color has a hexadecimal value, and this is the most popular way to represent a color, as it gives you an endless choice of colors. You don't have to memorize these values, as you can use a color picker tool to select the color you want, and it will generate the hexadecimal code for you.

For the #page-title, I want a different font and a nice dark red for the content. Below is how it appears on the browser.

large

Next, let's see how to style classes.

As I mentioned before, classes are represented by ".", instead of the "#" sign.

.content {
  font-family: sans-serif;
  font-size: 0.8em;
  color: #ab3939;
}

Here, I'm changing the font family and using the value of "0.8em" to reduce the size of the font. Typically, "1.0" is the default, so the value I'm using is relative to this default value. If I want to have a bigger size, then I'd choose "1.5em" or even "2.0em". It's similar to using a percentage, but much cleaner.

Now, the web page looks like this:

large

Next, I'm going to inform you of the **cascading nature **of these stylesheets meaning there are layers of styles that stack on top of each other. We can customize it in such a way that the styles at the end have the highest priority and will take precedence if there is a conflict.

In our example, notice how we have some duplicate content. The font-family and color are the same for both the heading and paragraph. In such a case, we can move this value to our <body> tag, as this pertains to the entire page.

body {
  font-family: sans-serif;
  color: #ab3939;
}

#heading {
  padding: 42px;
  background-color: #e8e8e8;
}

#page-title {

}

.content {
  font-size: 0.8em;
}

Obviously, nothing changes on the browser.

The <body> tag's style is the root behavior and will apply to the entire page. If you want a specific style for only a part of your page, you can override this default behavior with custom style. For example, we have defined a red color for all the font in our <body> tag. Let's say, we want a charcoal color for our paragraph font, we have the ability to change it.

body {
  font-family: sans-serif;
  color: #ab3939;
}

#heading {
  padding: 42px;
  background-color: #e8e8e8;
}

#page-title {

}

.content {
  font-size: 0.8em;
  color: #767676;
}

The webpage will now look as so:

large

You can get as granular as you want in cascading stylesheets, and apply a specific style to any particular element in your page.

This is how we can use selectors in HTML and CSS, and apply any specific style to them.