CSS 2

Give Your Website Space

In HTML 2 you built cards, images and links. Now we make them feel like a real website: add breathing room, center boxes, build a navbar and make an image card look clean.

1 · Padding 2 · Margin 3 · Shortcuts 4 · Centering 5 · % Width 6 · Navbar 7 · Image Card 8 · Templates Bonus · Effects

CSS 2.1

1. Padding = Space Inside

Start with the card you already know. The text is too close to the border. padding pushes the content away from the inside edge.

Code

<!DOCTYPE html>
<html>
<head>
<style>
.card {
    width: 260px;
    border: 3px solid navy;
    border-radius: 15px;
    padding: 20px;
}
</style>
</head>
<body>

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

</body>
</html>

ResultChange the padding

Rememberpadding = space between the content and its own edge.

Try it

Change 20px to 0px, 10px and 40px. Which looks best?

CSS 2.2

2. Margin = Space Outside

Padding makes room inside a card. Margin makes room around it, separating the card from other things.

Code

<style>
.card {
    width: 220px;
    padding: 18px;
    margin: 20px;

    border: 3px solid navy;
    border-radius: 15px;
}
</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>

ResultMargin separates the cards

Paddingpadding: 20px;Space inside the element.

Marginmargin: 20px;Space outside the element.

Card rulepadding + marginCards often need both.

CSS 2.3

3. Choose the Side

You can change one side at a time.

Padding sides

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Margin sides

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

CSS 2.4

4. The Padding & Margin Shortcut

CSS lets you set all four sides in one line. The order goes clockwise: Top → Right → Bottom → Left.

BOX TOP · 10 RIGHT · 20 BOTTOM · 30 LEFT · 40

Shortcut patterns

padding: 20px;
/* all 4 sides */

padding: 10px 20px;
/* top/bottom | left/right */

padding: 10px 20px 30px;
/* top | left/right | bottom */

padding: 10px 20px 30px 40px;
/* top | right | bottom | left */

One pattern, twiceThe exact same shortcut works for margin.

CSS 2.5

5. Center the Box vs Center the Text

These look similar, but they do different jobs.

Code

<style>
.card {
    width: 300px;
    margin: 20px auto;
    padding: 20px;

    text-align: center;

    border: 3px solid navy;
    border-radius: 15px;
}
</style>

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

ResultTwo kinds of centering

Center the boxmargin: auto;Centers a box such as a card.

Center what's insidetext-align: center;Centers text and other inline content inside.

Remove outside spacemargin: 0;Does not center. It removes margin.

Remember the differencemargin: auto centers the card itself. text-align: center centers the text and links inside the card.

Try it

Delete text-align: center; and press RUN. The card stays in the middle, but its content moves back to the left. Put it back, then delete auto from the margin and compare.

CSS 2.6

6. Percentage Width: %

You saw % in HTML 2. Here is the CSS version: a percentage makes the width depend on the space available.

Code

<style>
.card {
    width: 80%;
    margin: 20px auto;
    padding: 20px;

    border: 3px solid navy;
    border-radius: 15px;
}
</style>

<div class="card">
    <h2>My Game</h2>
    <p>This card uses 80% of the available width.</p>
</div>

ResultTry 50%, 80% and 100%

Remember300px means an exact size. 80% means 80% of the available width.

CSS 2.7

7. Build a Simple Navbar

Links already sit beside each other, so we can make a clean first navbar without learning a new layout system yet.

Code

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    font-family: Arial;
}

nav {
    background-color: navy;
    padding: 15px;
    text-align: center;
}

.nav-link {
    color: white;
    margin: 15px;
    text-decoration: none;
    font-weight: bold;
}
</style>
</head>
<body>

<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>

</body>
</html>

ResultA real website shape

Touch the screen edgebody { margin: 0; }Removes the browser's outside body space.

Remove link underlinetext-decoration: none;Useful for navbar links.

