Card Typography

Review: Image Boxes Are In!

Your cards now have image boxes at the top. But the text inside - the <h2> card titles and the <p> descriptions - could use some polish.

In this stage, you'll use CSS to style the h2 and p elements inside your cards: controlling color, size, line spacing, and emphasis.

Style the h2 Card Headings

Each card has an <h2> as its title. Right now it uses the browser's default style. Let's give it a color that matches your header.

• color: #50586C - the same dark blue-gray you already used for the header background. Repeating a color ties different parts of a design together - it signals to the viewer that the heading and the header are part of the same visual system. This is called visual unity, and it's a core principle of good design.
• font-size: 20px - slightly smaller than the browser's h2 default (around 24px), which keeps the card headings prominent but not competing with the big h1 title in the header. Size hierarchy matters: the most important heading should always be the biggest.
• margin-top: 0 - browsers automatically add extra space above all heading elements. Since the card heading already sits below an image box, that extra gap creates too much distance. Setting it to 0 pulls the heading closer to the image, so the card feels tight and intentional.

Style the p Paragraphs

The <p> text inside each card should be easy to read. Let's add a softer color and control the line spacing.

Each property does a specific job here:

• color: #555 - a medium gray, softer than pure black (#000). Pure black on white can feel harsh on a screen. A slightly lighter gray reduces contrast just enough to make long text more comfortable to read without losing legibility.
• font-size: 15px - slightly below the browser default of 16px, keeping paragraph text smaller than the h2 headings and reinforcing the size hierarchy inside each card.
• line-height: 1.6 - the star of this rule. Let's look at why it matters:

Add Your Real Content

Now that the typography looks great, it's time to fill in your actual words. Replace the placeholder text in each card's <p> tag with your real thoughts.

These are just examples - use your own words. What do you actually want to build?

Add a Card Footer with Your Name

Let's add a small author line at the bottom of each card using a <p> with a class. Add this inside each card, after the description paragraph:

• font-size: 13px - smaller than the card's paragraph text (15px), which signals that this line is a secondary detail - a signature - not part of the main content.
• color: #ec65f8 - the same pink-purple you used for the h4 subtitle in your header. Repeating this accent color in the card author line creates another moment of visual unity across the page.
• font-style: italic - tilts the text slightly, a classic convention for a byline or attribution. It visually separates the signature from the main paragraph without needing extra spacing.
• margin-top: 12px - adds a small gap above the author line so it doesn't crowd the paragraph text above it. Just enough breathing room to read as a distinct element.

Now each card is signed by you - this profile page is yours.

Make It Your Own!

Now experiment with your typography:

• Try font-size: 22px on h2 - does it feel better or worse?
• Try line-height: 1.8 on p - very airy and open
• Try color: #2D5016 (forest green) or your own color for h2
• Make sure all three cards have your real content - not placeholder text!