CSS Selectors & Header Styling

Selecting elements

There are many ways to select an element to apply CSS rules. So far, we have used body and header:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #252525;
    background-color: #f8f8f8;
}

header {
    background-color: #2d877d;
    color: #f6f6f6;
    padding: 1rem;
}

Any HTML element can be selected this way, and it is useful for styling all elements of a certain type. CSS is very flexible, and many has many other ways of selecting elements to style.

Class selectors

A class selector is used to apply CSS rules to a group of elements, making it useful for creating re-usable styles. Here is a simple example:

<head>
  <meta name="viewport" content="width=device-width">
  <title>Site Title</title>
  <style>
    .links {
      padding: 1rem;
      text-decoration: none; /* remove underline from links */
    }
  </style>
</head>
<body>
  <ul>
    <li><a class="links" href="index.html">Home</a></li>
    <li><a class="links" href="dashboard.html">Dashboard</a></li>
  </ul>

Breaking it down:

.links: In the stylesheet, create a class using a case-sensitive name, with a dot . prefix.
class="links": The class attribute is added to any element we want the CSS rules to apply to.

Multiple classes can be used on an element, e.g. class="links text-regular default-bg". We can also be more specific about the elements we select by combining selectors:

<head>
  <meta name="viewport" content="width=device-width">
  <title>Site Title</title>
  <style>
    .links {
      padding: 1rem;
      text-decoration: none;
    }

    header .links {
      color: red;
    }

    footer .links {
      color: green;
    }
  </style>
</head>
<body>
  <header>
    <ul>
      <li><a class="links" href="index.html">Home</a></li>
      <li><a class="links" href="dashboard.html">Dashboard</a></li>
    </ul>
  </header>
  <footer>
    <ul>
      <li><a class="links" href="index.html">Home</a></li>
      <li><a class="links" href="dashboard.html">Dashboard</a></li>
    </ul>
  </footer>

The above example uses the .links class to create base styles. We can then combine these with specific styles when used in the header and footer sections:

header .links {
  color: red;
}

This example will target any element with the .links class, nested anywhere inside the header. The element can be multiple levels deep, as long as it is contained in the header section. Other variants on this are available, such as:

header > .links {
  color: red;
}

This restricts the style rules to only apply when the .links element is a direct child of the header:

<header>
  <a class="links" href="index.html">Home</a>

HTML elements can also be used in a similar way, such as header > li.

ID selectors

An ID selector is used in a similar way to a class, but uses the # rather than the dot. The ID is more specific, and each id name should only be used once in a HTML document:

<head>
  <meta name="viewport" content="width=device-width">
  <title>Site Title</title>
  <style>
    #header-menu {
      padding: 1rem;
      background: blue;
    }
  </style>
</head>
<body>
  <header>
    <ul id="header-menu">
      <li><a class="links" href="index.html">Home</a></li>
      <li><a class="links" href="dashboard.html">Dashboard</a></li>
    </ul>
  </header>

The same element can have both a class and an id attribute.

Project `header` styling

Back to our project, update the header sections to include the following classes:

<!-- index.html -->
<header>
  <h1>Online Store</h1>
  <nav>
    <ul class="header-menu">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="dashboard.html">Dashboard</a></li>
    </ul>
  </nav>
</header>

<!-- dashboard.html -->
<header>
  <h1>Online Store</h1>
  <nav>
    <ul class="header-menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="dashboard.html" class="active">Dashboard</a></li>
    </ul>
  </nav>
</header>

The only difference is the active class is applied to the link for the current page. This will allow us to style the link the user is currently viewing.

Remove any styles from this lesson if you have been testing them out in your project.

Add the following to the styles.css:

/* styles.css */
/* add after body & header styles */

/*  */
header h1 {
    margin: 0;
    text-align: center;
}

.header-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-menu li {
    margin: 0 1rem;
}

.header-menu a {
  /* remove underline on links */
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.header-menu a.active,
.header-menu a:hover {
  /* underline the link on the page with the active class */
    text-decoration: underline;
}

This uses some of the techniques already covered, and we will cover margin and padding in more detail in the next lesson.

Here are some key points:

We combine selectors such as .header-menu li to select any li contained anywhere inside of the .header-menu section.
Multiple selectors can be separated with a comma .header-menu a.active, .header-menu a:hover {}.
One of our selectors looks a little different than others, the a:hover selector. The a element is a regular link, followed by :hover. This is called a psuedo class and used to style a specific state. The hover class will add styles when the mouse moves over a selected element. Other examples include :checked for checkboxes, and :visited for links the user has visited.

Getting Started With CSS Margin Padding And The Box Model

CSS Selectors & Header Styling

Selecting elements

Class selectors

ID selectors

Project header styling

Table of contents

Project `header` styling