w3resource logo


CSS tutorials

CSS values

Secondary Nav

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 :

Unit Sign used Description
Pixel px Pixel of the viewing device.
em em The relevant font size.
ex ex The 'x-height' of the relevant font.

Absolute units used in CSS

Unit Sign used Description
Inches in 1 inch is equal to 2.54 centimeters and approximately 96 pixels.
centimeters cm Known measurement unit.100 cm = 1 meter.
Millimeters mm Known measurement unit.1000 mm = 1 meter
Points pt 1 pt = 1/72 nd pf an inch.
Picas pc 1 pica = 12 points.

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

Keywords RGB Hexa decimal
aqua 0,25,255 #00ffff
black 0,0,0 #000000
blue 0,0,255 #0000ff
fuchsia 255,0,255 #ff00ff
gray 128,128,128 #808080
green 0,128,0 #008000
lime 0,255,0 #00ff00
maroon 128,0,0 #800000
navy 0,0,128 #000080
olive 128,128,0 #808000
orange 255,165,0 #ffA500
purple 128,0,128 #800080
red 255,0,0 #ff0000
silver 192,192,192 #c0c0c0
teal 0,128,128 #008080
white 255,255,255 #ffffff
yellow 255,255,0 #ffff00

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.



Join our Question Answer community to learn and share your programming knowledge.

Solve these problems:

Java: How to convert a string to an integer in Java?

C#: Loops in c#

SQL: JOIN using more than 5 tables