Styling Links with Nested Selectors

Now we want to edit the links in our navigation bar. We have not looked at linking elements yet, so we’ll ignore the links themselves, and focus on initial styling.

First we’ll set our nav tag.

nav {
    padding: 15px 25px;
    margin: 0;
    background: #555;
}

These three rules will set the padding, so we have some space around our navigation bar, fix it so we have no margin – allowing us to move right against the edge of the screen, and finally give us a background color of a dark grey.

You’ll notice that we’ve specified the background color as #fff. This is one of the ways you can specify a color and is known as a shorthand notation.

Typically you need two hexadecimal values to specify a color channel, and there are three color channels which allow you to mix your colors: Red, Green, and Blue – RGB. If the hexadecimal colors are duplicates in each channel, you only have to specify one of the values. However, if anyone is slightly off, then you need to specify all size hexadecimal values. The individual channel values can range from 00 to ff. Anytime we use a hexadecimal value, it always is preceded with a hashmark (#).

CSS also allows you to specify a color using a preset name, for example, white, blue, etc. Note that you do not need to use quotes around these values. 

Finally, CSS allows us to use the RGB function. The function takes three parameters, each with a value of 0 to 255. For example rgb(100, 0, 100) would give us a deep purple color.

Now the default link color of blue will not show well on this dark grey background. So we want to change the link style. However, we don’t want to change every link in the web page, so we’ll specify a selector which will select only anchor tags (links) within the nav tag.

nav a {
}

This ensures that we are working with the right set of navigation. 

Now we need to define our rules. We want to have a color that stands out against the dark grey, so we’ll pick white. We also want the navigation links to be easily readable, so we’re going to increase the font size and weight to make them bold. To increase the area which can be clicked on, we’ll use the padding. With the links so close together, we want to add a little bit of margin to reduce the chances of someone accidentally clicking on the wrong link. Finally, we’ll remove the default underline by changing the text-decoration property.

nav a {
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 10px;
}

We also want to specify a psuedo-class. That is a set of rules for when a user hovers over the link with their mouse. Note, this doesn’t work on mobile devices since you cannot “hover”.

:hover is one of the most common psuedo-classes used by developers. When we specify a hover, we only need to specify the properties we want to change in our declaration block. We also want to avoid changing the size of our element. So no changes to margin, padding, font, or width. We also want to avoid changing the font-family and weight. Usually we will change the color.

nav a:hover {
}

Notice how we append the :hover right to the a in our selector. We don’t want any space.

nav a:hover {
    background-color: #ddd;
    color: black
}

With just a few quick lines of CSS, we can radically change how the navigation bar looks.

Styling Links with Nested Selectors was originally found on Access 2 Learn