Web Development Recipes, 2nd Edition

Recipe 2

Styling Stand-Alone Quotes with CSS

Problem

Quotations from experts and praise from customers carry a lot of weight, so we often want to draw attention to these quotations visually. Sometimes we offset the margins a bit, increase the font size, or use large curly quotation marks to make the quotation stand out. On a website, we want to do that in a simple and repeatable fashion while keeping the presentation of the quotation separate from the markup.

Ingredient

• A web browser that supports HTML5 and CSS3

Solution

We typically use CSS to separate our presentation from the content, and styling quotations shouldn’t be any different. Modern browsers support some more advanced properties we can use to make our quotations stand out, without ...