Intro

A CSS Declaration is the the heart of CSS. A CSS Declaration consists of a property and value pair that influences the presentation of elements of a document. EG: color:red;, color is the property, red is the value, and the whole thing is a CSS Declaration.

The syntax of a CSS Declaration depends on the context. When used in script, usually any dashes in the property name are removed.

  • HTML: property: value
  • Script: object.style.CSSProperty [ = CSSValue]

The declarations that apply to particular elements follow CSS cascade rules in order.

  1. Declarations are applied by media type and selector.
  2. Declarations are applied according to origin. From lowest to highest priority:
    • user agent (browser default)
    • user normal
    • author normal
    • author important. EG: body { background: white !important; }.
    • user important
  3. Declarations are applied by specificity, i.e. more specific selectors have precedence. From lowest to highest priority:
    • style attribute
    • id
    • class attribute
    • element
  4. Declarations are applied by order, i.e. later selectors have precedence.

Here are some features of the CSS Properties tables below.

  • A property has been available since Microsoft Internet Explorer 4, unless the version number is marked in the Notes column or with a superscript on particular property values.
  • A property is a W3C standard unless it has only been "P" (proposed) or "X" (not proposed).
  • A property is assumed to be read-write unless marked "R" or "W".
  • Properties that have a default value will list them in bold .
  • Properties geared toward Chinese-Japanese-Korean glyphs are marked "CJK".
There have been many new CSS declarations since CSS 2! I haven't added them all.

Font and Text

Property Syntax of Value Inherited? Notes
color color yes Color of the text of the object. 
direction ltr | rtl | inherit yes The direction of reading of an object. The unicode-bidi property must be set to embed or override.
font normal normal normal medium/normal "Times New Roman" |
[[font-style] [font-variant] [font-weight]] font-size [/line-height] font-family

or

caption | icon | menu | message-box | small-caption | status-bar
yes Up to 6 font properties in the order specified, or user-preference font in specified object.
EGs:
.8em serif
. These 2 properties are required.
12pt/14pt serif
italic small-caps bold 2em serif
font-family FamilyAndOrGenricList yes The generic families are serif, sans-serif, cursive, fantasy, monospace.
EGs: A font family: Arial; A generic font-family: serif .
font-size medium | LengthMeasurement yes (the computed value) Negative values not allowed.
MSIE6+: If the !DOCTYPE declaration is used then the default value is small .
font-size-adjust none | number | inherit yes New with CSS2. Not in MSIE6. See zNotes 1 below.
font-stretch normal | wider | narrower |
ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
yes New with CSS2. Not in MSIE6.
font-style normal | italic yes  
font-variant normal | small-caps yes  
font-weight normal | bold | bolder | lighter | 100 | ... | 900 yes normal=400. bold=700.
Bold and normal are probably all you need.
ime-mode auto | active | inactive | disabled   5P. State of an Input Method Editor. CJK.
layout-grid both loose none none | mode type line char   5P. CJK. Deals with the layout of characters in a grid.
layout-grid-char none | auto | LengthMeasurement   5P. CJK. Size of character grid.
layout-grid-line none | auto | LengthMeasurement   5P. CJK. Size of line grid.
layout-grid-mode both | none | line | char   5P. CJK. Whether character or line grids are used.
layout-grid-type loose | strict | fixed   5P. CJK. Type of grid used.
letter-spacing normal | LengthMeasurement yes Space between letters. Contrast with word-spacing. Aka tracking and practically the same as kerning.
line-break normal | strict   5P. CJK.
line-height normal | LengthMeasurement | percentage | fltMutlipleOfFontSizeNot in MS yes Space between lines. Negative values not allowed.
ruby-align auto | left | center | right | distribute-letter | distribute-space | line-edge   P. Distribution of ruby text. A ruby is a bit of annotation or pronunciation shown near text.
EG: <ruby style="ruby-align:right;">Base Text<rt />Ruby Text</ruby> .
ruby-overhang auto | whitespace | none   P. Overhang (overwrite) of ruby text.
ruby-position above | inline   P. Position of ruby text.
text-align left | right | center | justify yes  
text-autospace none | ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space   5P. CJK.
text-decoration none | underline | overline | line-through no Default value is underline for a when used with href, u, and ins. Default value is line-through for strike, s, and del.
text-indent 0 | LengthMeasurement yes Indentation of first lines in object.
text-justify auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper   5P. When text-align is set to justify, then text-justify adjusts spacing to perform justification.
text-kashida-space 0% | n% | inherit   5.5P. Kashida is expansion of text for justification. 0% means that only the whitespace is expanded, whereas 100% means that the characters are elongated. Used in Arabic.
text-overflow clip |ellipsis   6X. Whether text overflow is clipped or ellipses (...) are used.
text-transform none | capitalize | uppercase | lowercase yes  
text-underline-position auto6 | above | below5 | auto-pos   5.5X. Position of underline when text-decoration is set to underline.
unicode-bidi normal | embed | bidi-override no The level of embedding for the bi-directional algorithm. Used with the direction property.
vertical-align baseline | autoMS only | sub | super | middle | text-top | text-bottom
Relative to its line box: top | bottom
LengthMeasurementRelativeToBaselineNot in MS
no  
white-space normal | nowrap="nowrap" | pre6 yes 5.5. Whether lines are automatically broken inside an object.
pre is supported in MSIE6 if the !DOCTYPE declaration is used.
word-break normal | break-all | keep-all   5P. normal does not attempt to keep CJK or non-CJK together. break-all keeps non-CJK together. keep-all keeps CJK together.
word-spacing normal | LengthMeasurement yes 6. Space between words. See also letter-spacing.
word-wrap normal | break-word   5.5X. Whether to break words when the content exceeds the boundaries of its container.
writing-mode lr-tb | tb-lr   5.5P. Direction and flow of the content of the container, i.e. either regular  or book spine.

