Appendix B: CSS Reference

background

any combination of the values for background-attachment, background-color, background-image, background-repeat, and/or background-position, or inherit

For changing the background color and image of elements.

initial value depends on individual properties; not inherited; percentages allowed for background-position

To display multiple background images, separate the combined background values with a comma; if you are specifying a background-color, this should be included as a part of the last background.

background-attachment

either scroll, fixed, or inherit

For determining if and how background images should scroll.

initial value: scroll; not inherited

If you are displaying multiple background images, you can apply a separate background-attachment value to each by separating the values with commas.

background-color

either a color, transparent, or inherit

For setting just the background color of an element.

initial value: transparent; not inherited

background-image

either a URL, a CSS gradient (see Table B.4), none, or inherit

For setting just the background image of an element.

initial value: none; not inherited

To display multiple background images, separate the image values with a comma.

background-position

either one or two percentages or lengths (or one percentage and one length) or one of top, center, or bottom and/or one of left, center, or right, or use inherit

For setting the physical position of a specified background image.

initial value: 0% 0%; if a single percentage is set, it is used for the horizontal position, and the initial value of the vertical is set to 50%; if only one keyword is used, the initial value of the other is center; applies to block-level and replaced elements; not inherited; percentages refer to the size of the box itself

If you are displaying multiple background images, you can apply a separate background-position value to each by separating the values with commas.

background-repeat

one of repeat, repeat-x, repeat-y, no-repeat, or inherit

For determining how and if background images should be tiled.

initial value: repeat; not inherited

If you are displaying multiple background images, you can apply a separate background-repeat value to each by separating the values with commas.

background-size

either one or two percentages or lengths, or auto, or use cover or contain

For specifying the size of background images.

initial value: auto; not inherited

If you are displaying multiple background images, you can apply a separate background-size value to each by separating the values with commas.

border

any combination of the values of border-width, border-style, and/or a color, or inherit

For defining all aspects of a border on all sides of an element.

initial value depends on individual properties; not inherited

border-color

from one to four colors, transparent, or inherit

For setting only the color of the border on one or more sides of an element.

initial value: the element’s color property; not inherited

border-radius

For giving a box rounded corners.

initial value: 0; not inherited

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius

For setting the border-radius values for only one corner of the box.

initial value: 0; not inherited

Note: older versions of Firefox use a different syntax for individual corners: -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft, and -moz-border-radius-topleft.

border-spacing

either one or two lengths or inherit

For specifying the amount of space between borders in a table.

initial value: 0; may be applied only to table elements; inherited

border-style

one to four of the following values: none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit

For setting only the style of a border on one or more sides of an element.

initial value: none; not inherited

border-top, border-right, border-bottom, border-left

any combination of a single value each for border-width, border-style, and/or a color, or use inherit

For defining all three border properties at once on only one side of an element.

initial value depends on individual values; not inherited

border-top-color, border-right-color, border-bottom-color, border-left-color

one color or inherit

For defining just the border’s color on only one side of an element.

initial value: the value of the color property; not inherited

border-top-style, border-right-style, border-bottom-style, border-left-style

one of none, dotted, dashed, solid, double, groove, ridge, inset, outset, or inherit

For defining just the border’s style on only one side of an element.

initial value: none; not inherited

border-top-width, border-right-width, border-bottom-width, border-left-width

one of thin, medium, thick, or a length

For defining just the border’s width on only one side of an element.

initial value: medium; not inherited

border-width

one to four of the following values: thin, medium, thick, or a length

For defining the border’s width on one or more sides of an element.

initial value: medium; not inherited

bottom

either a percentage, length, auto, or inherit

For setting the distance that an element should be offset from its parent element’s bottom edge.

initial value: auto; not inherited; percentages refer to height of containing block

box-shadow

optional inset followed by two to four length values, followed by a color

