STATUS

HINT MESSAGE

Continue

Hello World!

desktop-background-200x250

?

Result

CSS UNITS GAME


Learn the digital length units interactively

SCROLL

A website uses many length units, same as we have centimeters (cm), millimeters (mm), inches (in) and much more in the real world. We can use the units cm, mm, with websites, however, it's not recommended as they are fixed sizes and when it comes to making things look beautiful on a small smartphone or a big TV, the outcome will be chaotic. That's where digital length's units, fixed and non-fixed sizes come in the game.

We use a sheet called CSS to design websites. Imagine it as a word document which explains in an easy coded way which colour to use, space between each paragraph and headers, but also all kinds of sizes such as exact positions, borders, space around them and much more.



There are more than a dozen of these units which we can categorize into two types:

  • relative (depends on screen- / element-size)
  • absolute (fixed size)

There are more than 10 length units for CSS, but most of the time we're only going to need a couple of them:

Unit Description Example
px Pixels - absolute unit 1px = 1/96th of 1in
em Relative to the font size of the element 2em means 2 times the size of the elements font
vh Viewport Height - relative to the browser window height 50vh would fill half of the screen vertically
vw Viewport Width - relative to the browser window width 50vw would fill half of the screen horizontally
% Percentage - relative to the size of container enclosing the element Self explaining
auto Auto is the default length unit if not specified and depends on the elements inside the container. An element inside a container has 50px height and width. The container is set to auto, height and width of the container will also be 50px.

Tablet Example with unit lengths


Imagine this was a Tablet.
It has a browser window with a height of 300px and a width of 260px. The font-size is 14px.


195px ( filling 75% of 260px )

12em ( equals to 168px )

84vw ( 84/100 of the browser width )

81% (81% of the container's width)

This container has a width of 81vw.
This box has a width of 50%

90vh (90/100 of browser height)

Only the 195px and 12em will keep the same size on a smartphone and a big TV. All the others will resize according to the available size.

CSS length units are written with the defined length and then the unit without a space in-between(e.g.: 10px).
vw and vh can both be used for height and width lengths, however, it's not recommended and only used under special circumstances.

What to use them for?


Besides defining the height and width of a container or element, we can add borders, define the font sizes and add two types of space between two elements or an element and the container enclosing it:


  • margin, adding space outside the element or container
  • padding, adding space inside the element or container


Margin and padding are defined with one, two or four values:


  • margin : 10px (is equal to a 10px space on every side around the element)
  • margin : 10px 20px (is equal to a 10px space to the top and bottom and 20px to the left and right around the element)
  • margin : 10px 20px 30px 40px (is equal to add 10px to the top, 20px to the right, 30px to the bottom and 40px to the left space around the element)

The same rule applies for padding.


difference between margin and padding

How the game works?


Each level, you'll be given an objective.
Change the elements or containers using the dedicated fields on the right sidebar. Click the "Apply" button to check your input and a message indicating correct or incorrect appears at the top. Sometimes, a small explication message appears at the same position for better understanding.
Allowed units are px, em, %, auto and vw for horizontal and vh for vertical directions. You can skip levels, or return to a level by copying the unique level URL.
To return to this page after you closed it, click on the bottom left on the "?" sign. To start the game, hit the "START GAME" button below.


About CSS Unit Game

Working with digital content such as photos, videos but also websites and either if it's a designer, programmer, copywriter or marketer, at some point they all need to work with digital lengths units to create stunning media, user interfaces or well-structured articles.
Only a few have the ability to play with these digital units around and learning them hands-on boosts the overall understanding.
That's where CSS-UNIT-GAME comes in. By several objectives, I want to bring everyone working with digital content closer to the understanding of digital units.



This Website was created by Lars ALBERT, and is published under the GNU AGPLv3 License. If you found an issue, please e-mail me via lars@advena.me
If you wish to contribute with coding, don't hesitate to create a pull request on the github page.

×

Oh snap!

Your screen size seems to be too small to experience the website to its full potential.
If possible, please visit the website from a PC / MAC with a minimum resolution of 1024 x 768 or if you're on a tablet, rotate it to a horizontal direction and reload the page.

If you still wish to continue, press the "I understand" button.

Oh resize!

It seems that your browser has been resized. You need to refresh the page in order to continue. Click the button below!