Chapter 4. Property Reference
Universal Values
Any user agent that has fully implemented the “cascading and inheritance” module will honor the
values inherit and initial on all properties.
In practice (as of mid-2011), support for inherit is much more widespread than initial.
-
inherit Forces the value for the property to be inherited from the element’s parent element, even if the property in question is not inherited (e.g.,
background-image). Another way to think of this is that the value is copied from the parent element.-
initial Forces the value of the property to be the initial value defined by the relevant CSS module. For example,
font-style: initialsets the value offont-styletonormalregardless of thefont-stylevalue that would have been inherited from the parent element. In cases where the initial value is defined as determined by the user agent, such asfont-size, the value is set to the “default” defined by the user agent’s preferences.
Visual Media
animation
Expansions:
<animation-parameters>
<'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> || <'animation-iteration-count'> || <'animation-direction'>
Initial value:
Refer to individual properties
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
A shorthand property encompassing all the aspects of one or more comma-separated CSS animations. The parts of the value can occur in any order. As a result, beware possible ambiguity in the delay and duration values. As of this writing, it is most likely that the first time value will be taken to define the duration and the second to define the delay, but this cannot be guaranteed.
Examples:
div#slide {animation: 'slide' 2.5s linear 0 1 normal;}
h1 {animation: 'bounce' 0.5s 0.33s
ease-in-out infinite alternate;}animation-delay
Initial value:
0ms
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the amount of time that the user agent waits before starting the CSS animation(s). The timer starts when the UA applies the animation CSS. For a noninteractive element, this is likely (but not guaranteed) to be at the end of page load.
Examples:
body {animation-delay: 1s, 2000ms, 4s;}
a:hover {animation-delay: 400ms;}Note:
As of mid-2011, the actual default value in the specification is
0. It is given as 0ms here for clarity’s sake, as only length
values and numbers are permitted unitless zeroes.
animation-direction
Initial value:
normal
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Specifies whether a CSS animation with more than one cycle (see
animation-iteration-count)
should always go the same direction or should reverse direction on
every other cycle. For example, an alternate animation that moves an element
300 pixels to the right would move it 300 pixels to the left on every
other cycle, thus returning it to its starting position. Setting that
same animation to normal would
cause the element to move 300 pixels right, then jump back to its
starting place and move 300 pixels right again, and over and over
until the animation stops (assuming it ever does).
Examples:
body {animation-direction: alternate, normal, normal;}
#scanner {animation-direction: normal;}animation-duration
Initial value:
0ms
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the length of time it should take for each cycle of a
CSS animation to run from start to finish. Therefore, in animations
with only one cycle, it defines the total time of the animation. The
default value, 0ms, means that
there will be no animation besides moving the element from its start
state to its end state. Negative values are converted to 0ms.
Examples:
h1 {animation-duration: 10s, 5s, 2.5s, 1250ms;}
.zip {animation-duration: 90ms;}Note:
As of mid-2011, the actual default value in the specification is
0. It is given as 0ms here for clarity’s sake, as only length
values and numbers are permitted unitless zeroes.
animation-iteration-count
Initial value:
1
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the number of cycles in the animation(s). The initial
value, 1, means that the animation
will run exactly once, going from the start state to the end state. A
fractional value (e.g., 2.75) means
the animation will be halted midway through its final cycle. A value
of 0 means that there will be no
animation; negative values are converted to 0. As its name implies, infinite means the animation will never end.
Use with caution.
Examples:
body {animation-iteration-count: 2, 1, 7.5875;}
ol.dance {animation-iteration-count: infinite;}animation-name
Initial value:
none
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the declared name(s) of CSS animation(s). Each IDENT
refers to a CSS animation keyframe at-rule. If an IDENT has not been
declared or the keyword none is
supplied, the animation is not run regardless of the values of any
other animation properties. For example, given animation-name: 'bounce', none, 'jumper';
and that the animation name jumper
has not been defined, the first animation will run but the second and
third will not.
Examples:
html {animation-name: 'turn', 'slide', none;}
h2 {animation-name: 'flip';}animation-play-state
Initial value:
running
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the run state of one or more CSS animations. The default
state of running is the most useful
in static CSS environments, but it can be used to easily stop or start
animations via DOM scripting or interactive CSS (e.g., :hover).
Examples:
pre {animation-play-state: running, paused, running;}
table {animation-play-state: running;}Note:
As of mid-2011, this property was being considered for removal from the CSS Animations Module.
animation-timing-function
Expansions:
<timing-function>
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
Initial value:
ease
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines how an animation is run over the course of an
animation’s full cycle or within an individual keyframe, depending on
where the property is used. The
keywords are all defined to have cubic-bezier() equivalents; for example,
linear is equivalent to cubic-bezier(0,0,1,1). They should therefore have
consistent effects across user agents, though, as always, authors are
cautioned to avoid dependency on consistency.
Examples:
h1 {animation-timing-function:
ease, ease-in, cubic-bezier(0.13,0.42,0.67,0.75)}
p {animation-timing-function: linear;}backface-visibility
Initial value:
visible
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether the back side of an element is visible once the
element has been rotated in a simulated 3D space and is “facing away”
from the viewer. If the value is hidden, the element will be effectively
invisible until it is rotated such that the front side of the element
is once more “facing toward” the viewer.
Examples:
div.card {backface-visibility: hidden;}
span.cubeside {backface-visibility: visible;}background
Expansions:
<bg-layer>
<bg-image> || <bg-position> [ / <bg-size> ]? || <bg-repeat> || <bg-attachment'> || < bg-box>{1,2}
<final-bg-layer>
<bg-image> || <bg-position> [ / <bg-size> ]? || <bg-repeat> || <bg-attachment'> || < bg-box>{1,2} || <bg-color>
Initial value:
Refer to individual properties
Applies to:
All elements
Inherited:
No
Percentages:
Allowed for <bg-position> (see background-position) and refer to
both the dimensions of the element’s background area and the
dimensions of the origin image
Computed value:
See individual properties
Description:
A shorthand way of expressing the various background properties of one or more element backgrounds using a single declaration. As with all shorthands, this property will set all of the allowed values (e.g., the repeat, position, and so on) to their defaults if the values are not explicitly supplied. Thus, the following two rules will have the same appearance:
background: yellow; background: yellow none top left repeat;
Furthermore, these defaults can override previous declarations made with more specific background properties. For example, given the following rules:
h1 {background-repeat: repeat-x;}
h1, h2 {background: yellow url(headback.gif);}…the repeat value for both h1
and h2 elements will be set to the
default of repeat, overriding the
previously declared value of repeat-x.
When declaring multiple backgrounds, only the last may have a background color. In cases where multiple background images overlap, the images are stacked with the first highest and the last lowest. This is the exact reverse of how overlapping is handled in CSS positioning, and so may seem counterintuitive.
Examples:
body {background: white url(bg41.gif)
fixed center repeat-x;}
p {background:
url(/pix/water.png) center repeat-x,
top left url(/pix/stone.png) #555;}
pre {background: yellow;}background-attachment
Expansions:
<bg-attachment>
scroll | fixed | local
Initial value:
scroll
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether background images scroll along with the element when the document is scrolled. This property can be used to create “aligned” backgrounds; for more details, see Chapter 9 of CSS: The Definitive Guide, third edition (O’Reilly).
Examples:
body {background-attachment: scroll, scroll, fixed;}
div.fixbg {background-attachment: fixed;}Note:
In versions of Internet Explorer before IE7, this property is
supported only for the body
element.
background-clip
Expansions:
<bg-box>
border-box | padding-box | content-box
Initial value:
border-box
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the boundary within the element box at which the
background is clipped; that is, no longer drawn. Historically, this
has been equivalent to the default value of border-box, where the background goes to the
outer edge of the border area. This property allows more constrained
clipping boxes at the outer edge of the padding area and at the
content edge itself.
Examples:
body {background-clip: content-box;}
.callout {
background-clip: content-box, border-box,
padding-box;}background-color
Initial value:
transparent
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines a solid color for the background of the element. This
color fills the box defined by the value of background-clip—by default, the content,
padding, and border areas of the element, extending to the outer edge
of the element’s border. Borders that have transparent sections (such
as dashed borders) will show the background color through the
transparent sections in cases where the background color extends into
the border area.
Examples:
h4 {background-color: white;}
p {background-color: rgba(50%,50%,50%,0.33);}
pre {background-color: #FF9;}background-image
Expansions:
<bg-image>
<image> | none
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Absolute URI
Description:
Places one or more images in the background of the element.
Depending on the value of background-repeat, the image may tile
infinitely, along one axis, or not at all. The initial background
image (the origin image) is placed according to the value of background-position.
Examples:
body {
background-image: url(bg41.gif), url(bg43.png),
url(bg51.jpg);}
h2 {background-image: url(http://www.pix.org/dots.png);}background-origin
Expansions:
<bg-box>
border-box | padding-box | content-box
Initial value:
padding-box
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the boundary within the element box against which
background-image positioning is calculated.
Historically, this has been equivalent to the default value of
padding-box. This property allows
for different positioning contexts. Note that if the value of background-origin is “further out” than the value
for background-clip, and the image
is positioned to an edge, part of it may be clipped. For
example:
div#example {background-origin: border-box;
background-clip: content-box;
background-position: 100% 100%;}In this case the image will be placed so that its bottom-right corner aligns with the bottom-right corner of the outer border edge, but the only parts of it that will be visible are those that fall within the content area.
Examples:
html, body {background-origin: border-box;}
h1 {background-origin: content-box, padding-box;}background-position
Expansions:
<bg-position>
[ [ top | bottom ] | [ <percentage> |
<length> | left | center | right ] [ <percentage> |
<length> | top | center | bottom ]? | [ center | [ left | right ] [ <percentage> |
<length> ]? ] && [ center | [ top | bottom ] [ <percentage> |
<length> ]? ] ]
Initial value:
0% 0%
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the corresponding point on both the element and the origin image
Computed value:
The absolute length offsets if <length> is declared; otherwise, percentage values
Description:
Defines the position(s) of one or more backgrounds’ origin
images (as defined by background-image); this is the point from
which any background repetition or tiling will occur. Percentage
values define not only a point within the element, but also the same
point in the origin image itself, thus allowing (for example) an image
to be centered by declaring its position to be 50% 50%. When percentage or length values
are used, the first is always the horizontal position, and the second
the vertical. If only one value is given, it sets the horizontal
position, while the missing value is assumed to be either center or 50%. Negative values are permitted and may
place the origin image outside the element’s content area without
actually rendering it. The context within which an origin image is
placed can be affected by the value of background-origin.
Examples:
body {background-position: top center;}
div#navbar {background-position: right, 50% 75%, 0 40px;}
pre {background-position: 10px 50%;}background-repeat
Expansions:
<bg-repeat-style>
repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
Initial value:
repeat
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the tiling pattern for one or more background images.
The repetition begins from the origin image, which is defined as the
value of background-image and is
placed according to the value of background-position (and possibly background-origin). For the keywords
space and round,
the image is tiled as many times as it will fit in the background area
without being clipped and then the first and last images are placed
against their respective background edges. The difference is that
space causes the intervening images
to be regularly spaced, and round
causes them to be stretched to touch each other. Note that repeat-x is equivalent to repeat no-repeat, and repeat-y is equivalent to no-repeat repeat.
Examples:
body {background-repeat: no-repeat;}
h2 {background-repeat: repeat-x, repeat-y, space;}
ul {background-repeat: repeat-y, round space, repeat;}background-size
Expansions:
<bg-repeat-style>
[ <length> | <percentage> | auto ]{1,2} | cover | contain
Initial value:
auto
Applies to:
All elements
Inherited:
No
Computed value:
See description
Description:
Defines the size of one or more background origin images. If two
keywords are used (e.g., 50px 25%),
the first defines the horizontal size of the image and the second
defines the vertical size. The origin image can be deformed to exactly
cover the background with 100%
100%. By contrast, cover
scales up the image to cover the entire background even if some of it
exceeds the background area and is thus clipped, and contain scales up the origin image so that
at least one of its dimensions exactly fills the corresponding axis of
the background area.
Examples:
body {background-size: 100% 90%;}
div.photo {background-size: cover;}border
Initial value:
Refer to individual properties
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
A shorthand property that defines the width, color, and style of
an element’s border. Note that while none of the values are actually
required, omitting a border style will result in no border being
applied because the default border style is none.
Examples:
h1 {border: 2px dashed olive;}
a:link {border: blue solid 1px;}
p.warning {border: double 5px red;}border-bottom
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that defines the width, color, and style of
the bottom border of an element. As with border, omission of a border style will
result in no border appearing.
Examples:
ul {border-bottom: 0.5in groove green;}
a:active {border-bottom: purple 2px dashed;}border-bottom-color
Initial value:
The value of color for the
element
Applies to:
All elements
Inherited:
No
Computed value:
If no value is declared, use the computed value of the property
color for the same element;
otherwise, same as declared value
Description:
Defines the color for the visible portions of the bottom border
of an element. The border’s style must be something other than
none or hidden for any visible border to
appear.
Examples:
ul {border-bottom-color: green;}
a:active {border-bottom-color: purple;}border-bottom-left-radius
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the dimensions of the element’s border box
Computed value:
Same as declared value
Description:
Defines the rounding radius for the bottom-left corner of an
element’s border. If two values are supplied, the first is the
horizontal radius and the second is the vertical radius. See border-radius for a description of how the
values create the rounding shape.
Examples:
h1 {border-bottom-left-radius: 10%;}
h2 {border-bottom-left-radius: 1em 10px;}border-bottom-right-radius
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the dimensions of the element’s border box
Computed value:
Same as declared value
Description:
Defines the rounding radius for the bottom-right corner of an
element’s border. If two values are supplied, the first is the
horizontal radius and the second is the vertical radius. See border-radius for a description of how the
values create the rounding shape.
Examples:
h1 {border-bottom-right-radius: 10%;}
h2 {border-bottom-right-radius: 1em 10px;}border-bottom-style
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the style for the bottom border of an element. The value
must be something other than none
for any border to appear.
Examples:
ul {border-bottom-style: groove;}
a:active {border-bottom-style: dashed;}border-bottom-width
Initial value:
medium
Applies to:
All elements
Inherited:
No
Computed value:
Absolute length; 0 if the
style of the border is none or
hidden
Description:
Defines the width for the bottom border of an element, which
will take effect only if the border’s style is something other than
none. If the border style is
none, the border width is
effectively reset to 0. Negative
length values are not permitted.
Examples:
ul {border-bottom-width: 0.5in;}
a:active {border-bottom-width: 2px;}border-collapse
Initial value:
separate
Applies to:
Elements with a display value
of table or inline-table
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the layout model used in laying out the borders in a table—i.e., those applied to cells, rows, and so forth. Although the property applies only to tables, it is inherited by all the elements within the table and actually used by them.
Examples:
table {border-collapse: separate; border-spacing: 3px 5px;}Note:
In CSS2.0, the default value was collapse.
border-color
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that sets the color for the visible
portions of the overall border of an element or sets a different color
for each of the four sides. Remember that a border’s style must be
something other than none or
hidden for any visible border to
appear.
Examples:
h1 {border-color: purple;}
a:visited {border-color: maroon;}border-image
Values:
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'>? [ / <'border-image-outset'> ]? ]? || <'border-image-repeat'>
Initial value:
See individual properties
Applies to:
All elements except table elements where
border-collapse is collapse
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that defines the source, slicing pattern, border width, degree of extension, and repetition of an image-based border. The syntax is somewhat unusual compared to the rest of CSS, so take extra time with it. For example, three of the five values possible are slash-separated and must be listed in a specific order.
Note that it is effectively impossible to take a simple image
(say, a star) and repeat it around the edges of an element. To create
that effect, you must create a single image that contains nine copies
of the image you wish to repeat in a 3×3 grid. It may also be
necessary to set border-width
(not border-image-width) to be large enough to
show the image, depending on the value of border-image-outset.
Examples:
div.starry {border-image: url(stargrid.png) 5px repeat;}
aside {
border-image: url(asides.png) 100 50 150 / 8 3 13 /
2 stretch round;}Note:
As of early 2011, browser support for border-image was incomplete and
inconsistent, whereas none of the related properties (e.g., border-image-source) were supported at all. They are
included because browsers were expected to harmonize support by the
end of 2011.
border-image-outset
Initial value:
0
Applies to:
All elements except table elements where
border-collapse is collapse
Inherited:
No
Computed value:
Same as declared value (but see description)
Description:
Defines the distance by which a border image may exceed the
border area of the element. The values define distances from the top,
right, bottom, and left edges of the border image, in that order.
Numbers are calculated with respect to the image’s intrinsic
coordinate system; thus, for a raster image, the number 7 is taken to mean seven pixels. Images in
formats such as SVG may have different coordinate systems. Negative
values are not permitted.
Examples:
aside {border-image-outset: 2;}
div#pow {border-image-outset: 10 17 13 5;}Note:
As of early 2011, browsers did not support border-image-outset. It is included because
border-image (which encompasses
border-image-outset)
was supported and browsers were expected to add
border-image-outset support by the
end of 2011.
border-image-repeat
Initial value:
stretch
Applies to:
All elements except table elements where
border-collapse is collapse
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the repetition pattern (or lack thereof) of the sides of
a border image. stretch causes a
single copy of the image to be stretched to fit the border segment
(top, right, bottom, or left). repeat “tiles” the image in a manner
familiar from background images, though border images are only ever
tiled along one axis. round “tiles”
the border image as many times as it will fit without clipping, then
(if necessary) scales the entire set of tiled images to exactly fit
the border segment.
Examples:
div.starry {border-image-repeat: repeat;}
aside {border-image-repeat: stretch round;}Note:
As of early 2011, browsers did not support border-image-repeat. It is included because
border-image (which encompasses
border-image-repeat)
was supported and browsers were expected to add
border-image-repeat support by the
end of 2011.
border-image-slice
Initial value:
100%
Applies to:
All elements except table elements where
border-collapse is collapse
Inherited:
No
Percentages:
Refer to the size of the border image
Computed value:
Same as declared value
Description:
Defines “slice distances,” which are offsets from the top, right, bottom, and left edges of the border image. Taken together, they divide the image into nine regions, which correspond to the eight segments of the element’s border (four corners and four sides) and the element’s background area.
In cases where two opposite regions combine to exceed the total
of the dimension they share, both are made completely transparent. For
example, if the top slice offset value is 10 and the bottom slice offset value is
20, but the source image is only 25
pixels tall, the two exceed the height of the image. Thus, both the
top and bottom segments of the border will be entirely transparent.
The same holds for right and left slices and width. Corners are never
forcibly made transparent, even in cases where their slices may
overlap in the source image.
Examples:
div.starry {border-image-slice: 5px;}
aside {border-image-slice: 100 50 150;}Note:
As of early 2011, browsers did not support border-image-slice. It is included because
border-image (which encompasses
border-image-slice)
was supported and browsers were expected to add
border-image-slice support by the
end of 2011.
border-image-source
Initial value:
none
Applies to:
All elements except table elements where
border-collapse is collapse
Inherited:
No
Percentages:
Refer to the size of the border image
Computed value:
Same as declared value
Description:
Supplies the location of the image to be used as an element’s border image.
Examples:
div.starry {border-image-source: url(stargrid.png);}
aside {border-image-source: url(asides.png);}Note:
As of early 2011, browsers did not support border-image-source. It is included because
border-image (which encompasses
border-image-source)
was supported and browsers were expected to add
border-image-source support by the
end of 2011.
border-image-width
Initial value:
1
Applies to:
All elements except table elements where
border-collapse is collapse
Inherited:
No
Percentages:
Refer to the size of the border image area
Computed value:
Same as declared value (but see description)
Description:
Defines an image width for each of the four sides of an image
border. Border image slices that have a different width than the
border image width value are
scaled to match it, which may impact how they are repeated. For
example, if the right edge of an image border is 10 pixels wide, but
border-image-width: 3px; has been
declared, the border images along the right side are scaled to be
three pixels wide.
Note that border-image-width
is different from border-width: a
border image’s width can be
different than the width of the border area. In cases where the image
is wider or taller than the border area, it will be clipped by default
(but border-image-outset may
prevent this). If it is narrower or shorter than the border area, it
will not be scaled up.
Examples:
aside {border-image-width: 8 3 13;}
div#pow{border-image-width: 25px 35;}Note:
As of early 2011, browsers did not support border-image-width. It is included because
border-image (which encompasses
border-image-width)
was supported and browsers were expected to add
border-image-width support by the
end of 2011.
border-left
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that property defines the width, color, and
style of the left border of an element. As with border, omission of a border style will
result in no border appearing.
Examples:
p {border-left: 3em solid gray;}
pre {border-left: double black 4px;}border-left-color
Initial value:
The value of color for the
element
Applies to:
All elements
Inherited:
No
Computed value:
If no value is declared, use the computed value of the property
color for the same element;
otherwise, same as declared value
Description:
Defines the color for the visible portions of the left border of
an element. The border’s style must be something other than none or hidden for any visible border to
appear.
Examples:
p {border-left-color: gray;}
pre {border-left-color: black;}border-left-style
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the style for the left border of an element. The value
must be something other than none
for any border to appear.
Examples:
p {border-left-style: solid;}
pre {border-left-style: double;}border-left-width
Initial value:
medium
Applies to:
All elements
Inherited:
No
Computed value:
Absolute length; 0 if the
style of the border is none or
hidden
Description:
Defines the width for the left border of an element, which will
take effect only if the border’s style is something other than
none. If the border style is
none, the border width is
effectively reset to 0. Negative
length values are not permitted.
Examples:
p {border-left-width: 3em;}
pre {border-left-width: 4px;}border-radius
Initial value:
0
Applies to:
All elements except table elements where
border-collapse is collapse
Inherited:
No
Percentages:
Refer to the dimensions of the element’s border box (see description)
Computed value:
Same as declared value
Description:
A shorthand property that defines the rounding radius for the bottom-right corner of an element’s border. The actual corners will be the height and width declared. For example, suppose the following:
.callout {border-radius: 10px;}Each corner of an element with a class of callout will have a rounding that
is 10 pixels across, as measured from the beginning of the rounding to
the outer side edge of the element, and similarly 10 pixels high. This
can be visualized as if the element has 10-pixel-radius
(20-pixel-diameter) circles drawn in its corners and the border then
bent along the circles’ edges.
Note that, given the way the syntax is defined, if two values are supplied, the first applies to the top-left and bottom-right corners, and the second to the top-right and bottom-left corners. To create oval-shaped rounding by supplying one value for the horizontal radius of each corner and a second value for the vertical radii, separate them with a slash:
.callout {border-radius: 10px / 20px;}That will cause each of the four corners’ rounding to be 10 pixels across and 20 pixels tall. This extends out to setting the four corners uniquely, like so:
.callout {border-radius: 10px 20px 30px 40px /
1em 2em 3em 4em;}This is equivalent to declaring:
.callout {border-top-left-radius: 10px 1em;
border-top-right-radius: 20px 2em;
border-bottom-right-radius: 30px 3em;
border-bottom-left-radius: 40px 4em;}Using fewer than four values causes the supplied values to be
repeated in the familiar pattern (see margin, padding, etc.) but with
a slight offset. Rather than being Top-Right-Bottom-Left (TRBL,
or “trouble”), the pattern is
TopLeft-TopRight-BottomRight-BottomLeft (TLTRBRBL, or “tilter
burble”). Otherwise, the repeat pattern is the same: 1em is the same as 1em 1em 1em 1em, 1em 2em is the same as 1em 2em 1em 2em, and so on. Thus, there can
be differing numbers of values to either side of the slash, as the
following two declarations are equivalent:
.callout {border-radius: 2em 3em 4em / 5%;}
.callout {border-radius: 2em 3em 4em 3em / 5% 5% 5% 5%;}Percentages, when used, are calculated with respect to the size
of the element’s border box (the box defined by the outer edges of the
element’s border area) dimension on the related axis. Thus, in the previous declarations, the 5% values are calculated to be 5% of the
height of the element’s border box because values after the slash
define vertical radii. Any percentages used before the slash are
calculated as percentages of the width of the element’s border
box.
Examples:
a[href] {border-radius: 0.5em 50%;}
.callout {
border-radius: 10px 20px 30px 40px /
1em 2em 3em 4em;}border-right
Initial value:
See individual properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that defines the width, color, and style of
the right border of an element. As with border, omission of a border style will
result in no border appearing.
Examples:
img {border-right: 30px dotted blue;}
h3 {border-right: cyan 1em inset;}border-right-color
Initial value:
The value of color for the
element
Applies to:
All elements
Inherited:
No
Computed value:
If no value is declared, use the computed value of the property
color for the same element;
otherwise, same as declared value
Description:
Defines the color for the visible portions of the right border
of an element. The border’s style must be something other than
none or hidden for any visible border to
appear.
Examples:
img {border-right-color: blue;}
h3 {border-right-color: cyan;}border-right-style
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the style for the right border of an element. The value
must be something other than none
for any border to appear.
Examples:
img {border-right-style: dotted;}
h3 {border-right-style: inset;}border-right-width
Initial value:
medium
Applies to:
All elements
Inherited:
No
Computed value:
Absolute length; 0 if the
style of the border is none or
hidden
Description:
Defines the width for the right border of an element, which will
take effect only if the border’s style is something other than
none. If the border style is
none, the border width is
effectively reset to 0. Negative
length values are not permitted.
Examples:
img {border-right-width: 30px;}
h3 {border-right-width: 1em;}border-spacing
Initial value:
0
Applies to:
Elements with a display value
of table or inline-table
Inherited:
Yes
Computed value:
Two absolute lengths
Description:
Defines the distance between table cell borders in the separated
borders table layout model. The first of the two length values is the
horizontal separation and the second is the vertical. This property is
only honored when border-collapse
is set to separate; otherwise, it
is ignored. Although the property applies only to tables, it is
inherited by all of the elements within the table.
Examples:
table {border-collapse: separate; border-spacing: 0;}
table {border-collapse: separate;
border-spacing: 3px 5px;}border-style
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property used to define the styles for the overall
border of an element or for each side individually. The value of any
border must be something other than none for the border to appear. Note that
setting border-style to none (its default value) will result in no
border at all. In such a case, any value of border-width will be ignored and the width
of the border will be set to 0. Any
unrecognized value from the list of values should be reinterpreted as
solid.
Examples:
h1 {border-style: solid;}
img {border-style: inset;}border-top
Initial value:
See individual properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that defines the width, color, and style of
the top border of an element. As with border, omission of a border style will
result in no border appearing.
Examples:
ul {border-top: 0.5in solid black;}
h1 {border-top: dashed 1px gray;}border-top-color
Initial value:
The value of color for the
element
Applies to:
All elements
Inherited:
No
Computed value:
If no value is declared, use the computed value of the property
color for the same element;
otherwise, same as declared value
Description:
Sets the color for the visible portions of the top border of an
element. The border’s style must be something other than none or hidden for any visible border to
appear.
Examples:
ul {border-top-color: black;}
h1 {border-top-color: gray;}border-top-left-radius
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the dimensions of the element’s border box
Computed value:
Same as declared value
Description:
Defines the rounding radius for the top-left corner of an
element’s border. If two values are supplied, the first is the
horizontal radius and the second is the vertical radius. See border-radius for a description of how the
values create the rounding shape.
Examples:
h1 {border-top-left-radius: 10%;}
h2 {border-top-left-radius: 1em 10px;}border-top-right-radius
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the dimensions of the element’s border box
Computed value:
Same as declared value
Description:
Defines the rounding radius for the top-right corner of an
element’s border. If two values are supplied, the first is the
horizontal radius and the second is the vertical radius. See border-radius for a description of how the
values create the rounding shape.
Examples:
h1 {border-top-right-radius: 10%;}
h2 {border-top-right-radius: 1em 10px;}border-top-style
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the style for the top border of an element. The value
must be something other than none
for any border to appear.
Examples:
ul {border-top-style: solid;}
h1 {border-top-style: dashed;}border-top-width
Initial value:
medium
Applies to:
All elements
Inherited:
No
Computed value:
Absolute length; 0 if the
style of the border is none or
hidden
Description:
Defines the width for the top border of an element, which will
take effect only if the border’s style is something other than
none. If the style is none, the width is effectively reset to
0. Negative length values are not
permitted.
Examples:
ul {border-top-width: 0.5in;}
h1 {border-top-width: 1px;}border-width
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that defines the width for the overall
border of an element or for each side individually. The width will
take effect for a given border only if the border’s style is something
other than none. If the border
style is none, the border width is
effectively reset to 0. Negative
length values are not permitted.
Examples:
h1 {border-width: 2ex;}
img {border-width: 5px thick thin 1em;}bottom
Initial value:
auto
Applies to:
Positioned elements (that is, elements for which the value of
position is
something other than static)
Inherited:
No
Percentages:
Refer to the height of the containing block
Computed value:
For relatively positioned elements, see description; for
static elements, auto; for length values, the corresponding
absolute length; for percentage values, the declared value; otherwise,
auto
Description:
Defines the offset between the bottom outer margin edge of a
positioned element and the bottom edge of its containing block. For
relatively positioned elements, if both bottom and top are auto, their computed values are both
0; if one of them is auto, it becomes the negative of the other;
if neither is auto, bottom will become the negative of the value
of top.
Examples:
div#footer {position: fixed; bottom: 0;}
sup {position: relative; bottom: 0.5em;
vertical-align: baseline;}box-align
Initial value:
stretch
Applies to:
Elements with a display value
of box or inline-box
Inherited:
No
Computed value:
As declared
Description:
Defines how flexible boxes are laid out along the axis
perpendicular to the axis of orientation (see box-orient). The default, stretch, means that the children of the box
are stretched to its height (if its
box-orient is horizontal) or its width (if its box-orient is vertical). start and end refer to the top and bottom edges of
horizontal boxes, and most likely the left and right edges of vertical
boxes in left-to-right languages (though this is not specified).
center aligns the center of the
flexible boxes with the centerline of the axis of orientation.
Examples:
div#layout {box-align: stretch;}
.icicle {box-align: start;}Note:
This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.
box-decoration-break
Initial value:
clone
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether the decorations—the background, padding, borders, rounded corners, border image, and box shadow—of a box that has been rendered in multiple pieces are applied to each piece separately or applied to the entire box before it is broken apart.
The most common case is an inline element that wraps across one
or more line breaks. With the default behavior, slice, the pieces of the inline element are
drawn as though the whole element was laid out in a single line and
then sliced apart at each line break. If clone is declared, then each piece of the
element is decorated as though they were separate elements sharing the
same styles.
box-decoration-break also
applies to block boxes that are split across columns or pages.
Examples:
span {box-decoration-break: clone;}
a {box-decoration-break: slice;}box-direction
Initial value:
normal
Applies to:
Elements with a display value
of box or inline-box
Inherited:
No
Computed value:
As declared
Description:
Defines the direction in which the children of a box are laid
out. If the value is reverse, then
the children are laid out from right to left in a horizontal box, and
from bottom to top in a vertical box.
Examples:
#tower {box-direction: reverse;}Note:
This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.
box-flex
Initial value:
0
Applies to:
Normal-flow children of an element with a display value of box or inline-box
Inherited:
No
Computed value:
As declared
Description:
Defines the “flexibility” of an element that is the child of a
box. The box-flex values for all the flexible boxes
in a group are added together, and then each is divided by that total
to get the flexibility. Thus, for example, if three flexible boxes in
a group all have a value of 1, then
each has a flexibility of 0.33. If one of them has its box-flex value changed to 2, then it would have a flexibility of 0.5
and the other two would each have a flexibility of 0.25. The default
value of 0 indicates that the box
is inflexible.
After the flexible boxes are laid out as normal, any extra space
left over within the parent box is distributed to the flexible boxes
according to its flexibility. To continue the previous example, if
there are 100 pixels of space left over, then the flex-box: 2 element gets 50 pixels added to
it, and the other two each get 25 pixels. Similarly, if the flexible
boxes overflow the parent box, they are reduced in size
proportionately.
Examples:
#nav li {box-flex: 1;}Note:
This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.
box-lines
Initial value:
single
Applies to:
Elements with a display value
of box or inline-box
Inherited:
No
Computed value:
As declared
Description:
Defines how flexible boxes are laid out if they are too wide to
fix in a horizontal box (see box-orient). Given the value
multiple, they will be laid out in as many “lines”
as necessary to display them all. This is reminiscent of float layout
when multiple floats cannot fit next to one another, though the
mechanism is not exactly the same.
Examples:
div#gallery {box-lines: multiple;}Note:
This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.
box-ordinal-group
Initial value:
1
Applies to:
Normal-flow children of an element with a display value of box or inline-box
Inherited:
No
Computed value:
As declared
Description:
Defines the ordinal group to which flexible boxes belong.
Authors can assign flexible boxes to arbitrary group numbers. When
laying out the boxes, the groups are laid out in numeric order, with
the flexible boxes within each group arranged according to their
source order and the value of box-direction. This allows authors to
arrange flexible boxes within their parent box in a manner completely
independent of their source order.
Examples:
.sticky {box-ordinal-group: 1;}
.footer {box-ordinal-group: 13;}Note:
This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.
box-orient
Initial value:
inline-axis
Applies to:
Elements with a display value
of box or inline-box
Inherited:
No
Computed value:
As declared
Description:
Defines the direction in which flexible boxes are arranged
within their parent box. horizontal
boxes arrange the flexible boxes from left to right, and vertical boxes from top to bottom. inline-axis and block-axis have language-dependent effects;
in a left-to-right, top-to-bottom language such as English, they are
equivalent to horizontal and vertical.
Examples:
#nav {box-orient: horizontal;}
#sidebar {box-orient: vertical;}Note:
This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.
box-pack
Initial value:
start
Applies to:
Elements with a display value
of box or inline-box
Inherited:
No
Computed value:
As declared
Description:
Defines how flexible boxes are laid out when the sum of their
dimensions along the axis of orientation (see box-orient) is less than the
total amount of space available.
Examples:
#gallery {box-pack: center;}
.subcolumns {box-pack: left;}Note:
This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.
box-shadow
Expansions:
<shadow>
inset? && [
<length>{2,4} && <color>? ]
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
As declared with lengths made absolute and colors computed
Description:
Defines one or more shadows that are derived from the shape of
the element box. Either outset (“drop”) shadows or inset shadows can
be defined, the latter with use of the optional inset keyword. Without that keyword, the
shadow will be outset.
The four length values that can be declared are, in order: horizontal offset, vertical offset, blur distance, and spread distance. When positive, the offset values go down and the right; when negative, back and to the left. Positive spread values increase the size of the shadow and negative values contract it. Blur values cannot be negative.
Note that all shadows are clipped by the element’s border edge. Thus, an outset shadow is only drawn outside the border edge. A semitransparent or fully transparent element background will not reveal an outset shadow “behind” the element. Similarly, inset shadows are only visible inside the border edge and are never drawn beyond it.
Examples:
h1 {box-shadow: 5px 10px gray;}
table th {
box-shadow: inset 0.5em 0.75em 5px −2px
rgba(255,0,0,0.5);}box-sizing
Initial value:
content-box
Applies to:
All elements that accept the width or height properties
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether the height
and width of the element define the
dimensions of the content box (the historical behavior) or the border
box. If the latter, the value of width defines the distance from the left
outer border edge to the right outer border edge; similarly, height defines the distance from the top
outer border edge to the bottom outer border edge. Any padding or
border widths are “subtracted” from those dimensions instead of the
historical “additive” behavior. Thus, given:
body {box-sizing: border-box; width: 880px;
padding: 0 20px;}…the final width of the content area will be 840 pixels (880-20-20).
Examples:
body {box-sizing: border-box;}caption-side
Initial value:
top
Applies to:
Elements with a display of
table-caption
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the placement of a table caption with respect to the table box. The caption is rendered as though it were a block-level element placed just before (or after) the table.
Examples:
caption {caption-side: top;}Note:
The values left and right appeared in CSS2 but were dropped from
CSS2.1 because of a lack of widespread support. Some versions of
Firefox support left and right.
clear
Initial value:
none
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines to which side (or sides) of an element no floating element may be placed. If normal layout of a cleared element would result in a floated element appearing on the cleared side, the cleared element is pushed down until it sits below (clears) the floated element. In CSS1 and CSS2, this is accomplished by automatically increasing the top margin of the cleared element. In CSS2.1, clearance space is added above the element’s top margin, but the margin itself is not altered. In either case, the end result is that the element’s top outer border edge is just below the bottom outer margin edge of a floated element on the declared side.
Examples:
h1 {clear: both;}
p + h3 {clear: right;}clip
Values:
rect(top,
right, bottom,
left) |
auto
Applies to:
Absolutely positioned elements (in CSS2, clip applied to block-level and replaced
elements)
Inherited:
No
Computed value:
For a rectangle, a set of four computed lengths representing the edges of the clipping rectangle; otherwise, same as declared value
Description:
Defines a clipping rectangle inside of which the content of an
absolutely positioned element is visible. Content outside the clipping
area is treated according to the value of overflow. The clipping area can be smaller
or larger than the content area of the element, the latter being
accomplished with negative length values.
In current browsers, the clipping area is defined by using the
rect() value to define the offsets
of the top, right, bottom, and left edges of the clipping areas with
respect to the top-left corner of the element. Thus, the value
rect(5px, 10px, 40px, 5px) would
place the top edge of the clipping area 5px down from the top edge of
the element, the right edge of the clipping area 10 pixels to the
right of the left edge of the element, the bottom edge of the clipping
area 40 pixels down from the top edge of the element, and the left
edge of the clipping area 5 pixels to the right of the left edge of
the element.
Examples:
div.sidebar {overflow: scroll; clip: 0 0 5em 10em;}
img.tiny {overflow: hidden; clip: 5px 5px 20px 20px;}color
Initial value:
User agent–specific
Applies to:
All elements
Inherited:
Yes
Computed value:
See description
Description:
Defines the foreground color of an element, which in HTML
rendering means the text of an element; raster images are not affected
by color. This is also the color
applied to any borders of the element, unless overridden by border-color or one of the other border
color properties (border-top-color,
etc.).
In the case of color keywords (such as navy) and RGB hex values (such as #008800 or #080), the computed value is the rgb() equivalent. For transparent, the computed value is rgba(0,0,0,0); for currentColor, the computed value is inherit. For all other values, the computed
value is the same as the declared value.
Examples:
strong {color: rgb(255,128,128);}
h3 {color: navy;}
p.warning {color: #ff0000;}
pre.pastoral {color: rgba(0%,100%,0%,0.33334);}column-count
Initial value:
auto
Applies to:
Nonreplaced block-level elements (except table elements), table cells, and inline-block elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the number of columns used in a multicolumn layout of an
element. Besides the default auto,
only positive nonzero integers are permitted.
Examples:
body {column-count: 2;}column-fill
Initial value:
balance
Applies to:
Elements laid out using multiple columns
Inherited:
No
Computed value:
Same as declared value
Description:
Defines how the columns in an element laid out with multiple
columns are height-balanced (or not). This property’s value only takes
hold in cases where the column lengths have been in some way
constrained. The obvious case of this would be if the element’s
height has been explicitly set. In
all other cases, the columns are automatically balanced. The value
auto means columns are filled
sequentially, which is to say each column is filled to the full column
height until the last, which is either under- or over-filled as
necessary.
Examples:
body {height: 50em; column-fill: auto;}column-gap
Initial value:
normal
Applies to:
Elements laid out using multiple columns
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the width of the gap between adjacent columns in an
element laid out with multiple columns. Any column rule (see column-rule) is centered within each
gap. Gap lengths cannot be negative.
Examples:
body {column-gap: 2em;}column-rule
Initial value:
See individual properties
Applies to:
Elements laid out using multiple columns
Inherited:
No
Computed value:
Same as declared value
Description:
A shorthand property that defines the width, style, and color of
the “rules” (vertical lines) drawn between columns in an element laid
out with multiple columns. Any value omitted is set to the default
value of the corresponding property. Note that if no border style is
defined, it will default to none
and no column rule will be drawn.
Examples:
#d01 {column-rule: 5px solid red;}
#d02 {column-rule: 2em dashed green;}column-rule-color
Initial value:
User agent–specific
Applies to:
Elements laid out using multiple columns
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the color of the “rules” (vertical lines) drawn between columns in an element laid out with multiple columns.
Examples:
#d01 {column-rule-color: red;}
#d02 {column-rule-color: green;}column-rule-style
Initial value:
none
Applies to:
Elements laid out using multiple columns
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the style of the “rules” (vertical lines) drawn between
columns in an element laid out with multiple columns. The values are
the same as for the property border-style. Either of the values
none (the default) or hidden means no rule will be drawn.
Examples:
#d01 {column-rule-style: solid;}
#d02 {column-rule-style: dashed;}column-rule-width
Initial value:
medium
Applies to:
Elements laid out using multiple columns
Inherited:
No
Computed value:
Absolute length; 0 if the
style of the border is none or
hidden
Description:
Defines the width of the “rules” (vertical lines) drawn between columns in an element laid out with multiple columns.
Examples:
#d01 {column-rule-width: 5px;}
#d02 {column-rule-width: 2em;}column-span
Initial value:
none
Applies to:
Static-position nonfloating elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the number of columns an element spans in an element
laid out with multiple columns. There are only two options: to span
no columns at all (none) or to span all columns (all). When an element spans multiple
columns, content that comes before it is balanced above it across the
columns. Content that comes after is balanced below the spanning
element.
Examples:
h2 {column-span: all;}column-width
Initial value:
auto
Applies to:
Nonreplaced block-level elements (except table elements), table cells, and inline-block elements
Inherited:
No
Computed value:
Absolute length
Description:
Defines the optimal widths of the columns in an element laid out with multiple columns. Note that this describes an optimal width, and as such, user agents may modify or ignore the value if they see fit. The obvious example is if the sum total of the width of the columns and their gaps does not equal the width of the multicolumn element. In such cases, the column widths will be altered to make the columns fit the element. This is somewhat similar in nature to altering the width of table cells so that the table columns fit the table’s total width.
Length values must be greater than zero. For some reason, percentages are not permitted.
Examples:
body {column-width: 23em;}columns
Initial value:
See individual properties
Applies to:
Nonreplaced block-level elements (except table elements), table cells, and inline-block elements
Inherited:
No
Computed value:
Same as declared value
Description:
A shorthand property used to define the number and width of the columns in an element laid out with multiple columns. Omitted values are set to the default values for the corresponding properties.
Examples:
body {columns: 3 23em;}
div {columns: 200px 5;}content
Values:
normal | none | [ <string> | <uri> |
<counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+
Initial value:
normal
Applies to:
::before and ::after pseudo-elements
Inherited:
No
Computed value:
For <uri> values, an absolute URI; for attribute references, the resulting string; otherwise, same as declared value
Description:
Defines the generated content placed before or after an element.
By default, this is likely to be inline content, but the type of box
the content creates can be defined using the property display.
Examples:
p::before {content: "Paragraph...";}
a[href]::after {content: "(" attr(href) ")";
font-size: smaller;}counter-increment
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
With this property, counters can be incremented (or decremented)
by any value, positive or negative or 0. If no <integer> is supplied, it
defaults to 1.
Examples:
h1 {counter-increment: section;}
*.backward li {counter-increment: counter −1;}counter-reset
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
With this property, counters can be reset (or set for the first
time) to any value, positive or negative. If no <integer> is
supplied, it defaults to 0.
Examples:
h1 {counter-reset: section;}
h2 {counter-reset: subsec 1;}cursor
Values:
[<uri> [<number> <number>]?,]* [ auto | default | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll ]
Initial value:
auto
Applies to:
All elements
Inherited:
Yes
Computed value:
For <uri> values, given that a <uri> resolves to a supported file type, a single absolute URI with optional X,Y coordinates; otherwise, same as declared keyword
Description:
Defines the cursor shape to be used when a mouse pointer is
placed within the boundary of an element (although CSS2.1 does not
define which edge creates the boundary). Authors are cautioned to
remember that users are typically very aware of cursor changes and can
be easily confused by changes that seem counterintuitive. For example,
making any noninteractive element switch the cursor state to pointer is quite likely to cause user
frustration.
Note that the value syntax makes URI values optional, but the keyword mandatory. Thus you can specify any number of URIs to external cursor resources, but the value must end with a keyword. Leaving off the keyword will cause conforming user agents to drop the declaration entirely.
CSS3 allows two numbers to be supplied with a <uri> value.
These define the X,Y coordinates of the cursor’s “active point”; that
is, the point in the cursor that is used for determining hover states,
active actions, and so forth. If no numbers are supplied and the
cursor image has no “intrinsic hotspot” (to quote the specification),
the top-left corner of the image is used (equivalent to 0 0). Note that the numbers are unitless and
are interpreted relative to the “cursor’s coordinate system” (to quote
again).
Examples:
a.moreinfo {cursor: help;}
a[href].external {cursor: url(globe.png), auto;}direction
Initial value:
ltr
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the base writing direction of blocks and the direction of embeddings and overrides for the unicode bidirectional algorithm. Furthermore, it changes the way a number of properties and layout decisions are handled, including but not limited to the placement of table cells in a table row and the layout algorithms for block boxes.
For a variety of reasons, authors are strongly encouraged to use
the HTML attribute dir rather than
the CSS property direction. User
agents that do not support bidirectional text are permitted to ignore
this property.
Examples:
*:lang(en) {direction: ltr;}
*:lang(ar) {direction: rtl;}display
CSS2.1 values:
none | inline | block | inline-block | list-item | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
CSS3 values:
none | 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-container | ruby-text-container
Initial value:
inline
Applies to:
All elements
Inherited:
No
Computed value:
Varies for floated, positioned, and root elements (see CSS2.1, section 9.7); otherwise, same as declared value
Description:
Defines the kind of display box an element generates during
layout. Gratuitous use of display
with a document type such as HTML can be tricky, as it upsets the
display hierarchy already defined in HTML, but it can also be very
useful. In the case of XML, which has no such built-in hierarchy,
display is indispensable.
The value none is often used
to make elements “disappear,” since it removes the element and all of
its descendant elements from the presentation. This is true not just
in visual media, but in all media; thus, setting an element to
display: none will prevent it from
being spoken by a speaking browser.
The value run-in was long a
part of CSS2.1 but was dropped in early 2011 because of
inconsistencies among browsers. It is still listed as part of CSS3.
The values compact and marker appeared in CSS2 but were dropped
from CSS2.1 because of a lack of widespread support.
Examples:
h1 {display: block;}
li {display: list-item;}
img {display: inline;}
.hide {display: none;}
tr {display: table-row;}empty-cells
Initial value:
show
Applies to:
Elements with a display value
of table-cell
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the presentation of table cells that contain no content.
If shown, the cell’s borders and background are drawn. This property
is only honored if border-collapse
is set to separate; otherwise, it
is ignored.
Examples:
th, td {empty-cells: show;}float
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the direction in which an element is floated. This has traditionally been applied to images in order to let text flow around them, but in CSS, any element may be floated. A floated element will generate a block-level box no matter what kind of element it may be. Floated nonreplaced elements should be given an explicit width, as they otherwise tend to become as narrow as possible. Floating is generally well supported by all browsers, but the nature of floats can lead to unexpected results when they are used as a page layout mechanism. This is largely due to subtle differences in the interpretation of statements like “as narrow as possible.”
Examples:
img.figure {float: left;}
p.sidebar {float: right; width: 15em;}font
Values:
[[ <'font-style'> || <'font-variant'> ||
<'font-weight'> ]? <'font-size'> [ / <'line-height'>
]? <'font-family'>] | caption
| icon | menu | message-box | small-caption | status-bar
Initial value:
Refer to individual properties
Applies to:
All elements
Inherited:
Yes
Percentages:
Calculated with respect to the parent element for <font-size> and with respect to the element’s <font-size> for <line-height>
Computed value:
See individual properties
Description:
A shorthand property used to set all the aspects of an element’s
font at once. It can also be used to set the element’s font to match
an aspect of the user’s computing environment using keywords such as
icon. If keywords are not used, the
minimum font value must include the font size and
family in that order, and any font value that is
not a keyword must end with the font family. Otherwise, the font
declaration will be ignored.
Examples:
p {font: small-caps italic bold small/
1.25em Helvetica,sans-serif;}
p.example {font: 14px Arial;} /* technically correct,
although generic font-families are encouraged for
fallback purposes */
.figure span {font: icon;}font-family
Expansions:
<generic-family>
serif | sans-serif | monospace | cursive | fantasy
Initial value:
User agent–specific
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines a font family to be used in the display of an element’s text. Note that use of a specific font family (e.g., Geneva) is wholly dependent on that family being available, either on the user’s computer or thanks to a downloadable font file, and the font family containing the glyphs needed to display the content. Therefore, using generic family names as a fallback is strongly encouraged. Font names that contain spaces or nonalphabetic characters should be quoted to minimize potential confusion. In contrast, generic fallback family names should never be quoted.
Examples:
p {font-family: Helvetica, Arial, sans-serif;}
li {font-family: Times, TimesNR, "New Century Schoolbook",
serif;}
pre {font-family: Courier, "Courier New", "Andale Mono",
Monaco, monospace;}font-size
Values:
xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> |
<percentage>
Initial value:
medium
Applies to:
All elements
Inherited:
Yes
Percentages:
Calculated with respect to the parent element’s font size
Computed value:
An absolute length
Description:
Defines the size of the font. The size can be defined as an
absolute size, a relative size, a length value, or a percentage value.
Negative length and percentage values are not permitted. The dangers
of font-size assignment are many and varied, and points are
particularly discouraged in web design, as there is no certain
relationship between points and the pixels on a monitor. It’s a matter
of historical interest that because of early misunderstandings,
setting the font-size to medium led to different results in early
versions of Internet Explorer
and Navigator 4.x. Some of these problems are covered in Chapter 5 of
CSS: The
Definitive Guide, third edition (O’Reilly); for further discussion, refer
to http://style.cleverchimp.com/. For best
results, authors are encouraged to use either percentages or em units
for font sizing. As a last resort, pixel sizes can be used, but this
approach has serious accessibility penalties because it prevents users
from resizing text in IE/Win, even when it is too small to read
comfortably. Most other browsers allow users to resize text regardless
of how it has been sized.
Examples:
h2 {font-size: 200%;}
code {font-size: 0.9em;}
p.caption {font-size: 9px;}font-size-adjust
Initial value:
none
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines an aspect value for the element, which is used to scale fonts such that they more closely match each other in cases where fallback fonts are used. The proper aspect value for a font is its true x-height divided by its font size.
How font-size-adjust actually
works is to size fonts according to their x-height, which is to say
according to the height of lowercase letters. For example, consider a
hypothetical font (let’s call it “CSSType”) that, when set to a font
size of 100 pixels, has an x-height of 60 pixels; that is, its
lowercase “x” letterform is 60 pixels tall. The appropriate font-size-adjust value for CSSType is thus
0.6. Declaring:
p {font: 20px "CSSType", sans-serif;
font-size-adjust: 0.6;}…means that paragraph text should be sized so that lowercase letters are 12 pixels tall (20 × 0.6 = 12), no matter what font family is used. If CSSType is unavailable and the user agent falls back to (for example) Helvetica, the Helvetica text will be sized so that lowercase letters are 12 pixels tall and the uppercase letters will be whatever size results. Since the aspect value of Helvetica is 0.53, its uppercase letters will be 22.6 pixels tall (or a rounded-off value, if the user agent can’t handle fractional pixels). If some other sans-serif font is used and its aspect value is 0.7, the uppercase letters of that text will be 17.1 pixels tall while its lowercase letters will still be 12 pixels tall.
Examples:
body {font-family: Helvetica, sans-serif;
font-size-adjust: 0.53;}font-style
Initial value:
normal
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines whether the font uses an italic, oblique, or normal font face. Italic text is generally defined as a separate face within the font family. It is theoretically possible for a user agent to compute a slanted font face from the normal face. In reality, user agents rarely (if at all) recognize the difference between italic and oblique text and almost always render both in exactly the same way.
Examples:
em {font-style: oblique;}
i {font-style: italic;}font-variant
Initial value:
normal
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines whether text is set in the small-caps style. It is theoretically possible for a user agent to compute a small-caps font face from the normal face.
Examples:
h3 {font-variant: small-caps;}
p {font-variant: normal;}font-weight
Initial value:
normal
Applies to:
All elements
Inherited:
Yes
Computed value:
One of the numeric values (100, etc.) or one of the numeric values plus
one of the relative values (bolder
or lighter)
Description:
Defines font weight used in rendering an element’s text. The
numeric value 400 is equivalent to
the keyword normal, and 700 is equivalent to bold. If a font has only two weights—normal
and bold—the numbers 100 through
500 will be normal, and 600 through 900 will be bold. In general
terms, the visual result of each numeric value must be at least as
light as the next lowest number and at least as heavy as the next
highest number.
Examples:
b {font-weight: 700;}
strong {font-weight: bold;}
.delicate {font-weight: lighter;}height
Initial value:
auto
Applies to:
All elements except nonreplaced inline elements, table columns, and column groups
Inherited:
No
Percentages:
Calculated with respect to the height of the containing block
Computed value:
For auto and percentage
values, as declared; otherwise, an absolute length, unless the
property does not apply to the element (then auto)
Description:
Defines the height of either an element’s content area or its
border box, depending on the value of box-sizing. Negative length and percentage
values are not permitted.
Examples:
img.icon {height: 50px;}
h1 {height: 1.75em;}left
Initial value:
auto
Applies to:
Positioned elements (that is, elements for which the value of
position is
something other than static)
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For relatively positioned elements, left always equals –right; for static elements, auto; for length values, the corresponding
absolute length; for percentage values, the declared value; otherwise,
auto
Description:
Defines the offset between the left outer margin edge of an absolutely positioned element and the left edge of its containing block; or, for relatively positioned elements, the distance by which the element is offset to the right of its starting position.
Examples:
div#footer {position: fixed; left: 0;}
*.hanger {position: relative; left: −25px;}letter-spacing
Initial value:
normal
Applies to:
All elements
Inherited:
Yes
Percentages:
Refer to the width of the Unicode space glyph (U+0020) of the element’s font face
Computed value:
For length values, the absolute length; otherwise, normal
Description:
Defines the amount of whitespace to be inserted between the
character boxes of text. Because character glyphs are typically
narrower than their character boxes, length values create a modifier
to the usual spacing between letters. Thus, normal is (most likely) synonymous with 0. Negative length and percentage values are
permitted and will cause letters to bunch closer together.
The three possible values correspond to the minimum, maximum, and optimal spacing between letters. If two values are listed, the first corresponds to the minimum and optimal spacing and the second to the maximum spacing. If a single value is listed, it is used for all three. If the text is justified, the user agent may exceed the maximum spacing if necessary, but it is never supposed to go below the minimum spacing. For nonjustified text, the optimal spacing is always used.
Examples:
p.spacious {letter-spacing: 6px;}
em {letter-spacing: 0.2em;}
p.cramped {letter-spacing: −0.5em;}Note:
In CSS2.1, letter-spacing
only accepts a single value: a length or normal.
line-height
Initial value:
normal
Applies to:
All elements (but see text regarding replaced and block-level elements)
Inherited:
Yes
Percentages:
Relative to the font size of the element
Computed value:
For length and percentage values, the absolute value; otherwise, same as declared value
Description:
This property influences the layout of line boxes. When applied to a block-level element, it defines the minimum (but not the maximum) distance between baselines within that element. When applied to an inline element, it is used to define the leading of that element.
The difference between the computed values of line-height and font-size (called “leading” in CSS) is split
in half and added to the top and bottom of each piece of content in a
line of text. The shortest box that can enclose all those pieces of
content is the line box.
A raw number value assigns a scaling factor, which is inherited instead of a computed value. Negative values are not permitted.
Examples:
p {line-height: 1.5em;}
h2 {line-height: 200%;}
ul {line-height: 1.2;}
pre {line-height: 0.75em;}Note:
The keyword none was added in
CSS3 and is not supported as of early 2011.
list-style
Initial value:
Refer to individual properties
Applies to:
Elements whose display value
is list-item
Inherited:
Yes
Computed value:
See individual properties
Description:
A shorthand property that defines the marker type, whether a
symbol or an image, and its (crude) placement. Because it applies to
any element that has a display of
list-item, it will apply only to
li elements in ordinary HTML and
XHTML, although it can be applied to any element and subsequently
inherited by list-item elements.
Examples:
ul {list-style: square url(bullet3.gif) outer;}
/* values are inherited by 'li' elements */
ol {list-style: upper-roman;}list-style-image
Initial value:
none
Applies to:
Elements whose display value
is list-item
Inherited:
Yes
Computed value:
For <uri> values, the absolute URI; otherwise, none
Description:
Specifies an image to be used as the marker on an ordered or
unordered list item. The placement of the image with respect to the
content of the list item can be crudely controlled using list-style-position.
Examples:
ul {list-style-image: url(bullet3.gif);}
ul li {list-style-image: url(http://example.org/pix/
checkmark.png);}list-style-position
Initial value:
outside
Applies to:
Elements whose display value
is list-item
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the position of the list marker with respect to the content of the list item. Outside markers are placed some distance from the border edge of the list item, but the distance is not defined in CSS. Inside markers are treated as though they were inline elements inserted at the beginning of the list item’s content.
Examples:
li {list-style-position: outside;}
ol li {list-style-position: inside;}list-style-type
CSS2.1 values:
disc | circle | square | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-latin | lower-latin | upper-roman | lower-roman | lower-greek | georgian | armenian | none
CSS3 values:
<glyph> | <algorithmic> | <numeric> |
<alphabetic> | <symbolic> | <non-repeating> |
normal | none
Expansions:
<glyph>
box | check | circle | diamond | disc | hyphen | square
<algorithmic>
armenian | cjk-ideographic | ethiopic-numeric | georgian | hebrew | japanese-formal | japanese-informal | lower-armenian | lower-roman | simp-chinese-formal | simp-chinese-informal | syriac | tamil | trad-chinese-formal | trad-chinese-informal | upper-armenian | upper-roman
<numeric>
arabic-indic | binary | bengali | cambodian | decimal | decimal-leading-zero | devanagari | gujarati | gurmukhi | kannada | khmer | lao | lower-hexadecimal | malayalam | mongolian | myanmar | octal | oriya | persian | telugu | tibetan | thai | upper-hexadecimal | urdu
<alphabetic>
afar | amharic | amharic-abegede | cjk-earthly-branch | cjk-heavenly-stem | ethiopic | ethiopic-abegede | ethiopic-abegede-am-et | ethiopic-abegede-gez | ethiopic-abegede-ti-er | ethiopic-abegede-ti-et | ethiopic-halehame-aa-er | ethiopic-halehame-aa-et | ethiopic-halehame-am-et | ethiopic-halehame-gez | ethiopic-halehame-om-et | ethiopic-halehame-sid-et | ethiopic-halehame-so-et | ethiopic-halehame-ti-er | ethiopic-halehame-ti-et | ethiopic-halehame-tig | hangul | hangul-consonant | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-norwegian | lower-latin | oromo | sidama | somali | tigre | tigrinya-er | tigrinya-er-abegede | tigrinya-et | tigrinya-et-abegede | upper-alpha | upper-greek | upper-norwegian | upper-latin
<symbolic>
asterisks | footnotes
<non-repeating>
circled-decimal | circled-lower-latin | circled-upper-latin | dotted-decimal | double-circled-decimal | filled-circled-decimal | parenthesised-decimal | parenthesised-lower-latin
Initial value:
disc
Applies to:
Elements whose display value
is list-item
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the type of marker system to be used in the presentation of a list. CSS3 provides a greatly expanded number of list types, but as of early 2011, support for these newer list types was spotty. Use extra caution when using list types beyond those provided by CSS2.1.
There is no defined behavior for what happens when a list using
an alphabetic ordering exceeds the letters in the list. For example,
once an upper-latin list reaches
“Z,” the specification does not say what the next bullet should be.
(Two possible answers are “AA” and “ZA.”) This is the case regardless
of the alphabet in use. Thus, there is no guarantee that different
user agents will act consistently.
Examples:
ul {list-style-type: square;}
ol {list-style-type: lower-roman;}Note:
As of this writing, the only values with widespread
support are disc, circle, square, decimal, upper-alpha, lower-alpha, upper-latin, upper-roman, and lower-roman.
margin
Initial value:
Not defined
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
See individual properties
Description:
A shorthand property that defines the width of the overall margin for an element or sets distinct widths for the individual side margins. Vertically adjacent margins of block-level elements are collapsed, whereas inline elements effectively do not take top and bottom margins. The left and right margins of inline elements do not collapse, nor do margins on floated elements. Negative margin values are permitted, but caution is warranted because negative values can cause elements to overlap other elements or to appear to be wider than their parent elements.
Examples:
h1 {margin: 2ex;}
p {margin: auto;}
img {margin: 10px;}margin-bottom
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentages, as declared; for length values, the absolute length
Description:
Defines the width of the bottom margin for an element. Negative
values are permitted, but caution is warranted (see margin).
Examples:
ul {margin-bottom: 0.5in;}
h1 {margin-bottom: 2%;}margin-left
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentages, as declared; for length values, the absolute length
Description:
Defines the width of the left margin for an element. Negative
values are permitted, but caution is warranted (see margin).
Examples:
p {margin-left: 5%;}
pre {margin-left: 3em;}margin-right
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentages, as declared; for length values, the absolute length
Description:
Defines the width of the right margin for an element. Negative
values are permitted, but caution is warranted (see margin).
Examples:
img {margin-right: 30px;}
ol {margin-right: 5em;}margin-top
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentages, as declared; for length values, the absolute length
Description:
Defines the width of the top margin for an element. Negative
values are permitted, but caution is warranted (see margin).
Examples:
ul {margin-top: 0.5in;}
h3 {margin-top: 1.5em;}max-height
Initial value:
none
Applies to:
All elements except inline nonreplaced elements and table elements
Inherited:
No
Percentages:
Refer to the height of the containing block
Computed value:
For percentages, as declared; for length values, the absolute
length; otherwise, none
Description:
Defines a maximum constraint on the height of the element (the
exact nature of that height is dependent on the value of box-sizing). Thus, the element can be
shorter than the declared value but not taller. Negative values are
not permitted.
Example:
div#footer {max-height: 3em;}max-width
Initial value:
none
Applies to:
All elements except inline nonreplaced elements and table elements
Inherited:
No
Percentages:
Refer to the height of the containing block
Computed value:
For percentages, as declared; for length values, the absolute
length; otherwise, none
Description:
Defines a maximum constraint on the width of the element (the
exact nature of that width is dependent on the value of box-sizing). Thus, the element can be
narrower than the declared value but not wider. Negative values are
not permitted.
Example:
#sidebar img {width: 50px; max-width: 100%;}min-height
Initial value:
0
Applies to:
All elements except inline nonreplaced elements and table elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentages, as declared; for length values, the absolute length
Description:
Defines a minimum constraint on the height of the element (the
exact nature of that height is dependent on the value of box-sizing). Thus, the element can be
taller than the declared value, but not shorter. Negative values are
not permitted.
Example:
div#footer {min-height: 1em;}min-width
Initial value:
0
Applies to:
All elements except inline nonreplaced elements and table elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentages, as declared; for length values, the absolute
length; otherwise, none
Description:
Defines a minimum constraint on the width of the element (the
exact nature of that width is dependent on the value of box-sizing). Thus, the element can be wider
than the declared value, but not narrower. Negative values are not
permitted.
Example:
div.aside {float: right; width: 13em; max-width: 33%;}opacity
Initial value:
1
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared (or a clipped value if declared value must be clipped)
Description:
Defines an element’s degree of opacity using a number in the
range 0–1, inclusive. Any values outside that range are clipped to the
nearest edge (0 or 1). This property affects every visible portion of
an element. If it is necessary to have the content of an element
semiopaque but not the background, or vice
versa, use alpha color types such as rgba().
An element with opacity of
0 is effectively invisible and may
not respond to mouse or other DOM events. Because of the way semiopaque elements are expected to be
drawn, an element with opacity less than 1.0 creates its own
stacking context even if it is not positioned. For similar reasons, an
absolutely positioned element with opacity less than 1 and a z-index of auto force-alters the z-index value to
0.
Examples:
h2 {opacity: 0.8;}
.hideme {opacity: 0;}outline
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
This is a shorthand property that defines the overall outline for an element. The most common use of outlines is to indicate which form element or hyperlink currently has focus (accepts keyboard input). Outlines can be of irregular shape, and no matter how thick, they do not change or otherwise affect the placement of elements.
Examples:
*[href]:focus {outline: 2px dashed invert;}
form:focus {outline: outset cyan 0.25em;}outline-color
Initial value:
invert (see
description)
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the color for the visible portions of the overall
outline of an element. Remember that the value of outline-style must be something other than
none for any visible border to
appear. User agents are permitted to ignore invert on platforms that don’t support color
inversion. In that case, the outline’s color defaults to the value of
color for the element.
Examples:
*[href]:focus {outline-color: invert;}
form:focus {outline-color: cyan;}outline-offset
Initial value:
0
Applies to:
All elements
Inherited:
No
Computed value:
An absolute length value
Description:
Defines the offset distance between the outer border edge and
inner outline edge. Only one length value can be supplied and it
applies equally to all sides of the outline. Values can be negative,
which causes the outline to “shrink” inward toward the element’s
center. Note that outline-offset
cannot be set via the shorthand outline.
Examples:
*[href]:focus {outline-offset: 0.33em;}
form:focus {outline-offset: −1px;}outline-style
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the style for the overall border of an element. The
style must be something other than none for any outline to appear.
Examples:
*[href]:focus {outline-style: dashed;}
form:focus {outline-style: outset;}outline-width
Initial value:
medium
Applies to:
All elements
Inherited:
No
Computed value:
Absolute length; 0 if the
style of the border is none or
hidden
Description:
Defines the width for the overall outline of an element. The
width will take effect only for a given outline if the value of
outline-style is something other
than none. If the style
is none, the
width is effectively reset to 0.
Negative length values are not permitted.
Examples:
*[href]:focus {outline-width: 2px;}
form:focus {outline-width: 0.25em;}overflow
Initial value:
Not defined for shorthand properties (visible in CSS2.1)
Applies to:
Nonreplaced elements with a display value of block or inline-block
Inherited:
No
Computed value:
Same as declared value
Description:
A shorthand property that defines what happens to content that
overflows the content area of an element. For the value scroll, user agents should provide a
scrolling mechanism whether or not it is actually needed; for example,
scrollbars would appear even if all content can fit within the element
box. If two values are supplied, the first defines the value of
overflow-x and the second defines
overflow-y; otherwise a single
value defines both.
Examples:
#masthead {overflow: hidden;}
object {overflow: visible scroll;}Note:
In CSS2.1, overflow was a
standalone property, not a shorthand property. As of mid-2011,
no-display and no-content were not supported by any major
browser.
overflow-x
Initial value:
visible
Applies to:
Nonreplaced elements with a display value of block or inline-block
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the overflow behavior along the horizontal (X) axis of the element; that is, the left and right edges of the element.
Examples:
#masthead {overflow-x: hidden;}
object {overflow-x: visible;}Note:
As of mid-2011, no-display
and no-content were not supported
by any major browser.
overflow-y
Initial value:
visible
Applies to:
Nonreplaced elements with a display value of block or inline-block
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the overflow behavior along the vertical (Y) axis of the element; that is, the top and bottom edges of the element.
Examples:
#masthead {overflow-y: hidden;}
object {overflow-y: scroll;}Note:
As of mid-2011, no-display
and no-content were not supported
by any major browser.
padding
Initial value:
Not defined for shorthand elements
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
See individual properties
Description:
A shorthand property that defines the width of the overall padding for an element or sets the widths of each individual side’s padding. Padding set on inline nonreplaced elements does not affect line-height calculations; therefore, such an element with both padding and a background may visibly extend into other lines and potentially overlap other content. The background of the element will extend throughout the padding. Negative padding values are not permitted.
Examples:
img {padding: 10px;}
h1 {padding: 2ex 0.33em;}
pre {padding: 0.75em 0.5em 1em 0.5em;}padding-bottom
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentage values, as declared; for length values, the absolute length
Description:
Defines the width of the bottom padding for an element. Bottom padding set on inline nonreplaced elements does not affect line-height calculations; therefore, such an element with both bottom padding and a background may visibly extend into other lines and potentially overlap other content. Negative padding values are not permitted.
Examples:
ul {padding-bottom: 0.5in;}
h1 {padding-bottom: 2%;}padding-left
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentage values, as declared; for length values, the absolute length
Description:
Defines the width of the left padding for an element. Left padding set for an inline nonreplaced element will appear only on the left edge of the first inline box generated by the element. Negative padding values are not permitted.
Examples:
p {padding-left: 5%;}
pre {padding-left: 3em;}padding-right
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentage values, as declared; for length values, the absolute length
Description:
Defines the width of the right padding for an element. Right padding set for an inline nonreplaced element will appear only on the right edge of the last inline box generated by the element. Negative padding values are not permitted.
Examples:
img {padding-right: 30px;}
ol {padding-right: 5em;}padding-top
Initial value:
0
Applies to:
All elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For percentage values, as declared; for length values, the absolute length
Description:
Defines the width of the top padding for an element. Top padding set on inline nonreplaced elements does not affect line-height calculations; therefore, such an element with both top padding and a background may visibly extend into other lines and potentially overlap other content. Negative padding values are not permitted.
Examples:
ul {padding-top: 0.5in;}
h3 {padding-top: 1.5em;}perspective
Initial value:
none
Applies to:
Block-level and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the amount of apparent 3D perspective of an element’s
transformed children, but not for the element itself. Numbers define a
foreshortening depth in pixels; smaller numbers define more extreme
perspective effects. Negative values are treated the same as none.
Examples:
body {perspective: 250;} /* middlin' */
#wrapper {perspective: 10;} /* extreme */Note:
As of early 2011, this property was only supported in a prefixed form by WebKit.
perspective-origin
Values:
[ [ <percentage> | <length> | left | center | right ] [ <percentage> |
<length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
Initial value:
50% 50%
Applies to:
Block-level and inline-level elements
Inherited:
No
Percentages:
Refer to the size of the element box
Computed value:
Same as declared value
Description:
Defines the origin point of the apparent 3D perspective within the element. In effect, it defines the point in the element that appears to be directly in front of the viewer.
Examples:
body {perspective-origin: bottom right;}
#wrapper div {perspective-origin: 0 50%;}Note:
As of early 2011, this property was only supported in a prefixed form by WebKit.
position
Initial value:
static
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the positioning scheme used to lay out an element. Any
element may be positioned, although an element positioned with
absolute or fixed will generate a block-level box
regardless of what kind of element it is. An element that is
relatively positioned is offset from its default placement in the
normal flow.
Examples:
#footer {position: fixed; bottom: 0;}
*.offset {position: relative; top: 0.5em;}Note:
Fixed positioning is supported by Internet Explorer only in versions 7 and later.
quotes
Initial value:
User agent–dependent
Applies to:
All elements (CSS2); all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, and @footnote areas (CSS3)
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the quotation pattern used with quotes and
nested quotes. The actual quote marks are inserted via the
content property’s open-quote and close-quote values. Note that several of the
pseudo-elements to which quotes
applies, such as ::alternate,
::marker, and ::line-marker, are new in CSS3 and may not
be supported.
Example:
q {quotes: '\201C' '\201D' '\2018' '\2019';}resize
Initial value:
none
Applies to:
Elements whose overflow value
is not visible
Inherited:
No
Computed value:
Same as declared value
Description:
Defines how (or whether) an element can be resized by the user. The actual appearance and operation of any resize mechanism is left to the user agent and is likely dependent on the writing direction.
Examples:
textarea {resize: vertical;}
iframe {resize: both;}right
Initial value:
auto
Applies to:
Positioned elements (that is, elements for which the value of
position is
something other than static)
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For relatively positioned elements, see the note; for static elements, auto; for length values, the corresponding
absolute length; for percentage values, the declared value; otherwise,
auto.
Description:
Defines the offset between the right outer margin edge of a positioned element and the right edge of its containing block.
Examples:
div#footer {position: fixed; right: 0;}
*.overlapper {position: relative; right: −25px;}Note:
For relatively positioned elements, the computed value of
left always equals right.
ruby-align
Values:
auto | start | left | center | end | right | distribute-letter | distribute-space | line-edge
Initial value:
auto
Applies to:
All elements and generated content
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the relative alignment of ruby text as compared to ruby base contents.
Examples:
ruby {ruby-align: start;}
rubytext {ruby-align: distribute-space;}Note:
A “ruby” is a short run of text that goes alongside base text, which is common in written East Asian languages. As of early 2011, this property was supported only by Internet Explorer.
ruby-overhang
Initial value:
none
Applies to:
The parent elements of elements with a display value of ruby-text
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines whether, and to which side of the base text, a ruby wider than its base text is allowed to overhang text adjacent to its base.
Examples:
rubytext {ruby-overhang: none;}Note:
A “ruby” is a short run of text that goes alongside base text, which is common in written East Asian languages. As of early 2011, this property was supported only by Internet Explorer.
ruby-position
Initial value:
before
Applies to:
The parent elements of elements with a display value of ruby-text
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the position of ruby text in relation to its base text.
Examples:
rubytext {ruby-position: before;}Note:
A “ruby” is a short run of text that goes alongside base text, which is common in written East Asian languages. As of early 2011, this property was supported only by Internet Explorer.
ruby-span
Initial value:
none
Applies to:
Elements with a display value
of ruby-text
Inherited:
No
Computed value:
A number
Description:
Defines the number of ruby base text elements that can be
spanned by the ruby text. The attribute value must be a number and is
evaluated as such. The values 0 and
none are both equivalent to
1, which indicates no
spanning.
Examples:
rubytext {ruby-span: attr(span);}Note:
A “ruby” is a short run of text that goes alongside base text, which is common in written East Asian languages. As of early 2011, this property was supported only by Internet Explorer.
table-layout
Initial value:
auto
Applies to:
Elements with a display value
of table or inline-table
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether a table element should be laid out using an automatic layout algorithm or a fixed-layout algorithm. The benefit of the automatic algorithm is that it’s more like what authors are used to from more than a decade of browser behavior. The fixed-layout algorithm is theoretically faster and more predictable.
Examples:
table.data {table-display: fixed;}
table.directory {table-display: auto;}text-align
CSS2.1 values:
left | center | right | justify
CSS3 values:
[ start | end | left | center | right | justify | match-parent ] || <string>
Initial value:
User agent–specific, often based on writing direction (CSS2.1);
start (CSS3)
Applies to:
Block-level elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the horizontal alignment of text within a block-level
element by defining the point to which line boxes are aligned. The
value justify is supported by
allowing user agents to programmatically adjust the word (but not
letter) spacing of the line’s content; results may vary by user
agent.
Examples:
p {text-align: justify;}
h4 {text-align: center;}Note:
CSS2 included a <string> value that was dropped from CSS2.1 because of a lack of support but returned in CSS3. As of mid-2011, it still lacked browser support.
text-decoration
Initial value:
none
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines text-decoration effects such as underlining. These
decorations will span descendant elements that don’t have decorations
of their own, in many cases making the child elements appear to be
decorated. Combinations of the values are legal. Any time two text-decoration
declarations apply to the same element, the values of the two
declarations are not combined. For
example:
h1 {text-decoration: overline;}
h1, h2 {text-decoration: underline;}Given these styles, h1
elements will be underlined with no overline because the value of
underline completely overrides the
value of overline. If h1 should have both overlines and
underlines, use the value overline
underline for the h1 rule
and move it after the h1, h2 rule
or extend its selector to raise its specificity.
User agents are not required to support blink.
Examples:
u {text-decoration: underline;}
.old {text-decoration: line-through;}
u.old {text-decoration: line-through underline;}text-indent
CSS3 Values:
[ <length> | <percentage> ] && [ hanging || each-line ]?
Initial value:
0
Applies to:
Block-level elements
Inherited:
Yes
Percentages:
Refer to the width of the containing block
Computed value:
For percentage values, as declared; for length values, the absolute length
Description:
Defines the indentation of the first line of content in a
block-level element. It is most often used to create a tab effect.
Negative values are permitted and cause outdent (or hanging indent)
effects. In CSS3, the value each-line will apply the indentation to any
new line that results from a forced line break (e.g., due to a
<br> element) within the
element, not just the first line. The value hanging inverts the defined pattern of
indentation, allowing for the creation of an outdent effect without
using a negative length value.
Examples:
p {text-indent: 5em;}
h2 {text-indent: −25px;}text-overflow
Initial value:
clip
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared values
Description:
Defines the behavior when inline content overflows its parent
element’s box in cases where the parent element does not have an
overflow value of visible. The default value is the historical
behavior, where the content is simply clipped to the edges of the
parent’s box. The value ellipsis means the content
should be clipped but an ellipsis (…) is inserted at or near the “end”
of the element. In a top-to-bottom, left-to-right language such as
English, this would place the ellipsis at or near the bottom-right
corner of the element.
Examples:
pre {text-overflow: clip;}
article {text-overflow: ellipsis;}text-shadow
Initial value:
none
Applies to:
All elements
Inherited:
Yes
Computed value:
One or more sets of a color plus three absolute lengths
Description:
Defines one or more shadows to be “cast” by the text of an element. Shadows are always painted behind the element’s text, but in front of the element’s background, borders, and outline. Shadows are drawn from the first on top to the last on the bottom.
The four length values that can be declared are, in order: horizontal offset, vertical offset, and blur distance. When positive, the offset values go down and to the right; when negative, back and to the left. Blur values cannot be negative.
Examples:
h1 {text-shadow: 0.5em 0.33em 4px gray;}
h2 {text-shadow: 0 −3px 0.5em blue;}text-transform
Initial value:
none
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the pattern for changing the case of letters in an
element, regardless of the case of the text in the document source.
The determination of which letters are to be capitalized by the value
capitalize is
not precisely defined, as it depends on user agents knowing how to
recognize a “word.”
Examples:
h1 {text-transform: uppercase;}
.title {text-transform: capitalize;}top
Initial value:
auto
Applies to:
Positioned elements (that is, elements for which the value of
position is
something other than static)
Inherited:
No
Percentages:
Refer to the height of the containing block
Computed value:
For relatively positioned elements, see note; for static elements, auto; for length values, the corresponding
absolute length; for percentage values, the declared value; otherwise,
auto
Description:
Defines the offset between the top outer margin edge of a positioned element and the top edge of its containing block.
Note:
For relatively positioned elements, if both top and bottom are auto, their computed values are both
0; if one of them is auto, it becomes the negative of the other;
if neither is auto, bottom becomes the negative of the value of
top.
Examples:
#masthead {position: fixed; top: 0;}
sub {position: relative; top: 0.5em;
vertical-align: baseline;}transform
Expansions:
<transform-function>
See description.
Initial value:
none
Applies to:
Block- and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines one or more transforms of an element. These transforms can occur in a 2D or a simulated 3D space, depending on how the transforms are declared.
The permitted values for <transform-function> are lengthy and complex. For a full list with minimalist descriptions, please consult http://w3.org/TR/css3-3d-transforms/#transform-functions.
Examples:
table th {transform: rotate(45deg);}
li {transform: scale3d(1.2,1.7,0.85);}transform-origin
Values:
[ [ [ <percentage> | <length> | left | center | right ] [ <percentage> |
<length> | top | center | bottom ]? ] <length>? ] | [ [ [
left | center | right ] || [ top | center | bottom ] ] <length>? ]
Initial value:
50% 50% 0
Applies to:
Block- and inline-level elements
Inherited:
No
Percentages:
Refer to the size of the element box
Computed value:
For <length>, an absolute length; otherwise a percentage
Description:
Defines the origin point for an element’s transforms in either 2D or simulated 3D space. The marked-as-optional <length> values are what define a 3D origin point; without them, the value is necessarily in 2D space.
Examples:
table th {transform-origin: bottom left;}
li {transform-origin: 10% 10px 10em;}Note:
As of mid-2011, there were separate working drafts for 2D and 3D
transforms, each of which defined its own value syntax for transform-origin. What is listed here is an
attempt to harmonize the two without having to write out two separate
but nearly identical value syntaxes.
transform-style
Initial value:
flat
Applies to:
Block- and inline-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether an element transformed in simulated 3D space
should have its children rendered using a flat style, thus putting
them all in the same 2D plane as the element, or attempt to use a 3D
effect where children with positive or negative z-index values may be rendered “in front of”
or “behind” the element’s plane as it rotates. Elements whose overflow value is hidden cannot preserve 3D effects and are
treated as though the value of transform-style is flat.
Examples:
li {transform-style: preserve-3d;}transition
Values:
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
Initial value:
Not defined for shorthand properties
Applies to:
All elements plus the ::before and ::after pseudo-elements
Inherited:
No
Computed value:
Same as declared value
Description:
A shorthand property that defines the aspects of one or more of an element’s transitions from one state to another.
Even though it is not (as of this writing) explicitly defined in the value syntax, descriptive text in the specification defines that when two <time> values are declared, the first is the duration and the second is the delay. If only one is declared, it defines only the duration.
Examples:
a[href]:hover {transition: color 1s 0.25s ease-in-out;}
h1 {transition: linear all 10s;}transition-delay
Values:
<time> [, <time>]*
Applies to:
All elements plus the ::before and ::after pseudo-elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines a delay between when a transition could theoretically
first start and when it actually starts. For example, if a transition
is defined to begin on hover but has a delay of 0.5s, the transition will actually begin
half a second after the element is first hovered. Negative time values
are permitted, but rather than creating a paradox, this simply jumps
the transition to the point it would have reached had it been started
at the defined time offset in the past. In other words, it will be
started partway through the transition and run to its
conclusion.
Examples:
a[href]:hover {transition-delay: 0.25;}
h1 {transition-delay: 0;}transition-duration
Values:
<time> [, <time>]*
Applies to:
All elements plus the ::before and ::after pseudo-elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the length of time it takes for the transition to run
from start to finish. The default 0
means the transition is instantaneous and no animation occurs.
Negative time values are treated as 0.
Examples:
a[href]:hover {transition-duration: 1s;}
h1 {transition-duration: 10s;}transition-property
Initial value:
all
Applies to:
All elements plus the ::before and ::after pseudo-elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines one or more properties that are transitioned from one
state to another; for example, color means that the foreground color of an
element is transitioned from the start color to the finish color. If a
shorthand property is declared, the transition parameters meant for
that property are propagated to all the properties represented by the
shorthand.
The keyword all means all
properties are transitioned. The keyword none prevents any properties from being
transitioned, effectively shutting down the transition.
Examples:
a[href]:hover {transition-property: color;}
h1 {transition-property: all;}transition-timing-function
Expansions:
<transition-timing>
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
Initial value:
ease
Applies to:
All elements plus the ::before and ::after pseudo-elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the way in which intermediate states of a transition are
calculated. The value keywords (ease, linear, etc.) are shorthands for specific
cubic-bezier() values defined in
the specification, so in effect
all values of this property are cubic-bezier() values.
Examples:
a[href]:hover {transition-timing-function: ease-in-out;}
h1 {transition-timing-function: linear;}unicode-bidi
Initial value:
normal
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Allows the author to generate levels of embedding within the unicode bidirectional algorithm. User agents that do not support bidirectional text are permitted to ignore this property.
Examples:
span.name {direction: rtl; unicode-bidi: embed;}vertical-align
Values:
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> |
<length>
Initial value:
baseline
Applies to:
Inline elements and table cells
Inherited:
No
Percentages:
Refer to the value of line-height for the element
Computed value:
For percentage and length values, the absolute length; otherwise, same as declared value
Description:
Defines the vertical alignment of an inline element’s baseline with respect to the baseline of the line in which it resides. Negative length and percentage values are permitted, and they lower the element instead of raising it.
In table cells, this property sets the alignment of the content
of the cell within the cell box. When applied to table cells, only the
values baseline, top, middle, and bottom are recognized.
Examples:
sup {vertical-align: super;}
.fnote {vertical-align: 50%;}visibility
Initial value:
inherit
Applies to:
All elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether the element box generated by an element is
rendered. This means authors can have the element take up the space it
would ordinarily take up, while remaining completely invisible. The
value collapse is used in tables to
remove columns or rows from the table’s layout.
Examples:
ul.submenu {visibility: hidden;}
tr.hide {visibility: collapse;}white-space
Initial value:
normal
Applies to:
All elements (CSS2.1); block-level elements (CSS2)
Inherited:
No
Computed value:
Same as declared value
Description:
Defines how whitespace within an element is handled during
layout. normal acts as web browsers
have traditionally treated text, in that it reduces any sequence of
whitespace to a single space. pre
causes whitespace to be treated as in the HTML element pre, with both whitespace and line breaks
fully preserved. nowrap prevents an
element from line-breaking, as in the “nowrap” attribute for td and th
elements in HTML4. The values pre-wrap and pre-line were added in CSS2.1; the former
causes the user agent to preserve whitespace while still automatically
wrapping lines of text, and the latter honors newline characters
within the text while collapsing all other whitespace as per normal.
Examples:
td {white-space: nowrap;}
tt {white-space: pre;}width
Initial value:
auto
Applies to:
Block-level and replaced elements
Inherited:
No
Percentages:
Refer to the width of the containing block
Computed value:
For auto and percentage
values, as declared; otherwise, an absolute length, unless the
property does not apply to the element (then auto)
Description:
Defines the width of an element’s content area, outside of which padding, borders, and margins are added. This property is ignored for inline nonreplaced elements. Negative length and percentage values are not permitted.
Examples:
table {width: 80%;}
#sidebar {width: 20%;}
.figure img {width: 200px;}word-spacing
Initial value:
normal
Applies to:
All elements
Inherited:
Yes
Percentages:
Refer to the width of the Unicode space glyph (U+0020) of the element’s font face
Computed value:
For length values, the absolute length; otherwise, normal
Description:
Defines the amount of whitespace to be inserted between words. Note that the specification does not define what constitutes a “word.” In typical practice, user agents will apply this to the collapsed whitespace between strings of nonwhitespace characters. Negative length values are permitted and will cause words to bunch closer together.
Examples:
p.spacious {word-spacing: 6px;}
em {word-spacing: 0.2em;}
p.cramped {word-spacing: −0.5em;}Note:
In CSS2.1, word-spacing only
accepts a single value: either a <length> or normal.
word-wrap
Initial value:
normal
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines how text should be wrapped in situations where it would
not ordinarily be wrapped; for example, a very long string of numbers
containing no spaces, such as the first thousand digits of pi. The
value break-word permits user
agents to break a word at arbitrary points if it cannot find regular
breakpoints within the “word” (text string).
Examples:
td {word-wrap: break-word;}
p {word-wrap: normal;}z-index
Initial value:
auto
Applies to:
Positioned elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines the placement of a positioned element along the z-axis, which is defined to be the axis that extends perpendicular to the display area. Positive numbers are closer to the user, and negative numbers are farther away.
Example:
#masthead {position: relative; z-index: 10000;}Paged Media
break-after
Initial value:
auto
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether a column or page break should or should not be
placed after the element. Although it is theoretically possible to
force breaks with always, it is not
possible to guarantee prevention; the best an author can do is ask the
user agent to avoid inserting a
column or page break after the element. The keywords avoid-column and avoid-page attempt to prevent insertion
after the element of column or page breaks, respectively. The keyword
left is used to insert enough
breaks after the element to make the next page be a left-hand page;
similarly, right is used for a
right-hand page. page and always insert a page break after the
element; column and
always, a column break.
Examples:
h3 {break-after: avoid;}
div.col {break-after: column;}break-before
Initial value:
auto
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether a column or page break should or should not be
placed before the element. Although it is theoretically possible to
force breaks with always, it is not
possible to guarantee prevention; the best an author can do is ask the
user agent to avoid inserting a
column or page break before the element. The keywords avoid-column and avoid-page attempt to prevent insertion
before the element of column or page breaks, respectively. The keyword
left is used to insert enough
breaks before the element to make the page be a left-hand page;
similarly, right is used for a
right-hand page. page and always insert a page break before the
element; column and
always, a column break.
Examples:
h2 {break-before: always;}
h3 {break-before: avoid;}break-inside
Initial value:
auto
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether a column or page break should be avoided within
the element. Note that such avoidance may not be possible; for
example, declaring body {break-inside:
avoid-page;} for a lengthy document will not prevent the
insertion of page breaks by the user agent.
Examples:
table {break-inside: avoid;}
ul {break-inside: avoid-column;}image-orientation
Initial value:
auto
Applies to:
Image elements
Inherited:
N/A
Computed value:
Same as declared value
Description:
Defines a clockwise rotation angle for images when displayed in
paged media. The intent is to allow authors to rotate images that may
have come from devices such as cell phones that do not automatically
rotate images that are taken “sideways.” User agents are required to
support angle values that compute to 0deg, 90deg, 180deg, and 270deg. Other angle values may be ignored.
Note that the property is not needed to rotate
images when switching from portrait to landscape layout or vice versa;
such rotation should be done automatically by the user agent.
Examples:
img.oldphone {image-orientation: 90deg;}marks
Initial value:
none
Applies to:
The page context
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether cross or crop marks should be added to the display of a page.
Examples:
@page {marks: cross crop;}orphans
Initial value:
2
Applies to:
Block-level elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the minimum number of text lines within an element that can be left at the bottom of a page. This can affect the placement of page breaks within the element.
Examples:
p {orphans: 4;}
ul {orphans: 2;}page
Initial value:
auto
Applies to:
Block-level elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the page type that should be used when displaying the element. The emphasis of the word “should” is taken directly from the specification, so author beware.
The intended effect is that if an element has a value of
page that is different than that of
the preceding element, at least one page break is inserted before the
element and a new page started using the page type declared by
page. (Multiple page breaks may be
used if other styles call for using a right- or left-hand page when
starting the new page.)
Examples:
@page wide {size: landscape;}
table.summary {page: wide;}page-break-after
Initial value:
auto
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether one or more page breaks should be placed after
an element. Although it is theoretically possible to force breaks with
always, it is not possible to
guarantee prevention; avoid asks
the user agent to avoid inserting a page break if possible. The
keyword left is used to insert
enough breaks after the element to make the next page be a left-hand
page; similarly, right is used for
a right-hand page.
This property is essentially replaced by break-after, but browser support for
page-break-after may be
stronger.
Examples:
section {page-break-after: always;}
h1 {page-break-after: avoid;}page-break-before
Initial value:
auto
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether one or more page breaks should be placed before
an element. Although it is theoretically possible to force breaks with
always, it is not possible to
guarantee prevention; avoid asks
the user agent to avoid inserting a page break if possible. The
keyword left is used to insert
enough breaks before the element to make the page be a left-hand page;
similarly, right is used for a
right-hand page.
This property is essentially replaced by break-before, but browser support for
page-break-before may be
stronger.
Examples:
section {page-break-before: always;}
h2 {page-break-before: avoid;}page-break-inside
Initial value:
auto
Applies to:
Block-level elements
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether a page break should be avoided within the
element. Note that such avoidance may not be possible; for example,
declaring body {page-break-inside:
avoid;} for a lengthy document will not prevent the
insertion of page breaks by the user agent.
This property is essentially replaced by break-inside, but browser support for
page-break-inside may be
stronger.
Examples:
table {page-break-inside: avoid;}page-policy
Initial value:
start
Applies to:
@counter and @string blocks
Inherited:
N/A
Computed value:
Same as declared value
Description:
Defines how to determine the value of a counter or string value
with regards to a page-based element. For example, an author may
define a CSS counter to express section numbers. The author then might
want to have the header of every page contain the section number of
the first section found on each page. This would be done using
@counter secnum {page-policy:
first;} (plus related CSS needed to create the counter
pattern). If the desire is to use the last instance of the counter on
the page, then page-policy: last
would be used instead. The value start uses the value before anything is done
with the page; to continue the example, it would use the counter
number as carried over from the previous page, not the first instance
of the counter on the current page.
Examples:
@counter chapter {page-policy: first;}
@string section-title {page-policy: start;}size
Expansions:
<page-size>
A5 | A4 | A3 |
B5 | B4 | letter | legal | ledger
Initial value:
auto
Applies to:
The page context
Inherited:
N/A
Computed value:
Same as declared value
Description:
Defines the size and orientation of a page box. The keywords
auto, portrait, and landscape cause the page box to fill the
available rendering space on the page. Page boxes set to portrait have the content printed with the
long sides of the page box being the right and left sides; in the case
of landscape, the content is
printed with the longer sides of the page box being the top and bottom
sides.
If a page box is specified using lengths or one of the
<page-size> keywords (e.g., A4) and the page box cannot be fit onto the
actual page used for display, the page box and its contents may be
scaled down to fit. If only one length value is declared, it sets both
dimensions and thus defines a square page box. Length values that use
em or ex units are calculated with respect to the
computed font size of the page context.
Examples:
body {page-size: landscape;}widows
Initial value:
2
Applies to:
Block-level elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines the minimum number of text lines within an element that can be left at the top of a page. This can affect the placement of page breaks within the element.
Examples:
p {widows: 4;}
ul {widows: 2;}Aural Media
cue
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Percentages:
Apply to the inherited value for voice-volume
Computed value:
See individual properties (cue-before, etc.)
Description:
A shorthand property that defines audio cues that precede and follow the audio rendering of an element’s content. A cue is something like an auditory icon.
Examples:
table.layout {
cue: url(shattered-glass.ogg) url(sad-trombone.wav);}
pre {cue: url(raygun.mp3);}cue-after
Initial value:
none
Applies to:
All elements
Inherited:
No
Percentages:
Apply to the inherited value for voice-volume
Computed value:
For <uri> values, the absolute URI; otherwise, none
Description:
Defines an audio cue that follows the audio rendering of an element’s content.
Examples:
table.layout {cue-after: url(sad-trombone.wav);}
pre {cue-after: url(raygun.mp3);}cue-before
Initial value:
none
Applies to:
All elements
Inherited:
No
Percentages:
Apply to the inherited value for voice-volume
Computed value:
For <uri> values, the absolute URI; otherwise, none
Description:
Defines an audio cue that precedes the audio rendering of an element’s content.
Examples:
table.layout {cue-before: url(shattered-glass.ogg);}
pre {cue-before: url(raygun.mp3);}pause
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
See individual properties
Description:
A shorthand property that defines pauses that precede and follow
the audio rendering of an element’s content. A pause is an interval in
which no content is audibly rendered, although background sounds may
still be audible. See pause-before
and pause-after for details on the
placement of the pauses.
Examples:
h1 {pause: 1s 500ms;}
ul {pause: 250ms;}pause-after
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
No
Computed value:
The absolute time value
Description:
Defines the length of a pause that follows the audio rendering
of an element’s content. A pause is an interval in which no content is
audibly rendered, although background sounds may still be audible. The
pause is rendered after any cue that follows the element (see cue-after and related properties).
Examples:
h1 {pause-after: 500ms;}
ul {pause-after: 250ms;}pause-before
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
No
Computed value:
The absolute time value
Description:
Defines the length of a pause that precedes the audio rendering
of an element’s content. A pause is an interval in which no content is
audibly rendered, although background sounds may still be audible. The
pause is rendered before any cue that precedes the element (see
cue-before and related
properties).
Examples:
h1 {pause-before: 1s;}
ul {pause-before: 250ms;}phonemes
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
No
Computed value:
Not specified, but likely as declared
Description:
Defines a phonetic pronunciation for the content of the element. The <string> value uses the International Phonetic Alphabet by way of escaped Unicode codepoints.
Examples:
#tomato {phonemes: "t\0252 m\0251 to\028a ";}rest
Initial value:
Not defined for shorthand properties
Applies to:
All elements
Inherited:
No
Computed value:
Not specified, but likely a pair of absolute time values
Description:
A shorthand property that defines rests that precede and follow
the audio rendering of an element’s content. A rest is an interval in
which no content is audibly rendered, although background sounds may
still be audible. See rest-before
and rest-after for details on the
placement of the rests.
Examples:
th {rest: 0.5s;}
strong {rest: 333ms 250ms;}rest-after
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
No
Computed value:
Not specified, but likely an absolute time value
Description:
Defines the length of a rest that follows the audio rendering of
an element’s content. A rest is an interval in which no content is
audibly rendered, although background sounds may still be audible. The
rest is rendered after the element’s content but before any cue that
follows the element (see cue-after
and related properties).
Examples:
th {rest-after: 0.5s;}
strong {rest-after: 250ms;}rest-before
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
No
Computed value:
Not specified, but likely an absolute time value
Description:
Defines the length of a rest that precedes the audio rendering
of an element’s content. A rest is an interval in which no content is
audibly rendered, although background sounds may still be audible. The
rest is rendered before the element’s content but after any cue that
precedes the element (see cue-before and related properties).
Examples:
th {rest-before: 0.5s;}
strong {rest-before: 333ms;}speak
Initial value:
normal
Applies to:
All elements
Inherited:
Yes
Computed value:
Not specified
Description:
Defines how an element’s contents will be audibly rendered. The
value spell-out is typically used
for acronyms and abbreviations, such as W3C or CSS. Declaring digits means that numbers are spoken one
digit at a time; for example, the number 13 is spoken as “one three.”
The value literal-punctuation
causes punctuation marks to be spoken literally, as in the words
“period” and “semicolon”; no-punctuation causes punctuation to be
skipped entirely and no pauses are rendered in their place.
Examples:
abbr {speak: spell-out;}
*.tel {speak: digits;}speakability
Initial value:
auto
Applies to:
All elements
Inherited:
Yes
Computed value:
Not specified
Description:
Defines whether an element’s contents will be rendered aurally.
If the value is normal, the element is aurally rendered regardless of
the value of display. If the value
is none, the element, including any
cues, pauses, or rests associated with the element, is skipped (takes
no time to be audibly rendered). However, descendant elements may
override the value, causing them to be aurally rendered. The value
auto resolves to none if the value of display is none; otherwise it resolves to normal.
Examples:
abbr {speak: spell-out;}
*.tel {speak: digits;}voice-balance
Initial value:
center
Applies to:
All elements
Inherited:
Yes
Computed value:
Not specified, but most likely an absolute number
Description:
Defines the stereo balancing of a speaking voice. This allows a
voice to be shifted all the way to one side or the other, or (with a
<number>) to some mix of
the two sides. For example, −50
would cause the voice to sound as if it is coming from the center-left
position. <number> values are constrained to the range −100 to
100, inclusive. The keyword left is
equivalent to −100; right to 100. The keyword leftwards subtracts 20 from the inherited
value of voice-balance; rightwards add 20.
This property applies to audio cues (see cue and related properties).
Examples:
.beck {voice-balance: right;}
.moore {voice-balance: left;}voice-duration
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
No
Computed value:
Not specified
Description:
Defines the length of time it should take to audibly render the
content of the element. The result will override the value of voice-rate. Only positive <time>
values are permitted.
Examples:
.tel {voice-duration: 3s;}
big {voice-duration: 10s;}voice-family
Expansions:
<voice>
<specific-voice> | [ <age>? <generic-voice> <non-negative-number>? ]
<age>
child | young | old
<generic-voice>
male | female | neutral
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
Yes
Computed value:
Same as declared value
Description:
Defines one or more voice families that can be used in the audio
rendering of an element’s content. It is comparable to font-family in that it can be used to supply
a list of families, including generic alternatives.
Examples:
body {voice-family:
"Karla", "Jenny", young female, female, neutral;}
small {voice-family: male child, child;}voice-pitch
Initial value:
medium
Applies to:
All elements
Inherited:
Yes
Percentages:
Refer to the inherited value
Computed value:
Not specified, but likely an absolute number
Description:
Defines the average pitch (frequency) of the speaking voice used to audibly render the element’s content. The average pitch of a voice will depend greatly on the voice family. <number> values define an average pitch in hertz.
Examples:
big {voice-pitch: 100;}
small {voice-pitch: high;}voice-pitch-range
Initial value:
User agent–dependent
Applies to:
All elements
Inherited:
Yes
Percentages:
Refer to the inherited value
Computed value:
Not specified, but likely an absolute number
Description:
Defines the variation in average pitch used by the speaking voice while audibly rendering the element’s content. The higher the variation, the more animated the voice will sound. <number> values define a pitch range in hertz.
Examples:
em {voice-pitch-range: high;}
code {voice-pitch-range: 50;}voice-rate
Initial value:
medium
Applies to:
All elements
Inherited:
Yes
Percentages:
Refer to the default value
Computed value:
Not specified (in the previous incarnation, speech-rate, it was an absolute
number)
Description:
Defines the average rate at which words are spoken when an element’s content is audibly rendered.
Examples:
h1 {voice-rate: 33%;}
.legalese {voice-rate: x-fast;}voice-stress
Initial value:
moderate
Applies to:
All elements
Inherited:
Yes
Computed value:
Not specified (but likely the declared value)
Description:
Affects the height of peaks in the intonation of a speaking voice, which are in turn generated by stress marks within a language.
Examples:
strong {voice-stress: strong;}
footer {voice-stress: reduced;}voice-volume
Initial value:
medium
Applies to:
All elements
Inherited:
Yes
Percentages:
Refer to the inherited value
Computed value:
Not specified (in the previous incarnation, volume, it was an absolute number)
Description:
Defines the median volume level for the waveform of the audibly
rendered content. Thus, a waveform with large peaks and valleys may go
well above or below the volume level set with this property.
<number> values are clipped to the range of 0 to 100, inclusive.
Note that 0 is the same as silent and 100 is the same as x-loud.
Examples:
big {voice-volume: x-loud;}
footer {voice-volume: 15;}Get CSS Pocket Reference, 4th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
