Looking for the previous guiStuff?

It's still here, the content didn't go anywhere. You may want to check out this new guiStuff though -- It's rather informative.


Intro Documents:


::Stuff for the multi-spec coder;

Coding, formats, standards, and other practical things.

 Home  //  CSS Articles  //  Styling Links: Part 1 - Inline Links 

<!-- CSS Articles

Styling Links: Part 1 - Inline Links

In this first part of Styling Links, I'll elaborate on how to style inline links. That is, links that were specifically meant not to break the flow of content and to allow text around them. This doesn't necessarily mean that all inline links are meant to be parts of paragraphs, you may just want to have the option to use them in an inline area.

Inline Links

When styling inline links there's a general separation getween links you'll want to have within sentences in paragraphs, and links you're going to separate and try to style so they're distinct in a way that makes them seem button-like or iconic. On this website, you'll notice a few kinds of inline links within sentences that were styled so that they can be part of the text, and not interfere too much with reading it:

1) A neutral link looks like this.
2) An external link (which links to an external page) looks like this.
3) A CSS Reference link looks like this: border.

The first type of link is styled very simply: It always has its font-weight property value set to bold, and has a dashed underline. When hovered over, its color lightens, and the underline becomes solid. That's about it. The only thing to note is, that the underline isn't really a text-decoration underline, it's a border-bottom, since that's the only way to have the appearnce of an underline of a different color, and have it styled in any other way than solid.
The other two types of links appear to have an attached images to them. In fact, the image changes when they've hovered over. You'd be surprised by how many methods this may be achieved, but the easiest and safest (in terms of browser support) is using the background-image property. Let's take the step-by-step approach:

First, we'll style the obvious parts of the link:

