The small things

Recently I’m pretty fascinated of the small things you can design with CSS. Just some smart rules in your stylesheet can create a nice experience for your visitors. Have a look on the left side where you see the feed links. I just can’t get enough of watching how perfectly aligned the words “Full text” are. It looks very nice. I’m really satisfied with what I’ve done there. And it’s so little work to do.

Look at the XHTML:

<ul id="feeds">
<li><a ...><strong>RSS 2.0</strong> Full text</a></li>
<li><a ...><strong>Atom</strong> Full text</a></li>
<li><a ...><strong>RSS 2.0</strong> All comments</a></li>
</ul>

No extra tags, just semantic markup (well, you can argue if you really need the strong, but I need it in that case).

With CSS we apply now some style to it:

#feeds strong {
display: block;
float: left;
width: 50px;
}

We need display: block to make strong a block level element, just that way it can be made 50 px width. float: left is needed to not brake the following text to a new line.

Small, but with effect. Now, one can see that you care even about the small things on your website.