18,502 reads

Making Your Links Look Pretty With CSS: Practicum Coding Bootcamp

by Evgeniy LebedevFebruary 9th, 2020

Too Long; Didn't Read

A professional-looking site is all about the details: the colors, the graphics, the subtle elements, and the overall look and feel. In this project, I’ll show you how to make beautiful, elegant, and professional-looking links that can help your website stand out.

Companies Mentioned

featured image - Making Your Links Look Pretty With CSS: Practicum Coding Bootcamp

Everything I’m showing you here is only valid if you have direct access to your site’s styles or code. If you’re using a site builder that doesn’t let you dig into the CSS, this won’t work.

What makes a link

A link on a website tells the user two things:

I am not your regular text; I am clickable, and if you click me, you’ll get to another page
You’ve clicked me before (or you haven’t clicked me yet)

At the same time, a link can be a part of your text, like this. So, a link needs to play nicely with the surrounding text and not create too much contrast.

It’s customary to make a link underlined and blue, and a visited link underlined and purple. That’s tradition, and it makes a lot of sense: if everyone agrees that links should be underlined and blue, then they’re much easier for all of us to navigate and design.

What’s wrong with most links, and how to do better

By default, most new-looking links are anything but underlined and blue. Some designers disable the underlining because it’s ugly (and it really is). Others paint their links different colors to make them look nicer (this makes things more confusing). Finally, some designers disable the purple mode, so users can’t see which links they’ve previously clicked. This may be pretty, but it’s not user friendly.

Here is what we really need from a link:

It should be blue if it’s new
If it’s been visited already, then let it be purple
It needs to be underlined, but in a classy way
As a bonus, let’s make it reddish orange when we roll our mouse over it; this is not necessary, but it’s nice.

How to do it: CSS

CSS is Cascading Style Sheets. It’s a set of instructions that we can give the browser, telling it how to render our page. CSS is defined in a separate file or in a special block inside the document.

In CSS, every instruction has two parts: what to design and how to design it. Consider this:

body {font-size:16px; color:black}

This means that all the text inside the body of the document needs to be 16 pixels in size, and black.

‘Cascading’ in CSS means that some instructions can override other instructions. When a browser sees two conflicting instructions, the latter is considered more important. For example, after the next two instructions, the text in the body of the document will be 16 pixels and blue, because the later color instructions will override the former ones:

body {font-size:16px; color:black}
body(color:blue}

To add some CSS instructions to the document, we need to place them inside

<style>

...

</style>

tags, and preferably put all of this inside the

<head>

...

</head>

section of the document (although this is not 100% necessary).

Step 1: Set up instructions for links

To achieve our goals, we’ll need three instructions in our CSS section: for links, for visited links, and for links that the mouse hovers over. A link in HTML is represented by the tag

<a>

. So, let’s lay the groundwork:

<style>
a{}
a:hover{}
a:visited{}
</style>

This set of instructions will do nothing at the moment: we’re pointing to what should be designed, but we’re giving no indication of how to design it.

Step 2: Set up the colors

Let’s paint the links their proper colors: blue, orangish red (on hover), and purple.

<style>
a{color: #0f7afc;}
a:hover{color:#cf0000;}
a:visited{ color: #800080;}
</style>

These weird-looking color codes are what’s called ‘hex values.’ That’s a format commonly used to show colors on the web. Google “Hex Color Picker” to get any colors you want in hex.

Step 3: Create classy underlines

To make classy underlines, we’ll use this CSS instruction: border-bottom. Border-bottom draws a line underneath the text with enough level of control for our needs.

The minimum border width is 1 pixel. But we want a thinner, classier kind of border—maybe half-a-pixel thin. To simulate a half-pixel border, we’ll make the border semi-transparent:

<style>
a{color: #0f7afc; border-bottom: solid 1px; border-bottom-color: rgba(15, 122, 252, 0.2);}
a:hover{color:#cf0000; border-bottom-color: rgba(208, 64, 0, 0.2);}
a:visited{ color: #800080; border-bottom-color: rgba(128, 0, 128, 0.2);}
</style>

The RGBA instructions are also a way of representing color in CSS—like hex, but in a different format. RGBA is Red, Green, Blue, Alpha. The first three numbers stand for the amounts of red, green, and blue in the color, and the Alpha is a number between 0 and 1 that stands for transparency (or opaqueness). So, in our instructions, 0.2 means the border is 20% opaque (also known as 80% transparent).

You’ll also notice that border-bottom: solid 1px; appears in the beginning of our instructions. This tells the browser to draw a border underneath the link. And since CSS is cascading, this property applies to all links, including the hovered-over and the visited ones. The only element that we needed to vary was the color.

Step 4. Clean up legacy underlines

If you gave these instructions to your browser now, you’d see two lines underneath our links: one would be the default thick line used for all links, and the other would be our beautiful classy line. The default underlining needs to go away. Let’s achieve this with text-decoration:none:

<style>
a{color: #0f7afc; border-bottom-color: rgba(15, 122, 252, 0.2); text-decoration:none}
a:hover{color:#cf0000; border-bottom-color: rgba(208, 64, 0, 0.2); text-decoration:none}
a:visited{ color: #800080; border-bottom-color: rgba(128, 0, 128, 0.2); text-decoration:none}
</style>

Step 5. Behold

Now take the three instructions I just wrote and put them into the document where your styles sit. Once you save and reload, behold the pretty links you now have.

But can we do more?

With CSS and JavaScript, we can do anything to a page. A link can animate on hover, explode on click, and launch rockets across the screen. But these gimmicks are pretty useless in everyday applications, so for now, let’s stick with the classy, usable, and friendly link design.

Stay tuned for more freaky CSS experiments, though.

Plus, if you want to learn more about CSS, HTML, and JavaScript, check out Practicum. We give you education in programming, web design, and more tech skills from expert mentors.