Background

Property Syntax of Value Inherited? Notes
background transparent none repeat scroll 0% 0% | [color] [image] [repeat] [attachment] [position] no Up to 5 background properties in any order.
background-attachment scroll | fixed no How the background image is attached to the object.
background-color transparent | color no Color of the background of the object.
background-image none | url(strURL) no  
background-position 0% 0% | [top | center | bottom | LengthMeasurement] [left | center | right | LengthMeasurement] no If one alignment is set, then the other is assumed to be at 50%.
background-position-x 0% | [left | center | right | LengthMeasurement]   X.
background-position-y 0% | [top | center | bottom | LengthMeasurement]   X.
background-repeat repeat | no-repeat | repeat-x | repeat-y no  

Layout

See also IE Dimensions.

Property Syntax of Value Inherited? Notes
border
border-bottom
border-left
border-right
border-top
medium none | [width] [style] [color] no Up to 3 border properties in the order specified for the sides or the specified side.
border-color
border-bottom-color
border-left-color
border-right-color
border-top-color
color no The color of all 4 sides or the specified side. If the border(s) have a zero thickness, then no color shows.
As with margin, 1-4 values can be provided to specify the sides.
border-radius
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
radius | radius-horizontal / radius-vertical no For making rounded corners. The radius is given as length or %. The radius of all 1-4 sides. The four values for each radii are given clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. 1 value is all 4 corners. 2 values is (top-left, bottom-right), (top-right, bottom-left). 3 values is top-left, (top-right, bottom-left), bottom-right. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left. Default value: 0. CSS 3!
border-style
border-bottom-style
border-left-style
border-right-style
border-top-style
none | dotted | dashed | solid | double | groove | ridge | inset | outset | hiddennot supported by MS | window-insertMS only no The style of all 4 sides or the specified side. If the border has a zero thickness, then no style shows. For the double value, the border must be at least 3 pixels since it will be composed of a line, a gap, and another line. The groove, ridge, inset, and outset values have a "3D" look.
As with margin, 1-4 values can be provided to specify the sides.
border-width
border-bottom-width
border-left-width
border-right-width
border-top-width
medium | thin | thick | LengthMeasurement no The width of the border. May not be negative.
As with margin, 1-4 values can be provided to specify the sides.
border-collapse separate | collapse yes 5. Whether the internal edges (row and cell borders) of a table are joined in a single border or detached as in standard HTML.
border-spacing 0 | spacing | horizontal vertical yes CSS2. Distance between adjacent cells in a table. CSS version of HTML's <table cellspacing=n>.
caption-side top | bottom | left | right yes CSS2. Position of the table's caption relative to the table.
clear none | left | right | both no When an object clears a side, it increases its top margin until it clears an objects floated on the specified side.
empty-cells show | hide yes CSS2. Controls the rendering of borders around cells that have no visible content.
float none | left | right no The object becomes block level and floats in the specified direction while text goes on its other side. The width property of a floated box must be specified.
layout-flow horizontal | vertical-idoegraphic   X. Direction and flow of the content of the container. Use the writing-mode property instead.
margin 0 |
AllSides
 |
