Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Blockquote Rhythm Styler

Solution: Blockquote Rhythm Styler

Let’s set up a vertical rhythm for paragraphs and blockquotes using a CSS variable, and add simple blockquote styling (border and padding) without disrupting the baseline grid.

We'll cover the following...

Problem description

You have paragraphs (<p>) and blockquotes (<blockquote>) in your document. Define a CSS custom property for a 1.25rem rhythm unit and apply it to the line-height and ...