a.mylink { color: #509c5b; border-bottom: 1px solid #c0ffc0; font-weight: bold; } a.mylink:link, a.mylink:visited { color: #509c5b; text-decoration: none; } a.mylink:hover { color: #ffa665; border-bottom: 1px solid #ffe1a2; }

Not much to expand on here. The resulting link will appear like this:

Some text. Some Link ...Some more text.

Now, to the image bit. First, remember that we're talking about an inline element, so the only padding that will apply will be horizontal (that is, the only padding that will effect other elements). Why do you need padding? Because the way the image is going to appear is using the background-image property, as mentioned above, and any background property will only work with the area within the element. Thus, there's a need to expand that area. To do so, we'll add padding-right: 15px; to the style rule. This will expand the element's inline box by 15 pixels to the right, even if it's only text, and even if it's surrounded by text. If you try this as the sole property of, say, a SPAN element, you'll see that if you style words with it they'll have an additional 15 pixels to their right, as if these individual words had the property of word-spacing applied to them and the word following them.

Here's what you'll see if you add only this property to the same link as above:

Some text. Some Link ...Some more text.

The text to the right was 'pushed' 15 pixels, and you can see that the border keeps going for that length. Remember that you can do the same with padding-left, or both. This can be useful for all sorts of inline stylings, not just links.

Now it's time to add the image. Incidentally, here are the images I'm going to use: tab1 tab2

The first and obvious step is to add background-image: url(imagename);. This won't do much, of course, since it'll just tile the image across the entire area. To stop this, you'll want to add: background-repeat: no-repeat;. Now the problem is that the image's default position is at the top-left, which isn't where you want it to be placed. Luckily, background-position solves that problem. Set it to right (although you can set it to top right or bottom right if you wish, it depends on your image and how you want the link to appear).

Actually, all that's left to do now is to set an alternate image for the :hover state. Again, we're using background-image for this, simply with an alternate image path.

Here's the complete CSS:

a.mylink { color: #509c5b; border-bottom: 1px solid #c0ffc0; font-weight: bold; padding-right:15px; background-position: right; background-repeat: no-repeat; background-image: url(images/tab_green.png); } a.mylink:link, a.mylink:visited { color: #509c5b; text-decoration: none; } a.mylink:hover { color: #ffa665; border-bottom: 1px solid #ffe1a2; background-image: url(images/tab_orange.png); }

And here's the resulting Link:

Some text. Some Link ...Some more text.

You can do all sorts of things just by messing around with the properties. For example, if you were to use the same background-image for the :hover state, but change the background-position values to two different ones (bottom right, and top right), you could use the same image but have it change locations when when the link is hovered over.

Button Rows

Every now and again there'll be a debate on one forum or another on whether 'button rows' (it's just a sequence of styled horizontal links) should be constructed using lists, or just links. This always ends the same way: people realize that there's a use for both, it just depends on what you're trying to achieve. However, there are usually passers-by who haven't heard of using 'just links' as button rows, and thought that this was only done using lists. So here come some Button Rows.

Button Rows are called that because they were often styled to look like beveled buttons. You can really style them any way you want, they keep calling them that because, depending on the design, there's sometimes no distance between one link and the following one, so your mouse pointer goes from hovering over one, right to hovering over the other, without changing into a normal pointing cursor in between. It's all really just semantics, you can get the mouse pointer to do anything, and get the hover effect to do anything, it's just a generalized term.

First, let's keep in mind that we're still dealing with inline links, and as such, they have their ups and downs. If you want to have text in the same row as these links, you'll have to mind the line-height of the whole thing, so you don't get odd results in mixed lines. Also, remember the padding rule from before: only horizontal padding will have an effect on other elements. That said, let's begin the styling.

First, we'll make a class with a solid background-color, white text, some horizontal padding, and deactivated inherent :link, :visited, and :hover rules:

a.mylink_box { color: #FFF; background-color: #99bb87; font-weight: bold; padding-left: 5px; padding-right: 5px; } a.mylink_box:link, a.mylink_box:visited { color: #FFF; text-decoration: none; } a.mylink_box:hover { }

The link will now appear like this:

First Link

Now to stay true to the spirit of the 'Button' portion of the name, we'll give it a bevel. We'll do so by assigning different color values to the four different border-color sides. To use the shorthand value assignment method, we assign the four values separated by spaces: border-color: #c1d5b7 #5f7852 #5f7852 #c1d5b7;. Remember that the values are top, right, bottom, and left (top, and then a clockwise turn). Now we need to set the border-width to 1px, and the border-style to solid. By adding these property values, you get the following link:

First Link

At this point, I can already place a few one after the other so that you can see where they got their name:

First LinkSecond LinkThird Link ...and, of course, some text.

I've added some text after them as a reminder that we're still working with inline elements, which menas you can still easily stack things horizontally after them.

Now for them to be actually reactive to hovering, we'll need to reverse the colors in the border-color sequence. That is, we need to invert the top and bottom colors, and then left and right colors. The outcome is: border-color: #5f7852 #c1d5b7 #c1d5b7 #5f7852;. As well, to make the text seem to sink a bit, it's possible to make it shift to the right by changing the padding. Add these padding properties to the :hover mode rules: padding-left: 6px;, and padding-right: 4px;. By doing this, we're adding 1 pixel to the padding-left property value, and subtracting 1 pixel from the padding-right property value, which keeps the overall horizontal width fixed, which is important so we don't get any flickering effects.
I could hack my way to move the text vertically as well (considering we're talking about an inline element), but this would involve quite a bit of browser support juggling and wouldn't be worth it (if you're wondering, it'll require you to vertical-align the text within its own line-height box).

Here's the resulting CSS:

a.mylink_box { color: #FFF; background-color: #99bb87; border-color: #c1d5b7 #5f7852 #5f7852 #c1d5b7; border-width: 1px; border-style: solid; font-weight: bold; padding-left: 5px; padding-right: 5px; } a.mylink_box:link, a.mylink_box:visited { color: #FFF; text-decoration: none; } a.mylink_box:hover { border-color: #5f7852 #c1d5b7 #c1d5b7 #5f7852; padding-left: 6px; padding-right: 4px; }

And here are the links again, this time with the hover effect:

First LinkSecond LinkThird Link ...and Text!

In practice, you may want to add some background around them so that the bevel looks better, if, as in this case, the contrasts aren't accentuated:

This time I spaced them out a bit, by, literally, adding a space between the HTML tags. Besides that all I did was add a padded DIV. But here's the CSS since you're going to check the source anyway (p.s. - always a good practice):

.mylink_box_area { color: #FFF; padding:5px; background-color: #789769; border: 1px solid #5f7852; }

As I say, and will keep saying, after I finish presenting a specific CSS implementation, this was just one permutation. There are all sorts of directions were you could take this. I didn't even try to show what can be done if you were two blend two Button Box styles together in one line (they're inline rmemeber?...) -- now that's fun! Also try throwing in background images like in the first part of the article, or even tiled ones.

In Part 2, I'll get into various devious ways of styling block-level links. This allows for a much wider range of hacking around to get more of the document to react to your motion, and has more to do with CSS Rule Management.

Return to the CSS Articles section, or go the to Main page.

Looking for the old guiStuff?

It's still here, the old content didn't go anywhere.