AtoZ CSS Screencast: The CSS Quotes Property

Single and double quotes appear frequently when writing code.

However, when displaying any quoted text like the q element or when using apostrophes, we should use smart quotes.

These are often added by the browser, but we can control their appearance and the choice of character from CSS.

In this episode about we’ll learn all about:

• the difference between dumb quotes and smart quotes
• the different styles of quotes used internationally
• and the somewhat under-used CSS quotes property

Smart or Dumb?

When we create a string of text in a code editor, we use “dumb quotes”.

These are either ‘single quotes’ or “double quotes” and are straight. The same character is used at the beginning of the string as at the end.

Smart quotes are the correct typographic choice for any quotes or apostrophes that are displayed in the browser. They are often curly or sloped and the start and end quotes are often different.

If your document uses the utf-8 character set you can add smart quotes directly into the HTML with the following keyboard shortcuts on a Mac:

‘ ⌥+]
’ ⌥+⇧+]
“ ⌥+[
” ⌥+⇧+[

And on Windows:

‘ alt+0145
’ alt+0146
“ alt+0147
” alt+0148

Alternatively, the character entities can be used:

‘ ‘
’ ’
“ “
” ”

Continue reading %AtoZ CSS Screencast: The CSS Quotes Property%

by Guy Routledge via SitePoint