How to style blockquotes and pull quotes?

To style a blockquote, set it apart from surrounding text with indentation, a left border or a subtle background, keep the font size close to body text, and add a clearly styled citation underneath. A pull quote is different: it repeats a short, striking line from the article at a larger size to catch the eye, so it gets bold display treatment, generous space and often decorative quote marks. Use the blockquote element for quoted material from another source, wrapped in a figure with a figcaption for the attribution. For pull quotes, which duplicate text already on the page, use an aside or a styled element and hide the duplicate from screen readers so it isn't read twice. Good quote styling makes the quote easy to spot without disrupting the flow of reading.

Quotes break up long text, add authority and give scanning readers a reason to stop. Styled carelessly, though, they look like ads, confuse assistive technology or interrupt the reading flow. In this article you'll learn the difference between the two types, the semantic HTML for each, several CSS patterns for blockquotes, how to build pull quotes that float beside text, how to handle quotation marks properly, and how to keep everything accessible and responsive.

Blockquotes vs Pull Quotes

The two look similar but do different jobs.

	Blockquote	Pull quote
Content	Quoted from another source	Repeated from the current article
Purpose	Present someone else's words	Draw attention, aid scanning
Length	Any length, often several sentences	Short, one or two sentences
Size	Close to body text	Noticeably larger
Semantics	blockquote, optionally with cite	aside or decorative element
Screen readers	Should be read	Usually hidden, as it duplicates content

Mixing them up causes real problems. If you mark a pull quote as a blockquote, assistive technology announces it as a quotation from elsewhere and reads the text twice. If you style a long blockquote like a pull quote, readers struggle through several lines of oversized text.

The Right HTML for a Blockquote

A blockquote with an attribution is best wrapped in a figure, because the HTML specification says attribution should sit outside the blockquote element itself:

<figure class="quote">
  <blockquote cite="https://www.w3.org/Provider/Style/URI">
    <p>Cool URIs don't change.</p>
  </blockquote>
  <figcaption>
    Tim Berners-Lee, <cite>Cool URIs don't change</cite>
  </figcaption>
</figure>

A few details worth knowing:

• The cite attribute: Holds a URL for the source. Browsers don't display it, so it's metadata rather than a visible link.
• The cite element: Marks the title of a work, such as a book, article or film. It shouldn't be used for a person's name on its own.
• Paragraphs inside: A blockquote can contain paragraphs, lists and other block content, so wrap the text in p elements.
• Short inline quotes: For a quote within a sentence, use the q element instead, which adds language-appropriate quotation marks automatically.

Styling Blockquotes With CSS

Browsers apply a default margin of 40px on each side to blockquotes. That's a reasonable start, but most designs replace it.

The Classic Left Border

This is the most familiar pattern and works well in long-form content:

.quote {
  margin: 2rem 0;
}

.quote blockquote {
  margin: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-inline-start: 4px solid #2f6fdb;
  font-style: italic;
  color: #1f2937;
}

.quote blockquote p {
  margin: 0 0 0.75rem;
}

.quote blockquote p:last-child {
  margin-bottom: 0;
}

.quote figcaption {
  margin-top: 0.75rem;
  padding-inline-start: 1.25rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.quote figcaption::before {
  content: "— ";
}

Using border-inline-start instead of border-left means the border flips to the right side automatically in right-to-left languages.

A Tinted Panel

A soft background works well for testimonials or quotes in documentation:

.quote--panel blockquote {
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: #f4f6fb;
  border-radius: 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  .quote--panel blockquote {
    background: #1d2433;
    color: #e5e7eb;
  }
}

Should Blockquotes Be Italic?

Italic is a traditional way to mark quoted text, but long passages of italic are harder to read, especially in sans-serif fonts that use a synthesised oblique. A good rule is italic for short quotes of one to three lines, and regular style with a border or background for longer ones. If you do use italic, make sure the real italic font file is loaded.

Adding Decorative Quotation Marks

Large opening quote marks are a popular flourish. Add them with a pseudo-element so they stay decorative and out of the content:

.quote--marks blockquote {
  position: relative;
  margin: 0;
  padding: 1rem 0 0 3rem;
  font-size: 1.125rem;
}

.quote--marks blockquote::before {
  content: "\201C";             /* left double quotation mark */
  position: absolute;
  inset-inline-start: 0;
  top: -0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  color: #2f6fdb;
  opacity: 0.35;
}

Use the proper typographic character, U+201C, not a straight " character. Straight quotes look like typewriter marks and are a common giveaway of unpolished typography.

Using the quotes Property

CSS has a quotes property and open-quote and close-quote values that pick the right marks for the language. This is handy for multilingual sites:

:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; }
:lang(fr) { quotes: "\00AB\202F" "\202F\00BB" "\2039\202F" "\202F\203A"; }
:lang(de) { quotes: "\201E" "\201C" "\201A" "\2018"; }

