Lesson 3: Units and Sizing

Overview

Sizing elements is the central aspect of HTML page layout. For sizing, we set the CSS width and height properties of an element. CSS offers a variety of unit specifications from pixels to absolute length units. Additionally, CSS allows us to size elements relative to the font size, the screen size, and the size of the parent element.

Using Pixels as Units

The most basic method of sizing an element is to use pixels as the unit of measure. We designate pixels as the unit of measure by appending px to the value. For example, in the element below, we set the width property to 400px and the height property to 200px to create the 400 by 200 pixel paragraph element that we have colored lightgray for illustration; coloring the background helps us to see exactly how big the element is.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <p style="background-color:lightgray;width:400px;height:200px;">
    Our Father, who art in heaven,<br />
    hallowed be thy name; thy kingdom come,<br />
    thy will be done, on earth as it is in heaven.<br />
    Give us this day our daily bread<br />
    and forgive us our trespasses,<br />
    as we forgive those who trespass against us<br />
    and lead us not into temptation,<br />
    but deliver us from evil. Amen.<br /></p>
  </body>
</html>

Sizing based on Pixels

Absolute Units Lengths

Pixels are fine for working with basic screen size, but if we want a size that is device independent, then we should use actual unit lengths. For this purpose, CSS offers several options:

cm - centimeters
mm - millimeters
in - inches
pt - points
pc - picas

As an example, we used the following inches specification in the code below: width:5in;height:3in;. Using units like this allows us to div the element to a printer with the specified paper size. This example would be ideal for a 5x3 inch notecard, but we could easily sets the sizes larger for a standard 8.5x11 inch piece of paper.

Absolute Unit Lengths

Relative Unit Lengths

Absolute unit length are good for device independence, but there times when we want to scale our elements according to the device on which they are displayed. For this, CSS offers a wide range of options. We can set sizes based on fon sizes:

em - relative to the font size in the current element
rem - relative to the font size in the root element
ex - relative to the x-height in the current element
ch - relative to the width of zero in the current element

Additionally, we can set sizes based on the screen size. This useful for maintaining a consistent appearence across devices, like a laptop, tablet, and phone, which have vastly different screen sizes. The screen sized units are as follows:

vw - relative to the view width
vh - relative to the view height
vmin - relative to the smaller size, width or height
vmax - relative to the larger size, width or height

Finally, we can size an element relative to its parent's width or height, respectively, by using a simple percentange. In the example below, I have specified the width and height of the gray element as width:80%;height:90%; to make the element's width 80% of the parent width and the height 90% of the parent height. To help illustrate this, I have made the parent element (outlined by the black rectangle) resizeable. Just click and drag the boundary within the red rectangle to see both of them resize. Notice that the gray region is alway the same percentage of the width and height of the parent element.