DIV Art Studio

Your mission

What You Will Learn

☐ Make a rectangle
☐ Change width and height
☐ Change colours
☐ Move shapes
☐ Use IDs and classes
☐ Build a complete scene

Typing helps you remember. Try to type short lines yourself. Use the Copy button for long blocks or when slow typing is stopping you from moving forward. After copying, change at least one value and test what happens.

The Rule for Every Step

Add only the new code.
Press Ctrl + S.
Return to the browser.
Press Ctrl + R.
Check what changed.

Demo 1

Make Your First Rectangle

Create a folder called div-art.

Inside it, create a file called demo-1.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Shape</title>

    <style>
        #shape {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>

    <div id="shape"></div>

</body>
</html>

Your page should look approximately like this:

Open It in the Browser

Save the file.
Open the div-art folder.
Double-click demo-1.html.
You should see a blue rectangle.

Do not continue until the rectangle appears.

Understand the First Shape

<div id="shape"></div>

A <div> is an empty box.

The ID shape gives the box a name so CSS can find it.

width: 200px;
height: 100px;
background-color: blue;

width means how wide it is.

height means how tall it is.

background-color fills the box with colour.

Mini Experiments

Make a square

width: 150px;
height: 150px;

A square has the same width and height.

Make a tall rectangle

width: 80px;
height: 220px;

Try a new colour

background-color: orange;

Demo 2

Move the Rectangle

Add these lines inside the existing #shape rule:

position: absolute;
left: 300px;
top: 150px;

position: absolute lets you choose exactly where the shape goes.

left measures from the left side.

top measures down from the top.

Your moved shape should look approximately like this:

Position Challenges

Predict first. Then save and refresh.

left: 500px;

left: 50px;

top: 300px;

Right and Bottom

position: absolute;
right: 40px;
bottom: 40px;

right measures from the right side.

bottom measures from the bottom side.

Use either left or right. Use either top or bottom.

Main project

Start a Robot

Create a new file called robot.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My DIV Robot</title>

    <style>

    </style>
</head>

<body>

</body>
</html>

Robot step 1

Add the Body

Inside <body>

<div id="body"></div>

Inside <style>

#body {
    width: 190px;
    height: 220px;
    background-color: royalblue;

    position: absolute;
    left: 400px;
    top: 220px;
}

Stage 1: body only

Robot step 2

Add the Head

Inside <body>

<div id="head"></div>

Inside <style>

#head {
    width: 160px;
    height: 115px;
    background-color: silver;

    position: absolute;
    left: 415px;
    top: 80px;
}

Stage 2: body and head

Robot step 3

Add Two Eyes Using Two IDs

First, make each eye with its own complete CSS rule.

Inside <body>

<div id="eye1"></div>
<div id="eye2"></div>

Inside <style>

#eye1 {
    width: 30px;
    height: 30px;
    background-color: yellow;
    position: absolute;
    left: 445px;
    top: 120px;
}

#eye2 {
    width: 30px;
    height: 30px;
    background-color: yellow;
    position: absolute;
    left: 510px;
    top: 120px;
}

Stage 3: the robot has eyes

Cleaner code

Use One Class and Two IDs

Look at the two eye rules. Almost every line is repeated.

Repeated version

Each eye repeats width, height, colour, position and top.

Cleaner version

Put shared styles in a class. Put only the different position in each ID.

Replace the eye HTML with:

<div id="eye1" class="eye"></div>
<div id="eye2" class="eye"></div>

Replace the two old eye CSS rules with:

.eye {
    width: 30px;
    height: 30px;
    background-color: yellow;
    position: absolute;
    top: 120px;
}

#eye1 {
    left: 445px;
}

#eye2 {
    left: 510px;
}

The class contains what both eyes share. The IDs contain what is different.

Robot step 4

Add Arms Using a Class

Inside <body>

<div id="arm1" class="arm"></div>
<div id="arm2" class="arm"></div>

Inside <style>

.arm {
    width: 70px;
    height: 28px;
    background-color: royalblue;
    position: absolute;
    top: 275px;
}

#arm1 {
    left: 330px;
}

#arm2 {
    left: 590px;
}

Stage 4: the robot has arms

Robot step 5

Add Legs Using a Class

Inside <body>

<div id="leg1" class="leg"></div>
<div id="leg2" class="leg"></div>

Inside <style>

.leg {
    width: 48px;
    height: 110px;
    background-color: darkblue;
    position: absolute;
    top: 440px;
}

#leg1 {
    left: 425px;
}

#leg2 {
    left: 517px;
}

Stage 5: complete basic robot

Robot Polish Bonuses

Mouth

#mouth {
    width: 70px;
    height: 14px;
    background-color: black;
    position: absolute;
    left: 460px;
    top: 165px;
}

Glowing chest light

#chestLight {
    width: 50px;
    height: 50px;
    background-color: lime;
    border-radius: 50%;
    box-shadow: 0 0 18px lime;
    position: absolute;
    left: 470px;
    top: 292px;
}

Polished robot example

Curved shapes

Circles and Ellipses

Circle

For a circle, width and height must be the same.

#circle {
    width: 100px;
    height: 100px;
    background-color: crimson;
    border-radius: 50%;
}

