So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

We also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

Finally, we set some padding-right on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects <a> elements, but only if they have an href attribute with a value that contains "http" somewhere inside it.

So that's it — try revisiting the active learning section above and trying this new technique out!

Definire i link come bottoni

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

Let's explain what's going on here, focusing on the most interesting parts:

Our second rule removes the default padding from the <ul> element, and sets its width to span 100% of the outer container (the <body>, in this case).

<li> elements are normally block by default (see types of CSS boxes for a refresher), meaning that they will sit on their own lines. In this case, we are creating a horizontal list of links, so in the third rule we set the display property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements.

The fourth rule — which styles the <a> element — is the most complicated here; let's go through it step by step:

As in previous examples, we start by turning off the default text-decoration and outline — we don't want those spoiling our look.

Next, we set the display to inline-block — <a> elements are inline by default and, while we don't want them to spill onto their own lines like a value of block would achieve, we do want to be able to size them. inline-block allows us to do this.

Now onto the sizing! We want to fill up the whole width of the <ul>, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the width to 19.5%, and the margin-right to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <ul> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <a> in the list, and removes the margin from it. Done!

The last three declarations are pretty simple and are mainly just for cosmetic purposes. We center the text inside each link, set the line-height to 3 to give the buttons some height (which also has the advantage of centering the text vertically), and set the text color to black.

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

Summary

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.