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:
- <q>Hey, it's a quote.</q>
- <q>Hey, let's make a <q>quote</q> inside a quote.</q>
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:
- q{
- quotes: "«" "»" "‹" "›";
- }
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.