CSS 1 Practice

Can you style it?

Match the targets, fix broken CSS and create your own designs. If you already know CSS, start with the Fast Track Check.

New to CSS? Skip the test and start at Exercise 1. Use the reference whenever you need it.

Already know some CSS? Do the Fast Track Check first. If it feels easy, move quickly to the bonus challenges.

CSS 1 Quick Reference / Button Template

button every button

#play one ID

.game-button a class

color text colour

background-color background

width how wide

height how tall

border border shortcut

border-radius round corners

font-size text size

font-weight boldness

font-family font

.game-button {

    /* COLORS */
    color: white;
    background-color: #5b45f0;

    /* SIZE */
    width: 200px;
    height: 55px;

    /* BORDER */
    border: none;
    border-radius: 14px;

    /* TEXT */
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

Fast Track

Quick CSS 1 Skills Check

Experienced coder? Try these without opening the reference. This is not a test for marks. It is just a fast way to see what you already know.

1. Tag selector Make every button have white text.

2. ID selector Make only id="play" green.

3. Class selector Make every class="danger" red.

4. Button styling Make PLAY 180px × 50px, bold, rounded, with no border.

Your assessment code

Result Can you do all 4?

Fast-track rule: If you can do all four comfortably without the reference, skim the core exercises and go to the Bonus Challenges. If one or two feel uncertain, do the matching exercises below.

Show expected CSS

button {
    color: white;
}

#play {
    background-color: green;
    width: 180px;
    height: 50px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
}

.danger {
    background-color: red;
}

Core Practice

Build, match and fix

Try the target first. Open a hint only if you actually need it.

1 · Replicate

Build the game button

The full CSS template is already there. Change the values until your button matches the target.

Target Copy the design

Your code

Start with the obvious differences: colour, size and rounded corners. Then fix the text.

Make it easier

Try these groups one at a time: COLORS → SIZE → BORDER → TEXT.

2 · Replicate a Different Style

Make a shop button

Same properties, very different design.

Target Yellow pill

Your code

The important clue is the shape. A pill button needs a large border-radius.

3 · Border Challenge

Build an outline button

This time the border is part of the design.

Target Blue outline

Your code

Change the border thickness, border colour, text colour, corner radius and font weight.

Border reminder

border: 3px solid blue; means width + style + colour.

4 · Selectors

Style three buttons differently

Use a tag selector, an ID and a class in the same mini page.

Your code

Result Three selector types

You should use these three selectors somewhere: button, #play, .danger.

5 · Debug

Fix the broken button

The colours are right, but several values make the button look ridiculous.

Target

Broken CSS

Fix at least four bad values.

6 · Two Buttons

Make primary and secondary actions

Real pages often use one strong button and one quieter button.

Target Two related styles

Your code

This is harder because you must build both styles yourself. Copy the reference template if you need it.

7 · Shape Lab

Rectangle → circle → pill

Use the same four CSS properties to make completely different shapes.

Targets

Your code

Only use width, height, background-color and border-radius.

8 · Create

Design your own game menu

No exact target. Make three buttons that clearly belong to the same game.

Your code

Your design Make it yours

Change at least five CSS values. Keep the three buttons looking like one matching set.

Bonus · Experienced Coders

Already comfortable? Push it further.

These use the same CSS 1 skills, but give you less starter code and more design decisions.

Bonus A

Three-state menu

Create PLAY, SETTINGS and DELETE. Use a shared class, then an ID or extra class to make one button special.

Bonus B

Copy a real interface

Choose a button you recognise from a website or app and recreate its basic colours, size, border and text.

Bonus C

One template, 4 designs

Copy the same CSS template four times and make four buttons that look completely different.

Bonus A · Build

Shared style + special buttons

Use one class for the shared design, then make PLAY and DELETE different without rewriting everything.

Your code

Result No exact answer

Goal: avoid repeating the whole style three times. Use .menu-button for shared CSS, then #play and .danger for differences.

Bonus B · Design

Four buttons from one template

Make four clearly different designs. You may only use CSS 1 properties.

Your code

Result How different can they look?

Try to make one solid button, one outline button, one pill button and one bold warning button.

CSS 1 complete

If you can use tag, ID and class selectors and confidently edit a button template, you have the CSS 1 skills we need.