CSS values

What are CSS values?

CSS values are set against CSS Properties and reside within CSS declaration block, which is a part of the CSS rule / statement.

CSS 2.1 allows following types of values : Integers and real numbers, Lengths, Percentages, URLs and URIs, Counters, Colors,
Strings, Unsupported Values.

Integers and real numbers

Integers and real numbers can be used as CSS values. When used, they can be preceded by + or - sign. Decimal numbers are also allowed.

Used in following CSS properties

z-index, line-height, counter-increment. Also, can be used as CSS color values.

Lengths

Lengths can be used to specify horizontal or vertical measurements.

When used, <length> is followed immediately by a unit. There should not be any space between the number and the unit. For certain properties, negative lengths are allowed , but for certain properties using a negative value results from an error.

Used in following CSS properties

width, margin, padding, font-size, border-width, text-shadow etc.

Units

There are two types of units are used in CSS, Relative, and Absolute.

Relative units are relative to another length. If used, they can generate a flexible output across various media ( e.g screen, print ). Absolute units are used to specify a fixed width irrespective of viewing area.Useful when the length of the output medium is known.

Relative units used in CSS:

Absolute units used in CSS

Percentages

Percentages can be used by specifying a number followed by a "%".

Used in following CSS properties

width, margin-top, and font-size etc.

URLs and URIs

URLs and URIs are used as CSS values to point to a resource ( e.g. an image ). The format of a URI value is url("URL" ). The quotation around the URL is optional. You can also use Relative URIs.

Used in following CSS properties

background-image, cursor, list-style etc.

Counters

Counters are denoted by case-sensitive identifiers. The format of using counters are counter(counter-identifier). A common example of a counter identifier is per-num.

Used in

Can be used with most if the element selectors and pseudo selectors.

Colors

A color is either a keyword or a numerical RGB specification or a hexadecimal color value. It is used to set the color of the text written within an HTML document.

Used in

color, background, border or box-shadow are common examples of CSS properties that use colors as a value. Most of the CSS properties accept color as values.

Units

Strings

The format of writing strings may be either with double quotes or with single quotes.

Used in

Most of the CSS properties accept strings as values.

Auto

Auto is a value automatically calculated by user agents ( e.g. browsers).

Used in following CSS properties

overflow, cursor, width, marker-offset, margin, bottom, left, table-layout, z-index.

Inherit

The element which holds an inherit value, acknowledges the value of the same CSS property of its parent element.

Used in following CSS properties

All of the CSS properties can accept inherit.

Initial

If used, the corresponding element accepts an initial / default value ( for example the initial value of color CSS property is black).

Used in following CSS properties

Almost all of the CSS properties can accept initial.

None

If specified, no value is attached to the corresponding element, often causing the element to be hidden.

Used in following CSS properties

Almost all of the CSS properties can accept none.

None

If specified, no value is attached to the corresponding element, often causing the element to be hidden.

Used in following CSS properties

border,list-style-type,max-height.

Shape

Used to create a shape for CSS properties like the clip.

Unsupported

If a value is not supported by a user agent, it ignores that value as an illegal value.

Previous: CSS comments
Next: Specified, computed, and actual values