For adding one or more drop shadows to a box. The length values refer (in order) to: position to the right of the box (negative values position to the left), position down from the box (negative values position up), blur radius (negative values are not allowed), and spread distance (negative values cause the shadow to contract). Each subsequent box-shadow value should be separated from its predecessor with a comma.

initial value: none; inherited

clear

one of none, left, right, both, or inherit

For preventing elements from wrapping around on one or both sides of floated elements.

initial value: none; may only be applied to block-level elements; not inherited

clip

one of auto, rect, or inherit

For displaying only a portion of an element.

initial value: auto; applies only to absolutely positioned elements

color

a color or inherit

For setting the text color of an element.

initial value: parent’s color, some colors are set by browser; inherited

cursor

one of auto, crosshair, default, pointer, progress, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, a URL, or inherit

For setting the cursor’s shape.

initial value: auto; inherited

display

one of inline, block, inline-block, list-item, run-in, compact, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group, none, inherit

For determining how and if an element should be displayed.

initial value: usually inline or block; not inherited

float

one of left, right, none, inherit

For determining which side of the parent element an element will float to.

initial value: none; may not be applied to positioned elements or generated content; not inherited

font

if desired, any combination of the values for font-style, font-variant, and font-weight followed by the required font-size, an optional value for line-height, and the also-required font-family, or use inherit

For setting at least the font family and size, and optionally the style, variant, weight, and line height of text.

initial value depends on individual properties; inherited; percentages allowed for values of font-size and line-height; font-size and font-family are required for the font property to work

font-family

one or more quotation mark-enclosed font names followed by an optional generic font name, or use inherit

For choosing the font family for text.

initial value: depends on browser; inherited

font-size

an absolute size, a relative size, a length, a percentage, or inherit

For setting the size of text.

initial value: medium; the computed value is inherited; percentages refer to parent element’s font size

font-style

either normal, italic, oblique, or inherit

For making text italic.

initial value: normal; inherited

font-variant

either normal, small-caps, or inherit

For setting text in small caps.

initial value: normal; inherited

font-weight

either normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, or inherit

For applying, removing, and adjusting bold formatting.

initial value: normal; the numeric values are considered keywords and not integers (you can’t choose 150, for example); inherited

height

either a length, a percentage, auto, or inherit

For setting the height of an element.

initial value: auto; may be applied to all elements except non-replaced inline elements, table columns, and column groups; not inherited

left

either a length, a percentage, auto, or inherit

For setting the distance that an element should be offset from its parent element’s left edge.

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block

letter-spacing

either normal, a length, or inherit

For setting the amount of space between letters.

initial value: normal; inherited

line-height

either normal, a number, a length, a percentage, or inherit

For setting the amount of space between lines of text.

initial value: normal; inherited; percentages refer to the font size of the element itself

list-style

any combination of the values for list-style-type, list-style-position, and/or list-style-image, or use inherit

For setting a list’s marker (regular or custom) and its position.

initial value depends on initial values of individual elements; may only be applied to list elements; inherited

list-style-image

either a URL, none, or inherit

For designating a custom marker for a list.

initial value: none; may only be applied to list elements; overrides list-style-type; inherited

list-style-position

either inside, outside, or inherit

For determining the position of a list’s marker.

initial value: outside; may only be applied to list elements; inherited

list-style-type

either disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, or inherit

For setting a list’s marker.

initial value: disc; may only be applied to list elements; not used if list-style-type is valid; inherited

margin

one to four of the following: length, percentage, or auto, or inherit

For setting the amount of space between one or more sides of an element’s border and its parent and/or sibling elements.

initial value depends on browser and on value of width; not inherited; percentages refer to width of containing block

margin-top, margin-right, margin-bottom, margin-left

either a length, a percentage, auto, or inherit

For setting the amount of space between only one side of an element’s border and its parent and/or sibling elements.

initial value: 0; not inherited; percentages refer to width of containing block; the values for margin-right and margin-left may be overridden if sum of width, margin-right, and margin-left are larger than parent element’s containing block