Space the linksmargin: 15px;Separates one link from another.

CSS 2.8

8. Build a Cool Image Card

Now combine HTML 2 images with CSS 2 spacing. This is a pattern you'll use constantly for games and projects.

Code

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

.game-card {
    width: 300px;

    margin: 30px auto;
    padding: 18px;

    background-color: white;
    border: 3px solid navy;
    border-radius: 18px;

    text-align: center;
}

.game-image {
    width: 100%;
    border-radius: 12px;
}

.game-button {
    background-color: navy;
    color: white;
    width: 130px;
    height: 42px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}
</style>
</head>
<body>

<div class="game-card">
    <img class="game-image" alt="Road Racer game preview" 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>

</body>
</html>

ResultHTML 2 + CSS 1 + CSS 2

Notice the jobsThe card uses padding inside, margin outside, margin: auto to center the card, and width: 100% to make the image fill the card.

Small useful detail: cursor: pointerMove your mouse over the PLAY button. The cursor changes to a hand, which helps tell the user that the button is clickable.

Try it

Delete cursor: pointer;, press RUN, and move your mouse over PLAY again. Then put it back.

CSS 2.9

9. Three Learning Templates

Templates save time, but they should never be magic. Each one uses code you have already learned. Read it, run it, change it.

Template 1 · Cool Cars WebsiteHTML 1–2 · CSS 1–2

Navbar + real image + simple page content.

Template 2 · Game CardHTML 1–2 · CSS 1–2

A reusable image card for one project.

Template 3 · My Games PageHTML 1–2 · CSS 1–2

Navbar + heading + project card.

Template 1 · Cool Cars Website

This is still very small code, but it already looks like a real website.

Code

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    font-family: Arial;
    text-align: center;
}

nav {
    background-color: navy;
    padding: 15px;
}

.nav-link {
    color: white;
    margin: 15px;
    text-decoration: none;
}

.hero-image {
    width: 100%;
}
</style>
</head>
<body>

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

<img class="hero-image" src="../images/8.png">

<h1>Cool Cars</h1>
<p>Explore fast cars, racing games and new projects.</p>

</body>
</html>

ResultSmall code · real website

Template 2 · Game Card

Code

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #eeeeee;
    font-family: Arial;
}

.card {
    width: 300px;
    margin: 30px auto;
    padding: 18px;
    background-color: white;
    border: 3px solid navy;
    border-radius: 18px;
    text-align: center;
}

.card-image {
    width: 100%;
    border-radius: 12px;
}

.game-button {
    background-color: navy;
    color: white;
    width: 130px;
    height: 42px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}
</style>
</head>
<body>

<div class="card">
    <img class="card-image" alt="Road Racer game preview" 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>

</body>
</html>

ResultReusable project card

Template 3 · My Games Page

Code

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    background-color: #eef2ff;
    font-family: Arial;
    text-align: center;
}

nav {
    background-color: navy;
    padding: 15px;
}

.nav-link {
    color: white;
    margin: 15px;
    text-decoration: none;
}

.game-card {
    width: 300px;
    margin: 25px auto;
    padding: 18px;
    background-color: white;
    border: 3px solid navy;
    border-radius: 18px;
}

.game-image {
    width: 100%;
    border-radius: 12px;
}

.game-button {
    background-color: navy;
    color: white;
    width: 130px;
    height: 42px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}
</style>
</head>
<body>

<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 Games</h1>
<p>Games I built at RBS Code.</p>

<div class="game-card">
    <img class="game-image" alt="Road Racer game preview" 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>

</body>
</html>

ResultNavbar + project content

Templates are a head start, not magic.You should recognize the HTML and CSS inside each template. The separate Templates Library will include prerequisites and a full skill list for every template.

Build

Want to build your own website?

Choose a ready-made navbar, card, game page or website starter. Each template shows the modules it needs and the exact skills inside.

BROWSE TEMPLATES →

