"Q" and "A" Formatting with CSS

When I was coding my Q and A page, I had started using an unordered list to organize the question and answer detail. At first I wanted to have the letters Q and A to signify the difference between the lines. I also thought different text styles and indentation would help distinguish the difference too.

It looked like I was going to have to use two classes to define the CSS presentation side and alternate those throughout the unordered list. Nothing wrong with it, but I felt like it was starting to make the code look messy.

After a bit of searching in Google I found several people talking about using this little gem, Definition Lists.

Definition Lists consist of three elements:

• DL - A container element for the DT and DD elements.
• DT - Element for the term being defined
• DD - Element for the definition of the term.
  

This is perfect. I have a container to surround each Q and A segment, and I have built in elements to separate the CSS presentation for each question and answer.

You can go here to see how I used this method.

http://www.webdebris.com/qanda.htm