.quote--auto blockquote > p:first-child::before { content: open-quote; }
.quote--auto blockquote > p:last-child::after   { content: close-quote; }

The French values include a narrow no-break space inside the guillemets, which is the usual French convention.

Hanging the Opening Mark

When a quote starts with a quotation mark inside the text, optical alignment looks better if the mark hangs into the margin so the letters line up with the text above. Safari supports hanging-punctuation:

blockquote p {
  hanging-punctuation: first;
}

Other browsers ignore it, so it's safe as a progressive enhancement. You can read more in the guide to hanging punctuation in CSS.

Building a Pull Quote

A pull quote lifts a sentence from the article and displays it large. Because the text already appears in the body, hide it from assistive technology so it isn't read twice.

<p>
  Our team cut page weight by more than half. The surprise was that
  removing features made the product easier to sell, not harder.
</p>

<aside class="pull-quote" aria-hidden="true">
  <p>Removing features made the product easier to sell, not harder.</p>
</aside>

If the pull quote contains text that doesn't appear elsewhere, leave it visible to screen readers and remove aria-hidden. Never put links or other focusable elements inside an aria-hidden region.

Centred Pull Quote

.pull-quote {
  margin: 3rem auto;
  max-width: 32ch;
  padding-block: 1.5rem;
  border-block: 2px solid currentColor;
  text-align: center;
  color: #1e3a8a;
}

.pull-quote p {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

text-wrap: balance evens out line lengths in short multi-line text, which suits pull quotes well. Browsers that don't support it simply wrap normally.

Floated Pull Quote

On wide screens, floating the quote beside the text gives a magazine feel. On narrow screens it should fall back to full width:

.pull-quote--float {
  margin: 1rem 0 1.5rem;
  text-align: start;
  border-block: none;
  border-inline-start: 4px solid #1e3a8a;
  padding: 0 0 0 1rem;
}

@media (min-width: 60em) {
  .pull-quote--float {
    float: inline-end;
    width: 40%;
    margin: 0.5rem -4rem 1rem 2rem;
  }
}

float: inline-end respects the writing direction. The negative inline margin pulls the quote slightly into the gutter, which only works if your layout has room there, so test it at every breakpoint.

Sizing and Spacing Guidelines

Quotes work when they feel deliberate. These guidelines keep them consistent.

• Blockquote size: Same as body text or up to about 1.125 times larger. Bigger than that and long quotes become tiring.
• Pull quote size: Typically 1.5 to 2.25 times body size, with tight line height between 1.15 and 1.3.
• Length: Pull quotes should be one or two sentences, ideally under about 25 words.
• Spacing: Give both types more space above and below than a paragraph gets, around 1.5 to 2 times your paragraph spacing.
• Line length: Keep pull quotes narrow, often 20 to 35 characters per line, so they read as a single visual unit.
• Frequency: One pull quote per several screens of text is plenty. More than that turns them into noise.

Accessibility and Content Considerations

1. Use the right element: blockquote for sourced quotes, q for inline quotes, aside for pull quotes.
2. Keep attribution visible: The cite attribute is invisible to most users, so put the source in a figcaption or text.
3. Maintain contrast: Coloured or tinted quote text must still meet 4.5:1 for normal text and 3:1 for large text under WCAG.
4. Don't rely on italics alone: Combine italic with a border, indentation or background so the quote is distinct for readers who don't perceive style changes easily.
5. Avoid duplicated announcements: Hide decorative pull quotes with aria-hidden="true", and keep quotation marks added with CSS decorative rather than part of the text when possible.

---

FAQ: Blockquotes and Pull Quotes

---

Conclusion

Blockquotes and pull quotes look similar but serve different purposes. A blockquote presents someone else's words, so it should stay close to body size, sit in a figure with a visible attribution and stand apart through indentation, a border or a background. A pull quote highlights a line from your own text, so it can be large, bold and decorative, as long as it is short and hidden from assistive technology when it duplicates content.

Use proper curly quotation marks, logical properties for borders and floats, and responsive sizes with clamp(). Keep contrast high, keep pull quotes rare, and test on narrow screens. Styled this way, quotes add rhythm and authority to your pages without getting in the reader's way.