YOUR CHALLENGE ROUTE

From your first stylesheet to a consistent website

Work in your editor and browser. Start with the foundation challenges, then move on to repair tasks and the final project. You can spread the work across several lessons.

Use fictional details and images you own or are allowed to publish. Use your existing HTML pages or create a simple fictional club page. Keep semantic structure and focus on CSS foundations; advanced layout comes next.

Your checks last while this page is open. They record your self-review, not an automatic code score.

CHALLENGE 01 | FOUNDATION

One stylesheet, two pages

Use 03.1 | External stylesheets

Create css/styles.css inside your club project. Link it from index.html and projects.html, which should both sit beside the css folder. Give body text a readable font stack and give main headings a shared colour.

Success criteria

• Each page links the same external stylesheet from head.
• The path matches the folder structure.
• The CSS file contains no HTML style tags.
• Changing the heading colour once updates both pages after saving and refreshing.

<!-- In the head of both HTML pages -->
<link rel="stylesheet" href="css/styles.css">

/* css/styles.css */
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #24363a;
  line-height: 1.6;
}
h1 {
  color: #176c65;
}

CHALLENGE 02 | BUILD

Choose selectors that match your intention

Use 03.1 | Classes, IDs and descendants

Add two project articles using class="project-card". Give one paragraph in each article class="notice". Add a separate joining section with id="join". Style all cards, notice paragraphs inside cards and the single joining section.

Success criteria

• Reusable cards share a class rather than a repeated id.
• The joining id is unique.
• Use .project-card to target cards.
• Use .project-card p.notice to target only the specified paragraphs inside cards.
• A notice paragraph outside a card is unaffected by that descendant rule.

.project-card {
  border: 2px solid #24988f;
  padding: 16px;
}
.project-card p.notice {
  background-color: #eaf7f5;
  font-weight: 700;
}
#join {
  padding: 20px;
}

CHALLENGE 03 | TRACE

Predict the winning colour

Use 03.2 | Specificity and source order

Assume these are normal, unlayered author declarations and no other colour rules apply. Predict the paragraph’s colour. Then remove the ID rule and predict again. Finally remove the class from the paragraph and predict once more.

<p id="announcement" class="notice">Friday meeting</p>

p { color: green; }
.notice { color: purple; }
#announcement { color: navy; }
p { color: maroon; }

Success criteria

• Explain the first result using specificity.
• Explain why the later p rule does not beat the class rule.
• Explain the final result using a source-order tie.
• Confirm each prediction in the browser.

CHALLENGE 04 | INVESTIGATE

Separate inheritance from direct styling

Use 03.2 | Inheritance

Predict which styles the child paragraph receives in the example below. Then remove its direct colour declaration and explain the change.

<section class="club-info">
  <p>Our next project is a delivery robot.</p>
</section>

.club-info {
  color: green;
  font-family: Arial, sans-serif;
  border: 2px solid green;
  padding: 20px;
}
p { color: purple; }

Success criteria

• Identify the paragraph’s original colour.
• Explain which font it inherits.
• Explain why it does not automatically get its own border or padding.
• Describe the result after removing the direct colour declaration.

CHALLENGE 05 | DESIGN

Create a readable text system

Use 03.3 | Typography and colour

Style your club’s main text, headings, links and short labels. Choose a font stack, relative sizes, comfortable line height and suitable foreground/background pairs. Test with enlarged text.

Success criteria

• Use a generic font-family fallback.
• Use a consistent heading scale and readable body text.
• Keep links visibly identifiable and focus indicators intact.
• Reserve uppercase for short labels rather than long paragraphs.
• Check actual text/background contrast with a tool.
• Explain what happens to 2rem when the root font size changes.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #24363a;
  background-color: #ffffff;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
a { color: #176c65; text-decoration: underline; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.04em; }

CHALLENGE 06 | CALCULATE

Calculate the real width

Use 03.4 | Content-box and border-box

A card has width: 280px, padding: 18px, border: 3px solid and margin: 12px on every side. Calculate the content width, border-box width and horizontal sum including margins for both sizing models.

Success criteria

• Show the left and right padding and border separately or as doubled values.
• Keep margin outside the specified width in both models.
• Explain which width stays at 280px in each model.
• Check your results using developer tools.

content-box:
Content width = 280px
Border-box width = 280 + 18 + 18 + 3 + 3 = 322px
Sum with margins = 322 + 12 + 12 = 346px

border-box:
Border-box width = 280px
Content width = 280 - 18 - 18 - 3 - 3 = 238px
Sum with margins = 280 + 12 + 12 = 304px

CHALLENGE 07 | DEBUG

Repair a card that overflows and clips text

Use 03.3 and 03.4 | Readability and sizing

Assume the card sits inside a narrow container and uses content-box sizing. Explain the risks in this rule, then replace it with an adaptable version.

.project-card {
  width: 100%;
  padding: 30px;
  border: 4px solid #24988f;
  height: 100px;
  overflow: hidden;
  font-size: 10px;
}

Success criteria

• Keep padding and border within the full width.
• Allow the card to grow with its content.
• Remove clipping caused by an unnecessary fixed height and hidden overflow.
• Use readable text sizing.
• Add consistent external spacing and a suitable width cap.

.project-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  padding: 20px;
  border: 2px solid #24988f;
  margin: 24px auto;
  font-size: 1rem;
  line-height: 1.6;
}

CHALLENGE 08 | STRETCH

Refine a consistent three-page website

Combine 03.1 to 03.4

Apply one shared stylesheet to your three-page club website. Create a consistent visual identity using the foundations from this section. Keep the layout simple; Flexbox and Grid come next.

Success criteria

• Every page links the same CSS file correctly.
• Shared components use reusable classes.
• Ids remain unique and unnecessary overrides are removed.
• Body text, headings and links have consistent readable styles.
• Cards use deliberate padding, borders and margins.
• Sizing works on narrow screens and with enlarged text.
• Keyboard focus remains visible.
• You can explain one cascade decision and one width calculation.

*, *::before, *::after {
  box-sizing: border-box;
}
.project-card {
  width: 100%;
  max-width: 640px;
  margin: 24px auto;
  padding: 20px;
  border: 2px solid #24988f;
}

REFLECT AND CONTINUE

Explain your CSS decisions

Record one selector choice, one cascade result, one typography improvement and one box-model calculation. Describe a change you made after testing.

Keep your files. Next, use Flexbox and Grid to arrange the components you have styled.