Core checkpoint

CSS 2 Core Complete ✓

If you can use the skills below, you are ready to move on. Everything after this checkpoint is extra.

padding
margin
top / right / bottom / left shortcuts
margin: 0
margin: auto
width: %
text-align
text-decoration
cursor: pointer
build a simple navbar
build a clean image card

Bonus · Effects

Make It Pop

These are useful and fun, but you can skip them for now if you need to move on.

Code

<style>
body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(blue, purple);
    font-family: Arial;
}

.card {
    width: 280px;
    margin: 40px auto;
    padding: 20px;

    background-color: white;
    border-radius: 18px;
    text-align: center;

    box-shadow: 0 8px 22px #333;
}
</style>

<div class="card">
    <h2>Space Quest</h2>
    <p>Now it pops off the page.</p>
</div>

ResultShadow + gradient

Why height: 100vh?100vh means 100% of the visible browser height. It makes the gradient cover the whole screen instead of only the short area containing your content and then repeating below it.

Shadowbox-shadow: 0 8px 22px #333;Sideways · down · blur · colour.

Gradientlinear-gradient(blue, purple)One colour changes into another.

Directionlinear-gradient(to right, blue, purple)Make the gradient move sideways.

Bonus · Template

Polished Game Website

Now use the two bonus effects in a real mini website. Everything else is code from the CSS 2 core.

Code

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    min-height: 100vh;

    background: linear-gradient(lightblue, white);

    font-family: Arial;
    text-align: center;
}

nav {
    background-color: navy;
    padding: 15px;
}

.nav-link {
    color: white;
    margin: 15px;
    text-decoration: none;
}

.card {
    width: 300px;
    margin: 30px auto;
    padding: 18px;
    background-color: white;
    border-radius: 18px;
    box-shadow: 0 8px 20px #999;
}

.card-image {
    width: 100%;
    border-radius: 12px;
}

.game-button {
    background-color: navy;
    color: white;
    width: 130px;
    height: 42px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}
</style>
</head>
<body>

<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 Coding Projects</h1>

<div class="card">
    <img class="card-image" alt="Road Racer game preview" src="../../demos/road-racer/thumbnail.jpg">
    <h2>Road Racer</h2>
    <p>My first racing game.</p>
    <button class="game-button">PLAY</button>
</div>

</body>
</html>

ResultCore CSS + two bonus effects

Why min-height: 100vh? 100vh means the full height of the browser screen. min-height makes the page at least that tall, but it can still grow if you add more content.

Teacher Demo / Bonus

See the Box Model in DevTools

Browsers can show you the content, padding, border and margin as a diagram. Your teacher may demonstrate this now; you do not need to master DevTools for CSS 2.

1Right-clickChoose Inspect.

2ElementsClick the card element.

3Box modelFind content → padding → border → margin.

Remember

CSS 2 Memory Map

paddingSpace inside.

marginSpace outside / between elements.

margin: autoCenter a box such as a card.

margin: 0Remove margin.

width: 80%Flexible width.

text-alignAlign content inside.

text-decorationUnderline / no underline.

cursor: pointerClickable mouse cursor.

box-shadowBonus: shadow effect.

linear-gradient()Bonus: blended background.

The big memory rulePadding = inside. Margin = outside. margin: auto centers the box. text-align: center centers what's inside.

Which property gives a card breathing room inside its border?

padding

Which property separates one card from another?

margin

What order does padding: 10px 20px 30px 40px use?

Top → Right → Bottom → Left.

What is the difference between margin: auto and text-align: center?

margin: auto centers the card itself. text-align: center centers the text and links inside it.

Practice

Ready for the challenge?

Match cards, fix spacing, rebuild a navbar, then make a small website yourself.

PRACTICE CSS 2 →

CSS 3.1: Put Game Objects Anywhere

Next: position: relative, position: absolute, left and top — enough to get ready for JavaScript movement.