TopBottom RightLeft 
|
Top RightLeft Bottom
|
Top Right Bottom Left
no Margin width the sides of an object. May be negative. Margins are always transparent.
If specifying each of the 4 sides, then it is done in order: "TRouBLe", i.e. top, right, bottom, and left.
margin-bottom
margin-left
margin-right
margin-top
auto | LengthMeasurement no Margin width of the specified side of an object. May be negative. Margins are always transparent.
Tip: Manually set both sides of a block to auto to center the whole block. To center just the contents of a block, use text-align: center instead.
padding 0 |
AllSides
 |
TopBottom RightLeft 
|
Top RightLeft Bottom
|
Top Right Bottom Left
no Space between an object and its margin; if the object has a border then the space between an object and its border. May not be negative.
See also margin.
padding-bottom
padding-left
padding-right
padding-top
0 | LengthMeasurement no Space between an object and its margin; if the object has a border then the space between an object and its border. May not be negative.
scrollbar-3dlight-color color   5.5P. Color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
scrollbar-arrow-color color   5.5P. Color of the arrow elements of a scroll arrow.
scrollbar-base-color color   5.5P. Color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.
scrollbar-darkshadow-color color   5.5P. Color of the gutter of a scroll bar. The gutter is the space between the track and the bottom and right edges of the scroll box and scroll arrows of the scroll bar
scrollbar-face-color color   5.5P. Color of the scroll box and scroll arrows of a scroll bar.
scrollbar-highlight-color color   5.5P. Color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
scrollbar-shadow-color color   5.5P. Color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
speak-header once | always yes CSS2. whether table headers are spoken only before a cell when that cell is associated with a different header than the previous cell, or before every cell.
table-layout auto | fixed no CSS2, 5. Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
The advantage of the fixed value is that the whole table does not have to be processed before it can be displayed.
zoom normal | FloatingPointNumber | n%   5.5X. The magnification scale of the object.

Positioning

See also Box Dimensions, and Measurements.

Property Syntax of Value Inherited? Notes
bottom
left
right
top
auto | strMeasurement no 5P. Position of the specified edge of the object relative to the same edge of the next positioned object in the document hierarchy. The position style property must be set.
Consider using pixelEdge or posEdge properties instead because they use integer and floating-point values instead of string values.
clip auto | rect(top right bottom left) no Which part of a positioned object is visible. The value of the position style property must be absolute.
display inline | block | none | list-item6 | inline-blockMS only | markerNot in MS | run-inNot in MS | compactNot in MS |
tableNot in MS | inline-tableNot in MS | table-row-groupNot in MS | table-columnNot in MS | table-column-groupNot in MS | table-header-group | table-footer-group | table-rowNot in MS | table-cellNot in MS | table-captionNot in MS
no How the object is rendered. Unlike visibility:hidden, display:none does not reserve the space where the object would have been and does not increment counters.

For the table-header-group value, the table header is always displayed before all other rows and row groups, and after any top captions. For the table-footer-group value, the table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each page spanned by a table. The header is displayed on each page spanned by a table. Elements with display of none do not increment counters.

  • The frame, tfoot, and thead objects have default values of none .
  • The li object has a default value of list-item .
  • The following objects have a default value of block: blockquote, body, center, col, colgroup, dd, dir, div, dl, dt, fieldset, form, hn , hr, iframe, legend, listing, marquee, menu, ol, p, plaintext, pre, table, td, th, tr, ul, xmp.
height
width
auto | strMeasurement no Size (height or width) of the content (excluding the padding, border, and margin). If only one of the sizes of an img object is set, then the other size is set in proportion. Negative values not allowed.
MSIE6+: Documents that use the !DOCTYPE declaration, height is just the object, i.e. within the padding; otherwise the height is the object plus the padding and border.
Consider using pixelSize or posSize instead because they use integer and floating-point values instead of string values.
max-height
max-width
min-height
min-width
strMeasurement | noneFor maxes only no Constrains the box size (height or width). Not in MS except for min-height.
overflow visible | scroll | hidden | auto no How to manage the content of the object when the content exceeds the specified height or width of the object.
  • visible shows the whole all overflow without clipping or scrolling.
  • scroll uses clipping and scrolling even if there is no overflow.
  • hidden doesn't let you see overflow at all.
  • auto clips and scrolls as necessary.

MSIE6+ : this property can now be applied to the html element.
overflow-x
overflow-y
visible | scroll | hidden | auto   P. How to manage the content of the object when the content exceeds the specified height or width of the object.
position static | absolute | relative | fixedNot in MS no Type of positioning used for the object. static follows regular HTML rules.
visibility inheritMS only | visible | hidden | collapseNot in MS no Whether or not the content of an object is shown. Unlike display:none, visibility:hidden does reserve the space where the object would have been and does increment counters.
MSIE4-: the children cannot be visible if the parent is hidden. MSIE5+ : the children can be visible even if the parent is hidden.
z-index auto | intOrder no The stacking order of positioned objects. Greater z-index values are positioned above lesser values. Objects with the same z-index value are stacked in source order. z-index may be negative.
MSIE5.5+ : the iframe object is now considered windowless and can accept the z-index property.

