CSS Values and Units

CSS Units Description

CSS definition consists of properties and values.

As taught in the previous chapters, properties are predefined keywords that perform specific functions in formatting a web page. Values can either be predefined (keywords that are already defined in CSS) or user-defined (custom values set by the developer).

CSS Values

CSS Values are also known as data types. There are different sets of values that are allowed for a particular property. These data types can be dimension, number, percentage, function(), predefined-keywords (such as colornames), string values. The dimension is a parent type to lengthangle, time and resolution data types.

CSS Units

CSS Units are the qualifiers attached to a number to describe a CSS value. Example px, in, pt, pc, cm, mm, vh, vw, vmax, vmin and more. We learn more about CSS units later in this chapter.

Length Values

Length is the most frequently used value in the numeric data type category. A length is a number attached with a CSS unit,  for example 15px (pixels), 5s (time in seconds), 180deg (angles in degrees). There are two types of lengths used in CSS, they are absolute and relative. These types of length work differently, which is why it is important to know how they work.

Absolute Lengths

Absolute lengths appear as the same size on every screen, they have fixed lengths and are not relative to anything on the web page. See the lists of absolute length units below.

Unit Name Equivalent
px Pixels 1px = 1/96th of 1in
pt Points 1pt = 1/72th of 1in
pc Picas 1pc = 1/6th of 1in
in Inches 1in = 2.54cm = 96px
mm Millimeters 1mm = 1/10th of 1cm
Q Quater-millimeters 1Q = 1/40th of 1cm
cm Centimeters 1cm = 96px/2.54

  Do It Yourself

Relative Lengths

Relative lengths are always relative to a parent property, this can be the width or font-size property of a parent element. Relative units are better used to render elements to scale better on different media. See the lists of absolute length units below.

Unit Relative To
em If used in typographical properties like font-size, it is relative to the font size of the parent, else if used in dimensional properties like width, relative to the element's font-size itself.
ex x-height of the element's font size.
ch The measurement of the glyph "0" of the current element's font.
rem The Font size of the root element.
lh The Line height of the current element.
vw 1% of the page viewport's width.
vh 1% of the page viewport's height.
vmin 1% of the page viewport's smaller dimension.
vmax 1% of the page viewport's larger dimension.

  Do It Yourself

Number Values

Number values are numeric values only. They do not expect a unit attached to them. Properties that take the number value includes: opacity, z-index, flex, order and more. For example:

div.child {
  position: fixed;
  z-index: 5;
}

  Do It Yourself

Percentage Values

Percentage % values are always set percentage relative (n/100 of) to the parent value of an element. In most cases, this value is treated the same way as the length value. For more illustration, a parent div of width:90px that has a <button> child element of width:50%, this will set the value of the <button> child element to 45px (50/100 of 90px). In a different way, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent.

  Do It Yourself

Function Values

CSS Function values are types of values that carry parenthesis () to provide more information. Values in the parenthesis are separated by commas if more than one. Examples of these values are rgb(), rgba(), hsl(), hsla(),  which are used for colors, url() used for importing binary files such as images, filter() and more. For example:

.section {
  background-image: url('bg-cover-1.png');
}

  Do It Yourself

Predefined Keyword Values

Predefined keywords are values that are already defined to mean something in CSS. In this case, you must use from the group of keywords specified for the specific property, otherwise, using a different keyword might not work for the property (even if the keyword is available in CSS but not specified for the current value).  For example, to set a background color of an element using the colorname keyword can be done this way:

div {
 background-color:yellow;
}

  Do It Yourself

Using  a wrong keyword would be trying to set the above example by using a keyword relative which is not included in the group of colorname keywords.

The value yellow is neither a string because it is not surrounded by quotes (""), neither is it a number because it is not numeric, but a keyword. Another example of using a keyword is this.

p {
  text-align: center;
  display: inline;
  margin-right: auto;
  margin-left: auto;
}

String Values

Strings are a sequence of characters surrounded by a single ('') or double ("") quotes. String are usually user-defined characters, meaning they can be anything you wanted.

For example, let us set the content of the ::after element of <p> to something interesting.

p::after {
  content: "I know you don't think CSS can go as long as doing this!";
}

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should be able to understand CSS values and units properly.
  • You should be able to differences and similarities between CSS values and units.
  • You should understand how and when to use absolute lengths and relative lengths.
  • If you enjoy this lesson, please share.