Styling an FAQ


Almost every site has some kind of FAQ page and it seems everyone does it a little differently. I've done about a half-dozen variations over the years and had designed one a few years ago using a table with a graphic for the Q and A letters. I liked the look, but wanted to get away from the tables.

After a few experimentations, I've come up with one I like using CSS for all styling and clean HTML code. It retains the large colorful Q and A letters, plus a background color for the questions. See a sample page using this method.

faq.gif

The CSS code for this:

.question {
font-weight: bold;
background-color: #ded;
padding: 0 0 .1em 0;
margin-bottom: 0;
margin-left: 1.5em;
}
.answer {
margin-top: 0;
margin-left: 1.5em;
}
.question span {
background-color: #fff;
padding: .2em .5em .2em .2em;
font-size: 150%;
color: #f00;
margin-left: -1.5em;
}
.answer span {
font-weight: bold;
padding: 0 .5em 0 .2em;
font-size: 150%;
color: #008000;
margin-left: -1.5em;
}

And the HTML:

<p class="question"><span>Q</span>How?</p>
<p class="answer"><span>A</span>This</p>
Posted at October 18, 2005 08:13 PM