max-height, max-width

either a length, a percentage, none, or inherit

For setting the maximum height and/or width of an element, respectively.

initial value: none; may not be applied to inline elements or table elements; not inherited; percentages refer to height/width of containing block

min-height, min-width

either a length, a percentage, or inherit

For setting the minimum height and/or width of an element, respectively.

initial value: 0; may not be applied to inline elements or table elements; not inherited; percentages refer to height/width of containing block

opacity

any decimal value from 0.0 (fully transparent) to 1.0 (fully opaque)

For making an element translucent or invisible.

initial value: 1; not inherited

orphans

either an integer or inherit

For specifying how many lines of an element may appear alone at the bottom of a page.

initial value: 2; may only be applied to block-level elements; inherited; only for use with print media

overflow

either visible, hidden, scroll, auto, or inherit

For determining where extra content should go if it does not fit in the element’s content area.

initial value: visible; may only be applied to block-level and replaced elements; not inherited

padding

one to four lengths or percentages, or inherit

For specifying the distance between one or more sides of an element’s content area and its border.

initial value depends on browser; not inherited; percentages refer to width of containing block

padding-top, padding-right, padding-bottom, padding-left

either a length, a percentage, or inherit

For specifying the distance between one side of an element’s content area and its border.

initial value: 0; not inherited; percentages refer to width of containing block

page-break-after, page-break-before

either always, avoid, auto, right, left, or inherit

For specifying when page breaks should or should not occur.

initial value: auto; may only be applied to block-level elements; not inherited; only for use with print media

page-break-inside

either avoid, auto, or inherit

For keeping page breaks from dividing an element across pages.

initial value: auto; may only be applied to block-level elements; inherited; only for use with print media

position

either static, relative, absolute, fixed, or inherit

For determining how an element should be positioned with respect to the document’s flow.

initial value: static; not inherited

right

either a length, a percentage, auto, or inherit

For setting the distance that an element should be offset from its parent element’s right edge.

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block

table-layout

one of fixed, auto, or inherit

For choosing the algorithm that should be used to determine the widths of cells.

initial value: auto; not inherited

text-align

one of left, right, center, justify, a string, or inherit

For aligning text.

initial value depends on browser and writing direction; may only be applied to block-level elements; inherited

text-decoration

any combination of underline, overline, line-through, and blink, or none or inherit

For decorating text (mostly with lines).

initial value: none; not inherited

text-indent

either a length, a percentage, or inherit

For setting the amount of space the first line of a paragraph should be indented.

initial value: 0; may only be applied to block-level elements; inherited; percentages refer to width of containing block

text-overflow

one of clip, ellipsis, or "string"

For specifying how text overflow must be handled when it is not visible.

initial value: clip

text-shadow

two to four length values, followed by a color

For adding one or more drop shadows to the text of an element. The length values refer (in order) to: position to the right of the text (negative values position to the left), position down from the box (negative values position up), blur radius (negative values are not allowed), and spread distance (negative values cause the shadow to contract). Each subsequent text-shadow value should be separated from its predecessor with a comma.

initial value: none; inherited

text-transform

either capitalize, uppercase, lowercase, none, or inherit

For setting the capitalization of an element’s text.

initial value: none; inherited

transform

none or a list of transform functions (matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew, skewX, skewY)

For transforming the shape, size, or orientation of an element.

initial value: none; not inherited; transform functions are applied in the same order they are listed

transform-origin

either one or two percentages or lengths (or one percentage and one length) or one of top, center, or bottom and/or one of left, center, or right

For defining the origin of any transforms applied to an element.

initial value: 50% 50%; not inherited; only applies to block-level and inline-level elements; percentages refer to the size of the element’s box

transition

a space-separated shorthand for defining (in order) transition-property, transition-duration, transition-timing-function, and transition-delay

For defining a transition effect on an element.

