Learn CSS 2.3: Sizing

Last Time

Last time, we learned:

Seven ways to change colors and when to use each

Starting anew

Let's start again with a basic CSS template, but this time, we're going to be using a <div>:

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>

We're going to give the <div> a background color of black. Add this to the <style> tag:

div {
  background-color: #000;
}

Remember that #000 is black in 3-digit hexadecimal RGB notation.

Now, we're going to resize it to see how much of the screen is black. At the moment, opening your file in the browser should show that nothing is black.

To resize an item, you use the height and width properties of an element. You can also use max- and min- versions of these.

Pixel units

div {
  background-color: #000;
  height: 50px;
  width: 100px;
}

You can define how tall and wide an element is in pixels or px for short. Pixels are usually 1/96 of an inch. The above code should result in the div being a small rectangle.

Point units

div {
  background-color: #000;
  height: 50pt;
  width: 100pt;
}

Points , or pt for short, are 1/72 of an inch on the screen. For elements you want to scale to the screen, they can be useful. The above code should resuly in a slightly larger rectangle than the last example.

Em Units

div {
  background-color: #000;
  height: 50em;
  width: 100em;
}

An em is one times the font size of the document (usually 12pt). Ems are useful for creating sites that scale to the screen. The above code should create a very large rectangle.

Rem Units

div {
  background-color: #000;
  height: 50rem;
  width: 100rem;
}

A rem is one times the font size set to the <html> tag containing the document. It is useful for situations in which you want to use ems, but the text size of the containing element is set to a size other than 12pt.

Centimeters, millimeters, inches

div {
background-color: #000;
height: 50mm;
width: 50mm;

You can also size items in centimeters (cm), millimeters (mm), or inches (in) of the screen.

Picas

div {
  background-color: #000;
  height: 50pc;
  width: 100pc;
}

Here's an obscure one. One pica (pc) is always equal to 12pt.

Character Height

div {
  background-color: #000;
  height: 50ch;
  width: 100ch;
}

One ch is equal to the width of the letter 0 in the current font.

"x" height

div {
  background-color: #000;
  height: 50ex;
  width: 100ex;
}

One ex is equal to the height of the lowercase X in the current font.

Other ways to size things.

Also available are percent of the screen (%), percent of the screen height (vh), and percent of the screen width (vw), and percent of the screen's smaller/larger dimension (vmin/vmax), but I was unable to get them to work properly for this demonstration.

In conclusion, CSS offers many ways (at least six) to change an element's size. Next article - fonts and text sizing