CSS Quickies: the quotes property and the q HTML tag

What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments! I answer all the questions.

Lets talk about quotes in CSS

Did you know that you can set costume quotes with CSS?

Your first question maybe but why do I need custom quotes in the first place. Let me give you some examples.

• the <q> tag will not be selected if a user wants to copy. This can help in some scenarios where you want the user to select something and paste it into a terminal.
• You need a specific type of quote. There are single quotes, double quotes, angle quotes, double angle quotes, high italic quotes, and many more.
• You don't need quotes but want to prepend and append custom text or emojis.

The <q> tag

If you want to add quotes around any other HTML, you can do this by surrounding them with the tag.

 <q>this will be in quotes.</q>

This will produce the following output: "this will be in quotes." But what if you want to have \' as the quote or you maybe need << >>.

the quotes property in CSS

To change the default behavior of the quotes, you will need to set the opening and closing quote. This is done like this:

q {
  quotes: "<" ">"
}

 <q>this will be in quotes.</q>

This will produce almost the same output as the one before, but now the text will be wrapped in <>. This is how it will look like:

Second level quotes

Sometimes you will have quotes inside of quotes. This can happen if you quoting someone and that someone is already quoting someone else. This can gove even levels deeper, but CSS does not support this. So here is an example:

<q>First Level quotes <q>Second Level quotes</q></q>

The output will look like this: "First Level quotes 'Second Level quotes'". Now if you want to customize this, you simply need to add to more parameters to the quotes property.

q {
  quotes: "<" ">" "<<" ">>"
}

<q>First Level quotes <q>Second Level quotes</q></q>

Now the output will look like this: <>>. That was also easy right?

What if you want to have custom quotes around other elements then the tag?

Custom quotes around any HTML tag

Since custom quotes can be any string you can think of it can also contain emojis 😀. You now want to have an emoji before or after your span element with the class "custom-quotes-element". The beginning is easy; it starts like always.

.custom-quotes-element {
  quotes:'🙌' '🙌';
}

If you applied it only like that, it would not work. You need to set special value for the content property in the pseudo-elements before and after.

.custom-quotes:before {
  content: open-quote;
}

.custom-quotes:after {
  content: close-quote;
}

The code should be pretty easy to understand. In the before case, we need to set content to open-quote. This will indicate that you want to have the first or third string from thequotesproperty here and for theafterpseudo-element that you want to have the string as the content from the second and fourth string from thequotes` property. That's it!

I have created a small demo hero on codepen.

👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

Comments

[Tim Torres]

There are soo many typos in this it makes it confusing to follow in places. Would suggest finding a friend to proofread before posting.
But interesting post! Did not know about this tag's uses before.

[Spamzilla]

Tim, if you can't help then don't hurt. Who cares? It's not difficult to follow, you're just being pedantic and bringing net negative.

[Tim Torres]

Constructive feedback followed by positive feedback is neither hurting nor net negative... If something can be done to improve the quality of your work then hopefully you should be open to receiving it as long as it's done in a constructive way. He did receive it well which I all I could ask for.

English doesn't have to be perfect but fixing typos is a low-hanging fruit that increases the quality of your publication and reach/attract more people.

That's all I'm going to say but overall I hope that's a net positive and that we can find a thread if agreement somewhere in there.

[Roland Csibrei]

I absolutely agree. Thanks!

[Michael "lampe" Lazarski]

I was usunig gramarly pro and I hoped that it would catch more of them 😒

[Adam Crockett 🌀]

Do not worry, I wrote all of my posts on my phone, I have 5000 followers who also don't mind my grammer and typos. So it's a reasonable assumption that you don't have anything to worry about either.

[Roland Csibrei]

I wud suggezt u 2 not 2 b a pedant ass tho... Lol. How is it possible, that I didn't find it hard to follow? Don't want to be offending, just joking, however to be honest, your kind of ppl is pain in my ass. Have a nice day!

[Louise]

I didn’t realise there was a q tag. I usually use blockquote and cite tags.