HTML and CSS Reference
In-Depth Information
color: #544a40;
}
And next we'll target our main navigation links at the top of the page, and our two buttons:
nav a {
color: #fefefe;
}
As you can see, this example uses the descendant combinator to target the links. You may
recall from
Chapter 1
that this is done by means of a space between two selectors—in this
case targeting all
<a>
tags that are inside of the
<nav>
element.
These last two rule sets use the
color
property to change the text color of the links. Thus
far in the topic, we've used the
color
property in a few examples. In most cases, you'll use
it to set the text color of an element, but the
color
property actually represents more than
just text color.
The
color
property defines all foreground colors on that element, and this includes borders,
list bullets, and even the text that appears in place of an image when an image doesn't
load—defined in the HTML using the alt attribute on an
<img>
tag.
Note: Targeting multiple
<nav>
,
<header>
, or
<footer>
tags
In this topic, we're adding styles to a phony website called RecipeFinder,
which consists of just a single web page. In our HTML for this web page,
we're using one
<nav>
element, one
<header>
element, and one
<foot-
er>
element.
HTML5, however, allows us to define multiple
<nav>
,
<header>
, or
<footer>
elements on a single page. Thus, if we were to add more of these
elements to the page, all the styles that we applied to those elements would
also apply to the new elements. This might not be the desired result.
To target multiple
<nav>
,
<header>
, or
<footer>
tags uniquely, we
would have to use a different selector, or use selector grouping. You can also