initial value depends on the individual property; applies to all elements, including the :before and :after pseudo-elements; the order of the values is important to this property

transition-property

none, all, or a comma-separated list of CSS properties

For identifying the CSS properties defined on an element that should have a transition applied to it.

initial value: all; not inherited; applies to all elements, including the :before and :after pseudo-elements

transition-duration

a time value in seconds or milliseconds

For defining the time that a transition takes to complete.

initial value: 0s (zero seconds); not inherited; applies to all elements including the :before and :after pseudo-elements

transition-timing-function

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(number, number, number, number)

For describing how the intermediate values used during a transition are to be calculated.

initial value: ease; applies to all elements, including the :before and :after pseudo-elements

transition-delay

a time value in seconds or milliseconds

For defining when a transition will start.

initial value: 0s (zero seconds); not inherited; applies to all elements, including the :before and :after pseudo-elements

top

either a length, a percentage, auto, or inherit

For setting the distance that an element should be offset from its parent element’s top edge.

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to height of containing block

vertical-align

either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length, or inherit

For aligning elements vertically.

initial value: baseline; may only be applied to inline-level and table cell elements; not inherited; percentages refer to the element’s line-height property

visibility

either visible, hidden, collapse, or inherit

For hiding elements without taking them out of the document’s flow.

initial value: inherit, which rather makes the fact that it’s not inherited a moot point

white-space

either normal, pre, nowrap, pre-wrap, pre-lined, or inherit

For specifying how white space should be treated.

initial value: normal; may only be applied to block-level elements; inherited

widows

either an integer or inherit

For specifying how many lines of an element may appear alone at the top of a page.

initial value: 2; may only be applied to block-level elements; inherited; only for use with print media

width

either a length, a percentage, auto, or inherit

For setting the width of an element.

initial value: auto; may not be applied to inline elements, table rows, or row groups; not inherited; percentages refer to width of containing block

word-spacing

either normal, a length, or inherit

For setting the distance between words.

initial value: normal; inherited

z-index

either auto, an integer, or inherit

For setting the depth of an element with respect to overlapping elements.

initial value: auto; may only be applied to positioned elements; not inherited

*

any element

Universal selector

E

an element of type E

Type selector

E[foo]

an E element with a “foo” attribute

Attribute selector

E[foo="bar"]

an E element whose “foo” attribute value is exactly equal to “bar” (quotes are optional)

Attribute selector

E[foo~="bar"]

an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar” (quotes are optional)

Attribute selector

E[foo^="bar"]

an E element whose “foo” attribute value begins with “bar” (quotes are optional)

Y

Attribute selector

E[foo$="bar"]

an E element whose “foo” attribute value ends with “bar” (quotes are optional)

Y

Attribute selector

E[foo*="bar"]

an E element whose “foo” attribute value contains “bar” somewhere within it (quotes are optional)

Y

Attribute selector

E[foo|="en"]

an E element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en” (quotes are optional)

Attribute selector

E:root

an E element, root of the document

Y

Structural pseudo-class

E:nth-child(n)

an E element, the nth child of its parent

Y

Structural pseudo-class

E:nth-last-child(n)

an E element, the nth child of its parent, counting from the last one

Y

Structural pseudo-class

E:nth-of-type(n)

an E element, the nth sibling of its type

Y

Structural pseudo-class

E:nth-last-of-type(n)

an E element, the nth sibling of its type, counting from the last one

Y

Structural pseudo-class

E:first-child

an E element, first child of its parent

Structural pseudo-class

E:last-child

an E element, last child of its parent

Y

Structural pseudo-class

E:first-of-type

an E element, first sibling of its type

Y

Structural pseudo-class

E:last-of-type

an E element, last sibling of its type

Y

Structural pseudo-class

E:only-child

an E element, only child of its parent

Y

Structural pseudo-class

E:only-of-type

an E element, only sibling of its type

Y

Structural pseudo-class

E:empty

