Did you know that you can customize quotes in CSS? It’s actually a fairly easy and straightforward process. Instead of using the traditional “” quotation marks, you can pretty much use just about any symbol you can think of, and you can easily have this symbol be the uniform quotation mark throughout your website, pages, or projects. All you need is a little HTML and CSS.
To start, it’s important that we use the <q> tag in our HTML. Instead of wrapping quotes in classic “” quotation marks in the HTML, wrap them in <q> tags. So when you have a quote, you can wrap it in <q> tags like the one in the example below:
<q>I am a quotation!</q> <q>I am also a quotation.</q>
It’s important when using this method that you wrap all of your quotes in q tags rather than using quotation marks so that your quotes are uniform throughout the entire page/project.
Now all you need to do is define what the quotation marks should be in the CSS. You can insert just about any symbol or unicode characters you can find. Take a look at the CSS snippet below to see how it should be done:
q{
quotes: "\00ab" "\00bb";
}
The code above gives you those sideways quotation marks — the ones that look like double pointing arrows: « and » — that will now wrap your quote.
What’s cool about the property is that you can also use it to define the quotation marks of a quote within a quote. Typically, those are the single ‘ quotation marks, but with the quotes property, they can be anything you want. If you’ve got a quote within a quote, your HTML should look like this:
<q>I am a quote <q>quote</q> within a quote</q>
So basically, just another set of <q> tags within an already existing set of <q> tags.
To define what you’d like the inner quotation marks to look like, you just need to add two more symbols on to the end of your already existing quotes values, like this:
q{
quotes: "\00ab" "\00bb" "\2039" "\203A";
}
Now, the last two values in that property define the left and the right inner quotation mark symbols, which are ‹ and ›, respectively.