Skip to main content

Getting StartED with CSS

How Do I Set CSS Property Values?

The reference section lists the predefined keywords used by individual properties. However, colors, sizes, and URLs have their own syntax.

Specifying color values

Colors can be specified using hexadecimal notation, RGB (red, green, blue) values, or one of the 17 keywords listed in the following table:

CSS Color Keywords
maroon #800000 red #F00 orange #FFA500 yellow #FF0 olive #808000
purple #800080 fuchsia #F0F white #FFF lime #0F0 green #008000
blue #00F aqua #0FF teal #008080 black #000
silver #C0C0C0 gray #808080

When using hexadecimal notation, remember the following:

To specify colors using RGB values, enter the red, green, and blue values as a comma-separated list between the parentheses of rgb(). The values can be numbers in the range of 0–255 or percentages from 0% to 100%.

For example, red can be specified in any of the following ways:

Specifying sizes

The CSS2.1 specification uses the term “length” to describe a value that uses a unit of measurement. The only units that should be used for web pages displayed on a computer screen or mobile device are as follows:

Most sizes can also be specified as a percentage. This normally refers to a percentage of the size of the parent element or containing block.

There must be no space between the number and unit of measurement or percentage sign. For example, 1px and 10% are correct; 1 px and 10 % will not work.

When a zero value is used, the unit of measurement or percentage is optional: 0px and 0 are both equally valid.

Always use whole numbers with px. All other units of measurement can be used with decimal fractions. For values smaller than 1, the leading 0 of the decimal fraction is optional (0.5 and .5 are both OK).

When creating styles for printing, you should use the following absolute units:

Although some books and online tutorials use pt (points) for font sizes, this is considered bad practice. Absolute units, such as points, should be used only for print style sheets.

Specifying URLs

Properties such as background-image and list-style-image require the URL of the file you want to use. To specify the location of a file, enter its file path between the parentheses of url(). You can use either an absolute file path or a relative one. The file path can be optionally enclosed in single or double quotes. Whitespace between the parentheses and the file path is also permitted.

The following examples are all valid:

url(../../images/grand_canyon.jpg) url(  /images/grand_canyon.jpg  ) url('http://www.example.com/images/grand_canyon.jpg') url(  '../../images/grand_canyon.jpg'  ) url("/images/grand_canyon.jpg") url(  "../../images/grand_canyon.jpg"  )

If using a relative file path, the location should be relative to the style sheet.