CSS 2 Practice

Use It Yourself

Start by changing working code, then rebuild familiar patterns, then finish with a mini website. Use the hints only when you need them.

Warm-up

1. Fix the cramped card

The card works, but the text is stuck against the border. Add one CSS property to give it breathing room.

Add space inside

CSS 2 · padding

Goal: make the content sit comfortably inside the card.

Starter code

<style>
.card {
    width: 260px;
    border: 3px solid navy;
    border-radius: 15px;

    /* ADD CSS 2 HERE */
}
</style>

<div class="card">
    <h2>Dino Runner</h2>
    <p>Jump over the obstacles!</p>
    <button>PLAY</button>
</div>

ResultMake it less cramped

Need a hint?

Use padding. Try 20px.

Spacing

2. Separate the cards

These cards need space between them. Add margin to the card class.

Space outside

CSS 2 · margin

Starter code

<style>
.card {
    width: 220px;
    padding: 18px;
    border: 3px solid navy;
    border-radius: 15px;

    /* ADD MARGIN */
}
</style>

<div class="card"><h2>Game One</h2><p>My first game.</p></div>
<div class="card"><h2>Game Two</h2><p>My next game.</p></div>

ResultSeparate the boxes

Need a hint?

margin: 20px; adds outside space on every side.

Rebuild

3. Make the navbar

The HTML is ready. Rebuild the simple navbar from the lesson.

Recognisable website structure

HTML 2 + CSS 2

Remove the body margin.
Give the nav a dark background and padding.
Center the links.
Make the links white, spaced apart and remove the underline.

Starter code

<style>
body {
    font-family: Arial;
    /* YOUR CSS */
}

nav {
    /* YOUR CSS */
}

.nav-link {
    /* YOUR CSS */
}
</style>

<nav>
    <a class="nav-link" href="#">HOME</a>
    <a class="nav-link" href="#">GAMES</a>
    <a class="nav-link" href="#">ABOUT</a>
</nav>

<h1>My Game Website</h1>

ResultMake it look like a navbar

Show useful properties

margin: 0; · background-color · padding · text-align: center · color · margin · text-decoration: none

Replicate

4. Rebuild the Road Racer card

Use the image, heading, paragraph and button. Your version does not have to be pixel-perfect. It should look clean and intentional.

Game card

HTML 2 + CSS 1–2

Center the card on the page.
Add padding inside.
Make the image fill the card.
Center the content.
Style the PLAY button.

Starter code

<style>
body {
    background-color: #eef2ff;
    font-family: Arial;
}

.game-card {
    width: 300px;
    /* FINISH THE CARD */
}

.game-image {
    /* MAKE THE IMAGE FIT */
}

.game-button {
    /* STYLE THE BUTTON */
}
</style>

<div class="game-card">
    <img class="game-image" src="../../demos/road-racer/thumbnail.jpg">
    <h2>Road Racer</h2>
    <p>Dodge the traffic and beat your score!</p>
    <button class="game-button">PLAY</button>
</div>

ResultBuild a clean card

Need a starting point?

Card: margin: 30px auto, padding: 18px, text-align: center, border + radius. Image: width: 100%. Button: reuse your CSS 1 button skills.

Shortcuts

5. Read the shorthand

Say what each line means before opening the answer.

Clockwise challenge

Top → Right → Bottom → Left

padding: 10px 20px;

Top/bottom = 10px. Left/right = 20px.

margin: 10px 20px 30px;

Top = 10px. Left/right = 20px. Bottom = 30px.

padding: 10px 20px 30px 40px;

Top 10px → Right 20px → Bottom 30px → Left 40px.

Final challenge

6. Build a mini games website

This is the important one. Combine the structures you already know instead of following one finished answer.

My Games

CSS 2 CHECKPOINT

Build a page with a navbar, heading, short intro, and one Road Racer card. If you finish quickly, duplicate the card and use ../images/8.png, 9.png or another image.

Use padding inside the card.
Use margin for outside spacing.
Use margin: auto to center the card.
Use text-align where appropriate.
Remove navbar link underlines.
Style the button using CSS 1.

Want a starter structure?

<nav>...links...</nav>
<h1>My Games</h1>
<p>...</p>
<div class="game-card">...</div>

CSS 2 memory check

paddingspace inside

marginspace outside

margin: autocenter the box

text-align: centercenter what's inside