CSS techniques to spruce up your blog

Happy New Year, and welcome back to the Distilled blog.

Over the holiday season, and with a bit of down-time, many people had the chance to pick up some new skills or look into something that they've never had time to before.

Tom arrived back in the new year having learned some basic CSS, and asked me to recommend a few CSS techniques that can be used to add visual interest to websites / blog posts, and that are particularly SEO friendly. (As such, the techniques suggested don't help with layout, site theming, etc - but can be added to your site/blog's styles to allow some interest to be added to pages relatively easily.)

Why?

Didn't you hear? The blog post is dead. In a world of boring blog posts, standardised Twitter layouts, and homogeneous microblog templates, you have a chance to stand out. You don't have to go to the lengths of Gregory Wood or Jason Santa Maria and produce a new layout for each article (though, those are some hot sites), but some appropriate visual embellishments may help encourage people to read the whole article - and remember to revisit your site in the future.

Because installing a WordPress theme is so easy, anyone can have a blog up and running in minutes. While this is great, and we now have a wealth of blogs on countless topics, perhaps it’s too easy?

CSS Resources

First, a couple of tutorials and references to help you get your head around CSS:

Also, I'd highly recommend the Firefox plugin Firebug, to help you step through any site's HTML & CSS; looking at how certain designs or effects were created can greatly contribute to your understanding of the principles and techniques.

Techniques

I won't go into too much detail about how these snippets work - they should be fairly self explanatory and working to understand them is a good exercise. Similarly, I'm not going to dwell on cross-browser fixes here, because I don't want to start crying.

Don't forget to open the CSS techniques demo page now, to see the techniques in action while you read the descriptions below.

Link icons

A nice easy one to start, that highlights links which pointed to external pages. It's really as simple as this:

CSS:

a.offsite {
    padding-right: 12px;
    background: transparent url(offsite.png) no-repeat right center;
}

HTML:

<p>Please follow <a href="http://twitter.com/Distilled" class="offsite">Distilled</a> on Twitter.</p>

Putting Content in the Centre

HTML's development has left a legacy of incorrect tags & properties that survive in the online conciousness - in particular those for horizontal / vertical alignment. I mention this quick technique because it's correct, it's useful, and I've applied it to some of the following examples, and wanted to 'show my working' here.

CSS:

.centered{
	display: block;
	margin: auto;
}

HTML:

<img class="centered" src="kitten.jpg" />

Image Framing:

A subtle frame around images can improve the look of a post. Modify the colours and size of the padding to match the theme of your site.

CSS:

img.frame{
	background: #ddd;
	border: 1px solid #999;
	padding: 4px;
}

HTML:

<img class="frame centered" src="kitten.jpg" />

Image Captioning:

An extension of a simple frame is to also include an image caption in there. This code is about as simple as I could make it. The width of the 'frame' needs to be (at least) the size of the image, and could be set using inline CSS, or in the CSS file if every captioned image is likely to be a similar size.

CSS:

div.frame {
	background: #ddd;
	border: 1px solid #999;
	padding: 10px;
	text-align: center;
}

div.frame div{ font-style: italic; font-size: 0.8em; margin-top: 10px; }

HTML:

<div class="frame centered">
	<img src="kitten.jpg" />
	<div>Caption here</div>
</div>

Drop Shadow:

There are a variety of CSS techniques for highlighting content with a 'drop shadow'. Perhaps the most polished is A List Apart's Fuzzy Shadows. The code below delivers a sharp shadow on a floated item, that is particularly easy to implement.

CSS:

.img-shadow {
  float:left;
  background: #ddd;
  margin: 10px 0 0 10px
}

.img-shadow img { display: block; position: relative; background-color: #fff; border: 1px solid #999; margin: -10px 10px 10px -10px; padding: 4px; }

HTML:

<div class="img-shadow">
	<img src="kitten.jpg" alt="test"/>
</div>

Revealed Content:

This is a simple way to hide content that is only revealed when the user hovers the mouse over the heading. Without using Javascript it's impossible to create fancy slide/fade reveal techniques or display the content when the mouse moves away, but it's still useful for not overwhelming a post with content.

CSS:

.revealer .content{
	display: none;
}

div.revealer:hover .content{ display: block; }

HTML:

<div class="revealer">
	<h2>Title</h2>
	<div class="content">
		Content
	</div>
</div>

Pull Quotes:

A particular quote from a post or article can be highlighted in a pull quote - just like in the magazines!

CSS:

.pullquote_r{
	border-left: 0.5em solid #999;
	float: right;
	font-family: serif;
	font-size: 2em;
	font-style: italic;
	margin: 0 0 0.5em 1em;
	padding-left: 0.5em;
	width: 9em;
}

HTML:

<p class="pullquote_r">Quoted text goes here</p>

Quote Boxes:

These boxes are a great way to present a particular idea such as a quote or testimonial, and don't use images to display the large quote marks.

CSS:

.quotebox{
	border:4px solid #DDDDDD;
	margin: 20px auto;
	padding:10px;
	width:70%;
}
.quote {
	font-size:125%;
	line-height:140%;
}

.quote:before, .quote:after{ color: #999; font-family: serif; font-size: 5em; font-weight: bold; line-height: 0px; vertical-align: bottom; }

.quote:before { font-family: Times New Roman, Times, Georgia, serif; content: '201C'; }

.quote:after { font-family: Times New Roman, Times, Georgia, serif; content: '201D'; }

.quotebox .author{ font-style:italic; margin-top: 2px; padding-right:1em; text-align:right; }

HTML:

<div class="quotebox">
	<div class="quote">
		Distilled are experts in SEO who listen to your needs and make excellent, thought through recommendations. They have a great team and together they deliver fantastic, well rounded advice.
	</div>
	<div class="author">
		Stephen Tallamy, <a href="www.locatetv.com">Locate TV</a>
	</div>
	<div class="clearfix"></div>
</div>

Rounded Corners:

The most clear visual aspects of Web 2.0 were a scarcity of vowels and an abundance of rounded corners. The examples page that accompanies this post shows three different methods of creating the effect; the results in my browser (Firefox on XP) are indistinguishable from each other.

In the past, I've used tools that create the images and code required for rounded corners such as RoundedCornr and SpiffyBox. DevWebPro maintains a list of similar services.

However, these days I often prefer to avoid having lots of additional markup, even at the penalty that not every visitors gets the full 'rounded corner' experience. As such, I'd suggest that you consider a couple of options.

The -moz-border-radius and -webkit-border-radius properties, based on CSS3, should appear correctly for most visitors - there's some more details on css3.info. I've also been satisfied using a Javascript solution: the jquery.corner plugin is an exceptionally simple-to-use addition to jQuery, and particularly suitable if your site is one of the 36% that has already chosen to use the framework.

Get blog posts via email

About the author
Rob Ousbey

Rob Ousbey

Rob joined Distilled’s London office in 2008 as an SEO Consultant. Over the years, he’s developed and executed SEO strategy for clients from small businesses to large organizations, and managed Distilled’s Reputation Management projects, where he’s...   read more