HTML and CSS Reference
In-Depth Information
add class names and use the class selector, or some other type of selector, de-
pending on the context of the elements.
Another area on the page that needs a change in link styles is the “Yummy Tweets” section
in the sidebar. Let's fix those and then move on to something else before we take care of the
rest of the link styles on the page:
.tweet a {
color: #810430;
}
.tweet .date {
color: #8f7e6d;
}
We've made two changes here: set the color for all links inside an individual tweet; and set
a unique color for the link that's at the bottom of each tweet, which tells the user when the
tweet was sent. You'll recall from
Chapter 2
that each tweet's date is wrapped in a
<div>
element that has a class of “
date
”, so we've used that class in our CSS to apply the unique
styles.
Note: Setting Global Styles
The styles we added to all links on the page are what we might term “global”
styles, because they apply to all links on the page that aren't styled otherwise.
These differ from styles applied to links that are in a certain context (such as
links in a
.tweet
element). There are other global styles that you'll want to
get in the habit of adding to your CSS at the start of a project.
One such example is the text color set on the
<body>
element. The Re-
cipeFinder design doesn't have any common text elements—like a paragraph
of text—that we can use to identify a global text color. But we can use
something like a dark gray that's commonly used for body text:
body {
background: #cab5a3 url(../images/bg-main.gif)
repeat
↵
repeat 0 0;