Ellipse

An ellipse has different width and height.

#ellipse {
    width: 180px;
    height: 80px;
    background-color: deepskyblue;
    border-radius: 50%;
}

Tree and Puddle Ideas

Tree

#trunk {
    width: 45px;
    height: 100px;
    background-color: saddlebrown;
}

#treeTop {
    width: 150px;
    height: 95px;
    background-color: forestgreen;
    border-radius: 50%;
}

Puddle

#puddle {
    width: 190px;
    height: 55px;
    background-color: dodgerblue;
    border-radius: 50%;
    box-shadow: 0 8px 14px gray;
}

Project 2

Mini Castle Challenge

This time, you will build the CSS yourself.

You may copy the HTML structure, but use what you learned to create and position each shape.

You may copy this HTML

<h1>Mini Castle</h1>

<div id="scene">
    <div id="grass"></div>
    <div id="castle"></div>
    <div id="door"></div>
    <div id="flagPole"></div>
    <div id="flag"></div>
</div>

Your job

Make a blue scene box.
Add green grass at the bottom.
Add the main castle rectangle.
Add a smaller brown door.
Add a thin flag pole.
Add a purple flag.

Suggested measurements

Scene: 500px wide and 350px tall.
Grass: full scene width and about 90px tall.
Castle: about 180px wide and 150px tall.
Door: about 50px wide and 70px tall.
Flag pole: very thin and about 100px tall.
Flag: about 70px wide and 40px tall.

Start with the scene and grass. Check the browser. Then add one castle part at a time.

Border radius lesson

How the Four Border-Radius Corners Work

border-radius rounds the corners of a DIV.

A single value rounds every corner:

border-radius: 20px;

This means all four corners get the same curve.

Using four values

When you write four values, they follow the corners clockwise:

border-radius:
    top-left
    top-right
    bottom-right
    bottom-left;

A useful way to remember it:

start at the top-left
then move clockwise around the box

border-radius: 30px 10px 40px 0;

This means:

Top-left: 30px
Top-right: 10px
Bottom-right: 40px
Bottom-left: 0

Longhand properties

You can also name each corner separately. This is longer, but sometimes easier to understand:

border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 0;

These longhand lines make the same result as:

border-radius: 30px 10px 40px 0;

Use the four-value version when you are comfortable. Use the longhand version when you want each corner to be very clear.

Umbrella curve

How the Curved Umbrella Top Works

The umbrella needs rounded top corners but square bottom corners.

#umbrellaTop {
    width: 180px;
    height: 70px;
    background-color: tomato;

    border-radius: 50% 50% 0 0;
}

The four values mean:

Top-left: 50% — rounded
Top-right: 50% — rounded
Bottom-right: 0 — square
Bottom-left: 0 — square

That gives the DIV a curved top and a flat bottom.

The same umbrella using longhand

border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

Try different curves

A softer curve:

border-radius: 25% 25% 0 0;

A stronger curve:

border-radius: 80% 80% 0 0;

Change the percentages, save and refresh. Watch how the umbrella curve changes.

Project 3

Mini Beach Scene Challenge

This is a larger independent project.

You may copy the HTML, but write the CSS yourself using the preview and the suggested measurements.

You may copy this HTML

<h1>Mini Beach Scene</h1>

<div id="scene">
    <div id="sea"></div>
    <div id="sand"></div>
    <div id="sun"></div>

    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>

    <div id="umbrellaPole"></div>
    <div id="umbrellaTop"></div>
    <div id="umbrellaStripe"></div>

    <div id="towel"></div>
    <div id="towelStripe"></div>

    <div id="sandcastle"></div>
    <div id="sandcastleTower"></div>
    <div id="sandcastleDoor"></div>
</div>

Build it in checkpoints

Checkpoint 1: scene, sea and sand.
Checkpoint 2: sun and cloud.
Checkpoint 3: umbrella.
Checkpoint 4: towel.
Checkpoint 5: sandcastle.

Suggested colours

skyblue, dodgerblue, khaki, gold, white, brown, tomato, royalblue, goldenrod, sienna

Selected hints

Scene

#scene {
    width: 600px;
    height: 400px;
    position: relative;
    margin: auto;
}

Cloud class

.cloud {
    height: 30px;
    background-color: white;
    position: absolute;
}

The hints do not finish the project. Use width, height, background colour and position to build each remaining part.

Choose Your Final Project

Make your own robot.
Change the castle into a fortress.
Add more objects to the beach.
Make a space scene.
Make a house, tree and sun.
Make a city skyline.

Use at least:

☐ 6 DIVs
☐ 3 colours
☐ 2 rectangles
☐ 1 circle or ellipse
☐ 1 class
☐ left/top or right/bottom

Common Mistakes

Nothing appears: check that the DIV ID matches the CSS selector.
The shape does not move: check for position: absolute.
The circle is oval: width and height must be the same.
The class does not work: CSS classes use a dot, such as .eye.
The ID does not work: CSS IDs use a hash, such as #eye1.
Nothing changed: save and refresh.

Show the Teacher

☐ My shapes appear
☐ I can move a shape
☐ I used a class
☐ I used more than one ID
☐ I changed the design
☐ I can explain one CSS line