×

css · level 1 · unit 6 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

width and height set the size of a box.

A box normally stretches as wide as the space it sits in, and grows as tall as its content. width and height let you choose the size yourself, like width: 200px.

They set the size of the . Padding and borders are added on top, so a 200px box with 10px of padding on each side takes up 220px across.

An is a picture on the page. The <img> tag shows one, and its src names the file, like src="cat.svg". Set its width to make it bigger or smaller.

<img src="cat.svg" alt="A sleepy cat">
<div class="box">A box 200px wide</div>
img {
  width: 120px;
}
.box {
  width: 200px;
  height: 80px;
  background-color: peachpuff;
}

Press show my page to see it here.

<img> has no closing tag, and its alt describes the picture for anyone who cannot see it.