an E element that has no children (including text nodes)

Y

Structural pseudo-class

E:link, E:visited

an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)

Link pseudo-classes

E:focus, E:hover, E:active

an E element during certain user actions

User action pseudo-classes

E:target

an E element being the target of the referring URI

Y

Target pseudo-class

E:lang(fr)

an element of type E in language “fr”

:lang() pseudo-class

E:enabled, E:disabled

a user interface element E that is enabled or disabled

Y

UI element states pseudo-classes

E:checked

a user interface element E that is checked (for instance a radio button or checkbox)

Y

UI element states pseudo-classes

E::first-line

the first formatted line of an E element

::first-line pseudo-element

E::first-letter

the first formatted letter of an E element

::first-letter pseudo-element

E::before

generated content before an E element

::before pseudo-element

E::after

generated content after an E element

::after pseudo-element

E.warning

an E element that has a class of "warning"

Class selector

E#myid

an E element with an ID equal to “myid”

ID selector

E:not(s)

an E element that does not match simple selector s (for example, input:not(.warning))

Y

Negation pseudo-class

E F

an F element descendant of an E element

Descendant combinator

E > F

an F element child of an E element

Child combinator

E + F

an F element immediately preceded by an E element

Adjacent sibling combinator

E ~ F

an F element preceded by an E element

Y

General sibling combinator

rgb(red-value, green-value,
blue-value)

RGB (red, green, blue) color model

values can be a number from 0 to 255 or a percentage (but not a combination of numbers and percentages)

rgb(0, 0, 0) and rgb(0%, 0%, 0%) are black

rgb(255, 255, 255) and rgb(100%, 100%, 100%) are white

rgba(red-value, green-value,
blue-value, alpha)

RGB color model, plus alpha transparency

color values are the same as for RGB syntax

the fourth parameter, alpha, is a decimal greater than or equal to 0.0 (full transparency) and less than or equal to 1.0 (full opacity)

hsl(hue-value, saturation-value, lightness-value)

HSL (hue, saturation, lightness) color model

the hue value is expressed as the angle of a color circle (a number from 0 to 360); 0 and 360 = red, 120 = green, 240 = blue, with other colors represented in between

the saturation value is expressed as a percentage; 0% is gray, and 100% is full saturation of the color

the lightness value is expressed as a percentage; 0% is black, 100% is white, and 50% is “normal”

hsla(hue-value, saturation-value, lightness-value, alpha)

HSL color model, plus alpha transparency

color values are the same as for HSL syntax

the fourth parameter, alpha, is a decimal greater than or equal to 0.0 (full transparency) and less than or equal to 1.0 (full opacity)

linear-gradient([origin,] color [stop], color [stop] [, color [stop]]*)

for example:

