HTML and CSS Reference
In-Depth Information
a {
text-decoration: none;
Notice that now we're just targeting all <a> elements directly.
The :visited pseudo-class targets all links on the page that have been clicked, or visited,
by the user. With this pseudo-class, you can style visited links differently from other links.
For RecipeFinder, we're going to keep the same styling for both visited and non-visited links,
so there's no need to use a separate :visited rule set. But in some cases, it could improve
the overall usability of a website if visited links are identified with distinct styling.
Note: Not Using :link
Because :link is somewhat redundant and adds some extra specificity, and
because we won't be giving any extra styling to :visited links, in the
stylesheet for RecipeFinder we're going to stick with targeting our links using
just the element type selector, without :link or :visited , for all of our
link styles.
Within the declaration block, we're using the text-decoration property, with a value
of none , which removes any underline. The text-decoration property also accepts values of
underline (the default), overline , and line-through , all of which should be self-
explanatory. It's also worth noting that, although until now text-decoration has been
treatedasasinglelonghandproperty,itnowrepresentsashorthandformultiple text-dec-
oration properties, which you can read about in the official specification.
Changing Link Color
Now that we've removed the underline, let's change the color of our links. We need to write
more than just one declaration to do this, because different parts of the website have different
colors for links.
Let's first define a global color for all text links:
a {
text-decoration: none;
Search WWH ::

Custom Search