Aural

Aural rendering is usually for the blind and situations without a visual interface (EG: Browser in car).

Property Syntax of Value Inherited Notes
azimuth      
cue
cue-after
cue-before
URI | none no The audio cue played in association with an element. If the cue property is given 2 values, then the first is for the cue-before.
elevation      
pause
pause-after
pause-before
time | percentage no The pause before or after speaking an element's contents. If the pause property is given 2 values, then the first is for the pause-before. Percentage is for percent speech-rate.
pitch      
pitch-range      
play-during URI [mix] [repeat] | auto | none no Audio file started when an element's content is spoken. mix means play the URI and the element's sound. none means the parent element is silenced during the current element.
richness      
speak normal | none | spell-out yes Whether text is render aurally. This is similar to display.
speak-numeral      
speak-punctuation      
speech-rate      
stress      
voice-family      
volume number | percentage | silent | x-soft | soft | medium | loud | x-loud yes The median volume. silent is no sound and is not the same as 0. x-soft = 0, soft = 25, ..., x-loud = 100.

Miscellany

Property Syntax of Value Inherited Notes
@charset @charset charset;   Sets the character set for an external style sheet. It should not be used in an embedded style sheet. Only one @charset rule can be used per external style sheet, and it must be at the first item at the top of the file. EG: @charset "ISO-8859-1";.
Characters in the style sheet that are not part of the character set can be escaped with the usual HTML escape or (preferably) this syntax: \xUnicode. EG: myEuro€ can be entered as myEuro&#x20ac; or myEuro\20ac .
@font-face @font-face { font-family:family; src:url(strURL); }   Makes an embedded font file available. EG: @font-face {font-family:comic; src:url('http://comic.eot');}
@import @import [strUrl | url(strUrl)];   Imports an external style sheet into an embedded style sheet. This can be used in place of the HTML link element for CSS. @import rules should be entered before the local rules.
@media @media media {rules}   5. Enables a style sheet to make different sets of rules for different target medias.
media is a comma-separated list of the following: all, aural, braille,  embossed, handheld, print, projection, screen, tty, tv.
See zNotes 3 below .
@page @page [PageSelector] {PageContext}   5.5. Define the dimensions, orientation, and margins of a page box in a style sheet.
A page box is a model of the target page to print to. A page box consists of the margin area and the page area. EG: @page { size: 8.5in 11in; margin: 1in } .
PageSelector is: [:first | :left | :right  | page].
PageContext are one or more of the following rules:
  • size: auto | landscape | portrait | width height.
  • MarginRules can be these properties: margin, margin-bottom, margin-left, margin-right, and margin-top. MarginRules can be absolute measurements or percentage.
  • marks: crop | cross | none.
  • orphans: intMinLinesAtBottom.
  • widows: intMinLinesAtTop.
content string | URI | counter(name[, ListStyle]) | counters(name, string[, ListStyle]) | open-quote | close-quote | no-open-quote | no-close-quote | attr(x)   Generates content in a document in conjunction with the :before and :after pseudo-elements. Not in MS.

EG: It is a common convention when quoting multiple paragraphs, to have an opening quotation mark on the first paragraph and a closing quotation mark on the last paragraph. Here is CSS to do this:

blockquote p:before     { content: open-quote }
blockquote p:after      { content: no-close-quote }
blockquote p.last:after { content: close-quote }
counter-increment
counter-reset
none | counter [integer][ counter2 [integer2] ...] no Increments and resets counters for repeated elements.

