Essential front-end development

CSS Length Units

1
2
3
4
5
6

Pixels

We use pixels to specify lengths when we know exactly how large we want an element to be on the screen regardless of the surrounding elements.

Pixel size

Pixels in CSS are not actually equal to the device's pixels, but rather represent a unit of angle of view. This means that 1px in CSS is not necessarily equal to exactly 1px on the screen, but probably comes quite close it.

Code example

<style>
#blue-box {
  width: 250px;
  height: 250px;
  background-color: blue,
  color: white;
}


#red-box {
  width: 200px;
  height: 100px;
  background-color: red,
  color: black;
}
</style>


<div id="blue-box">
  I am a blue box with a width of 250px and a height
  of 250px
  <div id="red-box">
    I am a red box with a width of 200px and a height
    of 100px inside the blue box
  </div>
</div>

which produces

I am a blue box with a width of 250px and a height of 250px
I am a red box with a width of 200px and a height of 100px inside the blue box

Test yourself

Description

Change the font-size of the .character-name element to

24px

the width of the .dialog element to

300px

and the height of the .dialog element to

130px

You need to define the .character-name rule yourself. The rest of the rules have been defined for you, and you only need to add/modify some declarations.

Tests

  1. 1 Your .character-name element should have the font size 24px.
  2. 2 Your .dialog element should have the width 300px.
  3. 3 Your .dialog element should have the height 130px.
Editor
Preview
Run tests (ALT+Q)
PrevNext