Reputation: 302
If I link a cascading stylesheet in my code with:
<link rel="stylesheet" type="text/css" href="main.css">
and within my CSS file I have
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #1947D1;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color:#0029A3;
}
it all works fine, until I have to have a link that is formatted differently. Is it possible to easily reset the style completely or for one element in the middle of an HTML file? Or must I manually reset each aspect? I have tried doing
<style></style>
and
<a style="" href="projects.html">Projects</a>
but neither reset the style. Is this not possible, or am I just missing something obvious?
Upvotes: 0
Views: 84
Reputation: 64
Just add a class name to your CSS and to your tag, and this will work fine.
a.class_name:link, a.class_name:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #1947D1;
text-align: center;
padding: 4px;
text-decoration: none;
text-transformation: uppercase;
}
a.class_name:hover, a.class_name:active {
background-color:#0029A3;
}
<a class="class_name" href="projects.html">Projects</a>
Upvotes: 0
Reputation: 60543
if I understand correctly you are looking to style the A
link to projects in a different way that the rest of the main A
links. right?
if so here it is:
<a class="some-class" href="projects.html">Projects</a>
.some-class {
background-color:red /* whatever you want here. */
}
Upvotes: 2