EG: This CSS numbers nested list items as "1", "1.1", "1.1.1", etc.

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, "."); counter-increment: item }
cursor auto |
all-scroll6 |
col-resize6 |
crosshair |
default |
hand |
help |
move |
no-drop6 |
not-allowed6 |
pointer6 |
progress6 |
row-resize6 |
text |
url(strURL)6 |
vertical-text6 |
wait |
direction-resize
yes Type of cursor to display as the mouse pointer moves over the object. The value can actually be a comma-delimited list.
MSIE 5.0 and 5.5 did hand instead of pointer, but since then MSIE has done pointer. For compatability with 5.0 and 5.5, use both in this order: cursor:pointer; cursor:hand;.
Mouse over the various values to see what that particular cursor looks like.
[Note if your browser is not compatible with a particular cursor value, then you'll get an error because I didn't stick in code to sniff out your browser version and save you the horror of seeing an error message.]
url(strURL ) only supports .cur and .ani cursor files.
direction in direction-resize indicates the compass directions an edge is being moved:
N |
NE |
NW |
S |
SE |
SW |
E |
W
filter FilterType(ParametersList)   P. There are a large variety of visual filters and transitions that can be applied to objects. Search msdn.microsoft.com for "visual filters and transitions". The width property must be set for the element for the filter property to work.
EG: filter:glow(); width:100%;. See zNotes 2 below .
list-style disc outside none | [type] [position] [image] yes Up to 3 listStyle properties in any order. The image value take precedence over the type value unless the type value is none. The value of the margin style property should be at least 30pt for practical purposes.
list-style-image none | url(strURL) yes Image used as a list-item marker for the object.
list-style-position outside | inside yes The inside value indicates that the list-item marker is inside the text and wrapping text shows underneath the list-item marker.
list-style-type disc | circle | square | decimal | lower-roman | upper-roman  | lower-alpha | upper-alpha | none yes The predefined type of the line-item marker for the object.
page PageName yes 5.5. A pseudo-class for items named in an @page rule.
EG: @page myPage {size:landscape;} table {page:myPage;} .
page-break-after
page-break-before
auto | always | empty string | avoid | left | right no Whether a page break occurs after or before the object. Page break properties cannot be applied to br, hr, or positioned objects.
page-break-inside auto | avoid yes Whether a page break occurs inside the object.
quotes none | OpenClosePairs yes Specify the opening and closing characters to use for nested quotations. Not in MS.
EG: q:lang(en) { quotes: '"' '"' "'" "'" } would transform <q>She <q>ate</q> my shorts</q> into "She 'ate' my shorts" .

zNotes

zNotes 1

CSS2 has a new CSS property font-size-adjust which allows authors to specify an aspect value (x-height to size ratio) for an element that will preserve the x-height of the first choice font in the subsequent substitute fonts. The formula used is: s(a/a') = s', where s is the size of the first choice font, a is aspect value of the first choice font, a' is the aspect value of the subsequent substitute font, and s' is the resultant size of the subsequent substitute font.

Actually it seems absurd that you have to provide the aspect ratio. Do people really know what that number is? The proper value of this property should be "true", since CSS seems to assume that the browser knows what the aspect ratios of the different fonts are. [My idea 2003-06-12T02:50:11Z]

Here are common fonts at 11 pt and 72 dpi. If the font-size property was not used, then the fonts substituting for Verdana would display as shown. (The red numbers are the aspect values for each font.) CSS: font-size-adjust If the font-size-adjust property was used with Verdana's 0.58 value, then the fonts substituting for Verdana would display as shown. (The blue numbers are the resultant em sizes for each font.) CSS: font-size-adjust
These two images were borrowed from the W3C.

zNotes 2

Here are some of the filters available. Note again that the width property must be set for the element.

Property Argument Description EG
alpha opacity
finishopacity
style
startx
starty
finishx
finishy 
Allows you to set the opacity of the element filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, 
starty=0, finishx=140, finishy=270)
 
blur add
direction
strength
Makes the element blur filter:blur(add=true, direction=90, strength=6);
chroma color Makes the specified color transparent filter:chroma(color=#ff0000)
fliph none Flips the element horizontally filter:fliph;
flipv none Flips the element vertically filter:flipv;
glow color
strength
Makes the element glow filter:glow(color=#ff0000, strength=5);
gray none Renders the element in black and white filter:gray;
invert none Renders the element in its reverse color and brightness values filter:invert;
mask color Renders the element with the specified background color, and transparent foreground color filter:mask(color=#ff0000);
shadow color
direction
Renders the element with a shadow filter:shadow(color=#ff0000, direction=90);
dropshadow color
offx
offy
positive
Renders the element with a dropshadow filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave add
freq
lightstrength
phase
strength
Renders the element like a wave filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray none Renders the element in black and white with reverse color and brightness values filter:xray

zNotes 3

The @media property has 10 possible values for media types which may be categorized by media groups.

Media Types Media Groups
continuous/paged visual/aural/tactile grid/bitmap interactive/static
aural continuous aural N/A both
braille continuous tactile grid both
emboss paged tactile grid both
handheld both visual both both
print paged visual bitmap static
projection paged visual bitmap static
screen continuous visual bitmap both
tty continuous visual grid both
tv both visual, aural bitmap both


GeorgeHernandez.comSome rights reserved