CSS Values

CSS Values

CSS values define how CSS properties should be applied. A value can specify a color, size, number, keyword, percentage, or another setting understood by the property.

How CSS Values Work

A CSS value appears after the property name and colon in a declaration. It tells the browser what setting should be used for that property.

p {
  color: blue;
}

In this example, color is the property and blue is its value. Together they form the declaration color: blue;.

Keyword Values

Some CSS properties accept predefined words called keywords. The available keywords depend on the property being used.

p {
  text-align: center;
}

strong {
  font-weight: bold;
}

In these examples, center and bold are keyword values recognized by their respective CSS properties.

Color Values

Properties that accept colors can use several CSS color formats. These include named colors, hexadecimal values, RGB, HSL, and other supported color formats.

h2 {
  color: blue;
}

p {
  color: #333333;
}

.example {
  background-color: rgb(240, 240, 240);
}

Numeric Values

Some CSS properties accept numbers. Depending on the property, a number may be used by itself or combined with a unit.

.example {
  opacity: 0.5;
  line-height: 1.5;
}

The values 0.5 and 1.5 do not require units for these properties.

Length Values

Length values describe measurements such as font sizes, widths, margins, and padding. Many length values consist of a number followed by a CSS unit.

p {
  font-size: 18px;
  margin-bottom: 20px;
}

In this example, 18px and 20px are length values. The number provides the amount and px identifies the unit of measurement.

CSS supports several units besides pixels. The next tutorial explains the most common CSS units and how their measurements differ.

Percentage Values

Some CSS properties accept percentages. A percentage is generally calculated relative to another measurement determined by the property and its context.

.example {
  width: 50%;
}

Here, the width value is 50%. The element's width is calculated as a percentage of the available width of its containing block.

Properties with Multiple Values

Some CSS properties can accept more than one value in a single declaration. The meaning and order of those values depend on the property.

p {
  margin: 10px 20px;
}

For the margin property, these two values set the top and bottom margins to 10px and the left and right margins to 20px.

Other properties may use multiple values for different purposes, so the accepted values are determined by the individual CSS property.

Using Valid Values

Each CSS property accepts specific types of values. A value that works with one property may not be valid for another.

p {
  color: blue;
  font-size: 18px;
}

The value blue is valid for the color property, while 18px is valid for font-size. If a declaration contains a value that is not valid for its property, the browser normally ignores that declaration.

Summary

CSS values provide the settings assigned to CSS properties. Depending on the property, values may be keywords, colors, numbers, lengths, percentages, or combinations of several values.

Each CSS property defines which values it accepts. Understanding the relationship between properties and values makes CSS declarations easier to read and write.