I am facing an issue with styling links on my webpage. I have a list of links to different websites, each followed by a brief description. To ensure the link text is slightly larger than the description, I created a CSS class called a.link with a font-size of 16px. The list is contained within a standard <p> tag and separated by <hr> tags between each item. However, I noticed that only the first link in the list retains the new font size, while all subsequent links lose not only the styles defined in the link class but also those in the <p> tag. Removing the <hr> tags results in correct styling of all items, as does wrapping each link in its own <p> tag, although I prefer to avoid cluttering the list with extra tags if possible.
Below is the snippet of my stylesheet code:
#pane {
float: right;
width: 800px;
}
#pane p {
margin-left: 15px;
font-family: verdana;
font-size: 12px;
}
#pane p a.link { font-size: 16px; }
And here is an example of the HTML generated:
<div id="pane">
<p>
<a href="http://www.google.com" class="link">Google</a> - For finding stuff
<hr>
<a href="http://www.newegg.com" class="link">Newegg</a> - For buying stuff
<hr>
</p>
</div>
Has anyone else experienced this issue and discovered a solution without adding <p> tags everywhere?