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>
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
Search WWH ::

Custom Search