Styling Links

Links can be styled in different ways, with any CSS property (e.g. color, font-family, background, etc.).

HTML file: Displayed by browser:
<style>
a {
    color: #FF0000;
    font-family: "Comic Sans MS";
    background-color: lemonchiffon;
    font-style: italic;
    font-size: 1.5em;
    font-weight: bold;
}
</style>
<body>
<p>This is <a href="text_hey.html" target="_blank">a styled link</a> within an unstyled paragraph</p>
</body>

This is a styled link within an unstyled paragraph

An interesting mystery came up for me here. I had a thin strip of the link background color showing up beneath my back, home and next buttons. That color was only supposed to affect the link in the right-side column. It took me about five minutes to figure where that thin line was coming from! So I had to put a class identifier on the link I wanted affected on this page.

Back button Table of Contents Next button