CSS Units and Values

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 length, angle, 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 lengths 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.

  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.

  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.