liveBook · Manning

Quotes property

As explained in Tiny CSS Projects

The CSS quotes property specifies the quotation marks used by generated content for nested quotations.

The CSS quotes property defines the quotation-mark symbols used for generated content, making it possible to match quotation styles to different languages. section 4.1.6

Add quotation marks to a blockquote

Apply open-quote and close-quote through the blockquote's ::before and ::after pseudo-elements:\n\nblockquote::before { content: open-quote; }\nblockquote::after { content: close-quote; }\n\nThe quotes property defines the symbols, while content inserts them. Without an explicit quotes declaration, the browser follows the document language; an en-US document renders “ and ” by default. French quotation styles can instead use « and ». section 4.1.6

Listing 4.7 Styling the blockquote
blockquote {
  font: 1.8rem/1.25 'Oswald', sans-serif;
  margin: 1.5rem 2rem;
}
blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }

View the complete blockquote styling, including the pseudo-elements that insert the opening and closing quotation marks. section 4.1.6

How Tiny CSS Projects covers it

How deep it goes
Defines custom opening and closing symbols, then explains that pseudo-elements and content are still required to render them.
Examples
Uses a newspaper blockquote and contrasts American English “ ” with French « » quotation marks.
What it assumes
Assumes an HTML blockquote and basic CSS, while demonstrating pseudo-elements and generated content in context.
What you can do after
Apply it via CSS by defining quotation symbols and inserting them with open-quote and close-quote.
How it connects
Connects quotation marks with the content property, ::before and ::after pseudo-elements, blockquote, and the HTML lang attribute.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.