CSS 1

Make Your Page Look Good

You already know how to put things on a page. CSS lets you change their colours, size, borders and text.

1 · Style2 · Selectors3 · Colours4 · Size5 · Borders6 · Fonts

CSS 1.1

1. Your First CSS

CSS changes how HTML looks. Put CSS inside a <style> tag in the head.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Game</title>
    <style>
        button {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <h1>My Game</h1>
    <p>Welcome to my game!</p>
    <button>PLAY</button>
</body>
</html>

ResultPress RUN after a change

HTML builds it. CSS styles it.HTML created the button. CSS changed its appearance.

Try it

Change blue to green, red or purple.

CSS 1.2

2. Tag, ID and Class Selectors

Selectors tell CSS what to change.

buttonEvery button.

#playOne element with id="play".

.game-buttonEvery element in that class.

Code

<style>
button {
    font-family: Arial;
}

#play {
    background-color: green;
    color: white;
}

.danger {
    background-color: red;
    color: white;
}
</style>

<button id="play">PLAY</button>
<button>HELP</button>
<button class="danger">DELETE</button>

ResultThree selector types

CSS 1.3

3. Build a Proper Game Button

Click NEXT to add one CSS line at a time.

/* plain button */

CSS 1.4

4. The Button Template

Copy the whole template, then change the values.

CSS 1 button template

.game-button {
    color: white;
    background-color: #5b45f0;

    width: 200px;
    height: 55px;

    border: none;
    border-radius: 14px;

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

CSS 1.5

5. Border Longhand and Shorthand

Learn the three parts, then use the shortcut.

Long version

border-width: 3px;
border-style: solid;
border-color: blue;

Shortcut

border: 3px solid blue;

Same meaning.The order is width + style + colour.

CSS 1.6

6. Outline Button

Code

<style>
.outline-button {
    color: #4f46e5;
    background-color: white;
    width: 190px;
    height: 52px;
    border: 3px solid #4f46e5;
    border-radius: 12px;
    font-size: 17px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}
</style>

<button class="outline-button">CHOOSE LEVEL</button>

ResultOutline style

CSS 1.7

7. CSS Shape Lab

Copy this template and change the values.

Code

<style>
.shape {
    width: 200px;
    height: 100px;
    background-color: blue;
    border-radius: 0px;
}
</style>

<div class="shape"></div>

ResultMake a square, circle or pill

Reference

CSS 1 Quick Reference

colorText colour.

background-colorBackground colour.

widthHow wide.

heightHow tall.

borderWidth, style, colour.

border-radiusRound corners.

font-sizeText size.

font-weightNormal or bold.

font-familyFont style.

Practice

Ready to build your own buttons?

Copy the template, match button styles, fix CSS and create your own design.

PRACTICE CSS 1 →

JavaScript 1: Make your page do things

Next: script, alert, prompt, variables, maths and if/else.