Question:
Is there a way to have different looks for different links?
For example, can some have a blue underline, some a different color underline, some no underline until someone hovers their mouse over them?
I was thinking about h1, h2, h3, etc. Is this kind of variety possible using a stylesheet, too?
Answer:
You can define different styles for each link. See the examples below. You’ll notice that the html portion of the code all look the same on the examples. But the CSS code for each one is different.
This is the flexibility of the CSS. You can modify the CSS file and the change will effect every document that uses it.
This is a blue underlined Link. When you hover over this link its color changes and the underline is still there.
The following is the HTML code.
<a class=”underlineLink” href=”http://www.example-link.com/example.html”>This is a blue underlined link </a>
The <a> is the HTML tag for creating a link. The class inside this tag defines the style element in your stylesheet. The href points to a document or webpage you want to link to.
This is the CSS code which goes in your style sheet.
a.underlineLink {
text-decoration: underline;
color: blue;
}
a.underlineLink:hover {
text-decoration: underline;
color: red;
}
This is a blue link but not underlined. When you hover over this link its color changes and it’s underlined.
The following is the HTML code.
<a class=”underlineLink” href=”http://www.example.com/example.html”>This is a red not underlined link</a>
This is the CSS code which goes in your style sheet.
a.no-underlineLink {
text-decoration: none;
color: blue;
}
a.no-underlineLink:hover {
text-decoration: underline;
color: red;
}
