Nerd Party: Make your links pop with CSS boxes // Make your links pop with CSS boxes

A simple way to add bold, bright links to your header, sidebar or post text is with CSS. No need for Photoshop, creating images and matching text to your site. Just follow this tutorial…

First, add a bit of code to your stylesheet for each color:

.red {
float: left;
display: block;
clear: both;
margin-bottom: 10px;
padding: 5px 10px;
font-size: 16px;
color: #fff;
background: #fc2c20;

.red a {
color: #fff;

Float: Tells the text to align to the left or right

Display: The element is displayed as a block-level element (like paragraphs and headers)

Clear: No other elements are allowed on the left or the right side of the box

Margin: Creates a space 10px high between the boxes

Padding: Creates space inside the box around the words – there will be 5px on the top & bottom and 10px to the right & left. You could also just put 10px which would make the padding the same on all sides or if you wanted each side to be different, it would be something like 5px 8px 10px 5px (top, right, bottom, left)

Color: Makes the words white

Background: Fills the box with a color (find color codes here)

Red a: Tells the link to stay white instead of using the link color from the rest of the site

If you want all the boxes to be the same length add width: 200px;

And if you’d like them to change color on a mouseover add this:

.red a:hover {
background: #000;

Next, find your links (header, sidebar, page, etc.) and add this:

<div class=”red”><a href=””>About</a></div>

<div class=”green”><a href=””>Portfolio</a></div>

<div class=”teal”><a href=””>Shop</a></div>

Your links go in the light gray bits of code.

Easy peasy! Any questions? What else would you like a tutorial for?


(If you like my Nerd Party posts, a great way to show your appreciation & generate some traffic for your own site is to purchase ad space in my sidebar. I’ve got two opening up tomorrow! Click here for more info)


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  1. says

    Whaaaaaat? My mind is officially blown.

    I love learning all of these random things on your Nerd Party entries. It’s been a while since you did one with your favorite WordPress plugins – if you’ve found any new ones you like, I’d love to see those in a future post!

  2. says

    Love this idea! I just took a CSS class at school and feel like I’m just at the tip of the iceberg of everything there is to learn about coding. I’d love to learn more tips like this!

    • says

      I’m not sure why, but this is absolutely not working on Blogger. I inserted the CSS in the “Insert CSS” page, and added the HTML in an HTML widget. All should be well, but nothing happened. I don’t suppose you know if Blogger blocks CSS for some reason? (Although I wouldn’t think so since they have a CSS input page).

      • says

        I’ve used it on Blogger many times. You may have to add the code to your template file though I would think it would work in the insert css page as well.

  3. says

    Hey there,

    thanks for the tips! Someone recommended your site and I popped by to have a look. Loving it so far and looking forward to checking it out in more details when I have more time!

    • says

      Hey Aneela, this tutorial will work with any blogging platform and template. You may have to do a little more research on html and css to figure it out :)

  4. Adrienne says

    Thanks so much for this post! It is seriously helping me out with my term project for web page design. I will have to check out some more of your posts.