linear-gradient(bottom left, #fff, #f00 30%, #000)

results in a gradient, originating from the bottom left corner of the box and ending at the top right corner; it begins with white, which becomes red 30% of the way across the gradient, which then ends at black

origin specifies the corner of the box and can be a combination of top, left, bottom, right, and center keywords or percentage values (originating from the top left) relative to the size of the box

the first color value refers to the color at the start of the gradient; the last color value refers to the end of the gradient; you can have any number of colors in the gradient

stop specifies the location of the color in the gradient and can be a length or a percentage relative to the length of the entire gradient

by default, linear gradients originate from the top center of the box

by default, the browser attempts to distribute colors evenly across the gradient

if only two colors are specified, the default stops are 0% and 100%

radial-gradient([origin,] [shape-or-size-or-both,] color [stop], color [stop] [, color [stop]]*)

for example:

radial-gradient(30% 30%, circle closest-corner, #fff, #000)

results in a gradient originating 30% of the way from the top left corner of the box, radiating out as a circle until it reaches the nearest corner of the box; it starts with white in the center of the circle, and ends with black at the outer edge

origin specifies the corner of the box and can be a combination of top, left, bottom, right, and center keywords or percentage values (originating from the top left) relative to the size of the box

shape can be specified as circle or ellipse by default; the shape fills the dimensions of the box (so is an ellipse unless the box is square)

size can be a keyword: closest-side, closest-corner, farthest-side, farthest-corner, contain, cover

size can also explicitly set the dimensions of a radial gradient using a length value (or two length values, if you want to set the horizontal and vertical lengths separately)

the first color value refers to the color at the start of the gradient; the last color value refers to the end of the gradient; you can have any number of colors in the gradient

stop specifies the location of the color in the gradient and can be a length or a percentage relative to the length of the entire gradient

by default, radial gradients originate from the center of the box

by default, the size keyword is set to contain

by default, the browser attempts to distribute colors evenly across the gradient

if only two colors are specified, the default stops are 0% and 100%

* Earlier versions of WebKit (the rendering engine used in Chrome and Safari) used a different syntax for gradients. For more information about this syntax, please see www.webkit.org/blog/1424/css3-gradients/.

the width, minimum width, or maximum width of the targeted display area of the output device

applies to: visual and tactile media

height,
min-height,
max-height

a length

the height, minimum height, or maximum height of the targeted display area of the output device

applies to: visual and tactile media

device-width,
min-device-width,
max-device-width

a length

the width, minimum width, or maximum width of the rendering surface of the output device

applies to: visual and tactile media

device-height,
min-device-height,
max-device-height

a length

the height, minimum height, or maximum height of the rendering surface of the output device

applies to: visual and tactile media

orientation

portrait or landscape

the orientation is portrait when the height feature value is greater than or equal to the value of the width feature value; otherwise, the orientation is landscape

applies to: bitmap media

aspect-ratio,
min-aspect-ratio,
max-aspect-ratio

a ratio (e.g., 4/3 or 16/9)

the ratio, minimum ratio, or maximum ratio of the width feature value to the height feature value

applies to: bitmap media

device-aspect-ratio,
min-device-aspect-ratio,
max-device-aspect-ratio

a ratio (e.g., 4/3 or 16/9)

the ratio, minimum ratio, or maximum ratio of the device-width feature value to the device-height feature value

applies to: bitmap media

color,
min-color,
max-color

an integer

the number, minimum number, or maximum number of bits per color component of the output device; the value is 0 if the device is not a color device

applies to: visual media

color-index,
min-color-index,
max-color-index

an integer

the number, minimum number, or maximum number of entries in the color lookup table of the output device; the value is 0 if the device does not use a color lookup table

applies to: visual media

monochrome,
min-monochrome,
max-monochrome

an integer

the number, minimum number, or maximum number of bits per pixel in a monochrome frame buffer; the value is 0 if the device is not a monochrome device

applies to: visual media

resolution,
min-resolution,
max-resolution

a resolution value
(e.g., 300dpi or 118dpcm)

the resolution, minimum resolution, or maximum resolution of the output device (i.e., the pixel density); resolution (not min-resolution or max-resolution) never detects a device with non-square pixels

applies to: bitmap media

scan

progressive or interlace

the scanning process of TV output devices

applies to: TV media

grid

0 or 1

whether the device is grid or bitmap; the value is 1 if the output device is grid-based (e.g., a TTY terminal); otherwise, the value is 0; this media query can also be expressed without a value (for example, @media grid)

applies to: visual and tactile media

@font-face {

beginning of rule

font-family: "name of font";

definition of the font family, which can then be referenced as a value of the font-family property

src: url("path/to/font.ext") format("format-type");

identification of the source file (or files) for the font; when specifying multiple sources, separate each value with a comma

the format should be embedded-opentype for .eot files, woff for .woff files, truetype for .ttf files, and svg for .svg files

font-style: value;

specification of the embedded font’s style, using the same syntax as the font-style property

font-weight: value;

specification of the embedded font’s weight, using the same syntax as the font-weight property

}

closing of rule