The Voices

The New Skill: CSS Pull Quotes

Stage 4 introduces the unit's central new concept: the editorial pull quote, built with the HTML <blockquote> element and CSS pseudo-elements.

A pull quote is a short, highlighted excerpt from a text. You see them in magazine layouts, news articles, and documentary websites: a large quotation mark, the quoted text in italic or slightly larger type, and a source attribution below. The whole effect signals "this is a direct statement from someone who was there." It gives the reader a different relationship to the content than a summary paragraph does.

Here is the key idea: the large decorative opening quotation mark is not a separate HTML element. It is not an image file. It is generated entirely by CSS using the ::before pseudo-element and the content property. One rule creates it. You can control its size, color, position, and font without touching the HTML at all.

About These Voices

The three quotes in your code are documented, verifiable statements from leaders who negotiated and resisted during the Reservation System era. Using words from people who lived through this period is not decoration. It is a sourcing practice: primary evidence, not summary.

New CSS: The Pull Quote

This is the new skill. Read these CSS rules carefully and look at what each one does in the preview.

The blockquote container

• position: relative: required. The ::before pseudo-element will use position: absolute, which places it relative to the nearest positioned ancestor. Without this, the quotation mark would float relative to the whole page instead of the blockquote.
• padding: 48px 40px 36px: more padding on top than bottom. The large quotation mark generated by ::before sits in that extra top space. Without the extra 48px at the top, the quotation mark would overlap the first line of the quote text.
• border-left: 3px solid var(--gold): the accent stripe. Left-border blockquotes are the most common editorial pull quote pattern. The stripe signals "this is a quotation" without requiring any text label. Your reader understands this convention immediately.
• border-radius: 0 12px 12px 0: rounds only the right side. The left side is flush against the border stripe. This is intentional: the left edge and the border stripe read as one unified element. Rounding the left side would visually separate them.

The decorative quotation mark: ::before

• content: '\201C': the Unicode character for an opening double quotation mark (“). The backslash-number format is how you reference Unicode characters in CSS. '\201C' is U+201C. This is the only place the quotation mark exists in the entire codebase.
• position: absolute; top: 8px; left: 32px: places the character 8px from the top and 32px from the left of the blockquote container. Because the blockquote has position: relative, these coordinates are relative to it, not the page.
• font-size: 6rem: very large. At 6rem, the opening quote is roughly 96px tall and functions as a visual anchor for the whole block. It is not meant to be read as text. It is a typographic decoration that signals "quotation" before the reader processes any words.
• font-family: 'Playfair Display': Playfair Display's quotation marks have the sweeping, elegant curves of traditional editorial typography. Using the same serif font for the decoration as for the section titles creates visual harmony across the page.
• pointer-events: none: prevents the large character from accidentally intercepting mouse clicks. Without this, hovering near the top of the blockquote would select the quotation mark text instead of allowing clicks to pass through to the content below.

Quote text, citation, and grid layout

• font-style: italic on .pull-quote-text: the universal typographic signal for a quotation. Italic text has indicated "someone said this" in printed documents for centuries.
• <cite> is a semantic HTML element specifically for attribution. Using <cite> rather than a generic <span> tells screen readers and search engines that this is the source of the quotation, not just styled text. font-style: normal overrides the browser's default italic rendering for <cite>, which would conflict with the italic quote text.
• display: flex; flex-direction: column; gap: 32px: stacks the three pull quotes vertically with 32px between them. The quotes are read in sequence. A column layout supports that reading order.

Your Task

The three pull quotes are pre-built in the starter code, each with a documented quote, speaker name, Nation, and a brief context note. Your job in this stage is to add a fourth pull quote: a statement from a leader who matters to your own region or community. Find a documented, verifiable quote from a Tribal leader who lived during the 1850-1887 era. Add it in the space marked <!-- ADD YOUR QUOTE HERE -->.

• The quote must be verifiable: you need a source you can cite
• The speaker must be a Tribal leader or community voice from the 1850-1887 era
• Preference for leaders connected to your own region (MN, ND, SD, or a nation meaningful to you)
• Use the same <blockquote class="pull-quote"> structure as the other three quotes

Why This Pattern Matters

The pull quote is one of the most widely used patterns in documentary web design precisely because it does something a paragraph cannot: it shifts the reader's relationship to the content. When you read a summary paragraph, you are reading someone's interpretation of events. When you read a pull quote, you are in direct contact with a primary source. The large quotation mark signals that relationship before the reader processes a single word of the quote.

Centering the words of Tribal leaders in a section called "The Voices" is also a structural argument: the people most affected by reservation policy are not objects to be described. They observed what was happening, named it clearly, and documented it. Their words belong in this research, not in a footnote.