CSS: styling blog comments

This is the first of a series of posts about CSS and blogs. Styling blog comments is not so difficult with CSS. Obviously, the first thing we need is a semantical HTML structure to work with. Without semantics, it's more difficult for CSS to do its job. Let's say that we want a series of blog comments with avatars, author link, dates and, of course, the comment itself. Here's a suitable HTML structure:

<ul id="comments">
 
 <li>
  
  <div class="comment-meta" id="author-1">
   
   <span class="author"><a href="#">John Doe</a></span>
   <span class="date-time">2010-12-6 18:46:55</span>
   
   
  </div>
  
  <blockquote>
   
   <p>...</p>
   
  </blockquote>
  
  
 </li>
 
 <li>
  
  <div class="comment-meta" id="author-2">
   
   <span class="author"><a href="#">Jack Smith</a></span>
   <span class="date-time">2010-12-6 18:40:02</span>
   
   
  </div>
  
  <blockquote>
   
   <p>...</p>
   
   <p>...</p>
   
  </blockquote>
  
  
 </li>
 
 <!-- more comments -->
 
</ul>

So we have an unordered list with a series of items that contain our comments. But here a heated debate may arise: is it better to use an unordered list of an ordered list? From a CSS perspective there's no much difference, but if you want to stick more to semantics, then it's better to use an ordered list. As you can see, we have two types of elements inside each list item:

1. a div element containing the author and the date of the comment
2. a blockquote element with the actual contents of each comment.

Now it's time to apply our styles. First of all, we need to give some basic styles to our list and its list items:

#comments {
  
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  font-size: 1.3em;
  
}
 
#comments li {
  
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
  
}

height: 100% is used here to provide some kind of fallback mechanism for IE 6 and 7. It's perfectly useless in all other browsers, so you can skip it. Done that, we can move on and apply some CSS rules to our metadata element:

#comments li div.comment-meta {
  
  height: 48px;
  padding-bottom: 0.4em;
  padding-left: 55px;
  overflow: hidden;
  
 }
 
 #comments li div#author-1 {
  
  background: url(blog-comments/avatar1.png) no-repeat 0 0;
  
 }
 
 #comments li div#author-2 {
  
  background: url(blog-comments/avatar2.png) no-repeat 0 0;
  
 }
 
 #comments li div.comment-meta span.author {
  
  float: left;
  height: 48px;
  line-height: 48px;
  
 }
 
 #comments li div.comment-meta span.date-time {
  
  float: right;
  height: 48px;
  line-height: 48px;
  font-style: italic;
  
 }

The first rule applies some styles for defining an height (used for displaying avatars as background images) and a basic mechanism for containing floats. I said "floats" because the author's link and the date will be left- and right-floated, respectively. Note that since our avatars are images with their dimensions equal to 48 x 48 pixels, we need:

1. a consistent left padding on our metadata element
2. an height which equals the line height of each child element to vertically align the text of both elements.

Time to move on. Now we have to stylize the main contents of our comments:

#comments li blockquote {
  
  margin: 0;
  padding: 0.5em 0.5em 0.5em 55px;
  background: #eee url(blog-comments/comment.png) no-repeat 5px 50%;
  border: 1px solid #888;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 3px 3px 3px #ccc;
  -webkit-box-shadow: 3px 3px 3px #ccc;
  box-shadow: 3px 3px 3px #ccc;
  line-height: 1.5;
  
 }
 
 #comments li blockquote p:first-line {
  
  text-transform: uppercase;
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.1em;
  
 }

On each blockquote element we've added a vertically centered background image, plus some rounded borders and a box shadow using the related CSS3 properties. Note also that we've used the :first-line pseudo-element to stylize the very first line of each paragraph. You can see this demo here.