HTML and CSS Reference
In-Depth Information
24. font-family: Georgia, Times, "Times New Roman", serif;
25. font-style: italic;
26. }
27. .intro {
28. text-indent: 15px;
29. }
30. .intro a {
31. font-size: 11px;
32. font-weight: bold;
33. text-decoration: underline;
34. text-transform: uppercase;
35. }
In Practice
With text -based properties under our belts, let's jump back into our Styles Conference
website and put them to work.
1. Currently every link on the page is underlined, which is the default style for anchor
elements. This style is a little overbearing at times, though, so we're going to
change it up a bit.
Adding to our links section within our main.css file, we'll begin by removing
the underline from all anchor elements by way of the text-decoration prop-
erty. Next, we'll select all anchor elements that appear within a paragraph element
and give them a bottom border .
We could use the text-decoration property instead of the border-bot-
tom property to underline all the links within each paragraph; however, by using
the border-bottom property we have more control over the underline's appear-
ance. Here, for example, the underline will be a different color than the text itself.
Our links section, which includes our previous hover styles, should look like this:
Click here to view code image
1. a {
2. color: #648880;
3. text-decoration: none;
4. }
5. a:hover {
6. color: #a9b2b9;
7. }
8. p a {
9. border-bottom: 1px solid #dfe2e5;
10. }
Search WWH ::

Custom Search