Control Your Quotes With CSS3’s Quotes Property

If you’re looking for a way to style your quotes using CSS, here’s a good one for you. Take advantage of this if you have a lot of quote elements that need to be uniform throughout your entire document or project.

To use CSS to style your quotes, make sure that your quote are within <q> tags in your HTML, like this:

Join us in our newest publication:
  1. &lt;q&gt;Hey, it's a quote.&lt;/q&gt;
  2. &lt;q&gt;Hey, let's make a &lt;q&gt;quote&lt;/q&gt; inside a quote.&lt;/q&gt;

Let’s say you want the outer quotes to be double brackets, and the inner quotes (to be applied to the quote within a quote) to be single brackets. Here’s how you’d have to define that in your CSS:

  1. q{
  3. }

The quotes property takes four values, the first two are for the outer quotes, and the second two are for the inner quotes. Your final results should look like this:

«Hey, it’s a quote.»
«Hey, let’s make a ‹quote› inside a quote.»

This property is supported on most major browsers and is great for quickly making your quote styling consistent across the board.

Share and Enjoy !

0 0