A Twitter header with CSS

In this post I'm going to show you how to create a Twitter header to be used with your tweets and how you can stylize it with CSS. You can reuse the following example in a significant variety of contexts. Let's start with the HTML markup:

<div id="tweets">
    
    <h2><a href="http://www.twitter.com">Twitter</a></h2>
    
</div>

We have a container for our tweets and an heading element which, in turn, contains a link. Obviously you can change the link URL to make it point to your Twitter profile. The attached CSS code makes use of the following techniques:

1. contextual positioning
2. text replacement

#tweets {
    
    margin: 0 auto;
    padding: 2em 0;
    width: 60%;
    
}

#tweets h2 {
    
    margin: 0;
    height: 3em;
    background: #008eb9;
    color: #fff;
    position: relative;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
}

#tweets h2 a {
    
    display: block;
    width: 130px;
    height: 24px;
    text-indent: -1000em;
    background: url(twitter-header/twitter.gif) no-repeat;
    position: absolute;
    top: 1em;
    left: 1em;
    
}

The heading element will create a contextual positioning using the declaration position: relative to allow us to correctly position the link element. The link element has a background image which will be shown instead of its text, that has been hidden using the text-indent property with a negative value. You can see the result here.