CSS
Overview
CSS is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance. .
Syntax
selector { property: value; 1+ }
Including Styles in HTML
<style type="text/css">
css-styles
</style>
<link rel="stylesheet" type="text/css" NAME="url-to-css-file">
Applying Styles:
| Method | CSS Selector Name | HTML/XML |
|---|---|---|
| inline | <tag style="css-style"> | |
| tag association | tag SEP , 1+ | <tag> |
| class selector | tag O,1.style-name | <tag class="style-name"> |
| id selector | #id-name | <tag id="id-name"> |
| context selector | parent-tag tag | <parent-tag><tag></tag></parent-tag> |
| psuedo class/element | tag:pseudo-name | <tag> |
Aural Media
| Name | Values | Initial value | Applies to (Default: all) |
Inherited? | Percentage (Default: N/A) |
|
|---|---|---|---|---|---|---|
| azimuth | angle | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit | center | yes | |||
| cue | cue-before | cue-after | inherit | XX | no | |||
| cue-after | uri | none | inherit | none | no | |||
| cue-before | uri | none | inherit | none | no | |||
| elevation | angle | below | level | above | higher | lower | inherit | level | yes | |||
| pause | [ [time | percentage]{1,2} ] | inherit | depends on user agent | no | see descriptions of 'pause-before' and 'pause-after' | ||
| pause-after | time | percentage | inherit | depends on user agent | no | see prose | ||
| pause-before | time | percentage | inherit | depends on user agent | no | see prose | ||
| pitch | frequency | x-low | low | medium | high | x-high | inherit | medium | yes | |||
| pitch-range | number | inherit | 50 | yes | |||
| play-during | uri mix? repeat? | auto | none | inherit | auto | no | |||
| richness | number | inherit | 50 | yes | |||
| speak | normal | none | spell-out | inherit | normal | yes | |||
| speak-header | once | always | inherit | once | elements that have table header information | yes | ||
| speak-numeral | digits | continuous | inherit | continuous | yes | |||
| speak-punctuation | code | none | inherit | none | yes | |||
| speech-rate | number | x-slow | slow | medium | fast | x-fast | faster | slower | inherit | medium | yes | |||
| stress | number | inherit | 50 | yes | |||
| voice-family | [[specific-voice | generic-voice ],]* [specific-voice | generic-voice ] | inherit | depends on user agent | yes | |||
| volume | number | percentage | silent | x-soft | soft | medium | loud | x-loud | inherit | medium | yes | refer to inherited value |
Visual Media
| Name | Values | Initial value |
Applies to
(Default: all) |
Inherited? |
Percentages
(Default: N/A) |
Media groups |
|---|---|---|---|---|---|---|
| 'background' | ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit | XX | no | allowed on 'background-position' | visual | |
| scroll | fixed | inherit | scroll | no | visual | |||
| 'background-color' | <color> | transparent | inherit | transparent | no | visual | ||
| 'background-image' | <uri> | none | inherit | none | no | visual | ||
| 'background-position' | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit | 0% 0% | block-level and replaced elements | no | refer to the size of the box itself | visual |
| 'background-repeat' | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat | no | visual | ||
| 'border' | [ 'border-width' || 'border-style' || <color> ] | inherit | see individual properties | no | visual | ||
| 'border-collapse' | collapse | separate | inherit | collapse | 'table' and 'inline-table' elements | yes | visual | |
| 'border-color' | <color>{1,4} | transparent | inherit | see individual properties | no | visual | ||
| 'border-spacing' | <length> <length>? | inherit | 0 | 'table' and 'inline-table' elements | yes | visual | |
| 'border-style' | <border-style>{1,4} | inherit | see individual properties | no | visual | ||
| 'border-top' 'border-right' 'border-bottom' 'border-left' | [ 'border-top-width' || 'border-style' || <color> ] | inherit | see individual properties | no | visual | ||
| 'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | <color> | inherit | the value of the 'color' property | no | visual | ||
| 'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' | <border-style> | inherit | none | no | visual | ||
| 'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' | <border-width> | inherit | medium | no | visual | ||
| 'border-width' | <border-width>{1,4} | inherit | see individual properties | no | visual | ||
| 'bottom' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
| 'caption-side' | top | bottom | left | right | inherit | top | 'table-caption' elements | yes | visual | |
| 'clear' | none | left | right | both | inherit | none | block-level elements | no | visual | |
| 'clip' | <shape> | auto | inherit | auto | block-level and replaced elements | no | visual | |
| 'color' | <color> | inherit | depends on user agent | yes | visual | ||
| 'content' | [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | empty string | :before and :after pseudo-elements | no | all | |
| 'counter-increment' | [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
| 'counter-reset' | [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
| 'cursor' | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | auto | yes | visual, interactive | ||
| 'direction' | ltr | rtl | inherit | ltr | all elements, but see prose | yes | visual | |
| 'display' | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | inline | no | all | ||
| 'empty-cells' | show | hide | inherit | show | 'table-cell' elements | yes | visual | |
| 'float' | left | right | none | inherit | none | all but positioned elements and generated content | no | visual | |
| 'font' | [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | see individual properties | yes | allowed on 'font-size' and 'line-height' | visual | |
| 'font-family' | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit | depends on user agent | yes | visual | ||
| 'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | yes, the computed value is inherited | refer to parent element's font size | visual | |
| 'font-size-adjust' | <number> | none | inherit | none | yes | visual | ||
| 'font-stretch' | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | normal | yes | visual | ||
| 'font-style' | normal | italic | oblique | inherit | normal | yes | visual | ||
| 'font-variant' | normal | small-caps | inherit | normal | yes | visual | ||
| 'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | yes | visual | ||
| 'height' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
| 'left' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
| 'letter-spacing' | normal | <length> | inherit | normal | yes | visual | ||
| 'line-height' | normal | <number> | <length> | <percentage> | inherit | normal | yes | refer to the font size of the element itself | visual | |
| 'list-style' | [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit | XX | elements with 'display: list-item' | yes | visual | |
| 'list-style-image' | <uri> | none | inherit | none | elements with 'display: list-item' | yes | visual | |
| 'list-style-position' | inside | outside | inherit | outside | elements with 'display: list-item' | yes | visual | |
| 'list-style-type' | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit | disc | elements with 'display: list-item' | yes | visual | |
| 'margin' | <margin-width>{1,4} | inherit | XX | no | refer to width of containing block | visual | |
| 'margin-top' 'margin-right' 'margin-bottom' 'margin-left' | <margin-width> | inherit | 0 | no | refer to width of containing block | visual | |
| 'marker-offset' | <length> | auto | inherit | auto | elements with 'display: marker' | no | visual | |
| 'max-height' | <length> | <percentage> | none | inherit | none | all elements except non-replaced inline elements and table elements | no | refer to height of containing block | visual |
| 'max-width' | <length> | <percentage> | none | inherit | none | all elements except non-replaced inline elements and table elements | no | refer to width of containing block | visual |
| 'min-height' | <length> | <percentage> | inherit | 0 | all elements except non-replaced inline elements and table elements | no | refer to height of containing block | visual |
| 'min-width' | <length> | <percentage> | inherit | UA dependent | all elements except non-replaced inline elements and table elements | no | refer to width of containing block | visual |
| 'outline' | [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit | see individual properties | no | visual, interactive | ||
| 'outline-color' | <color> | invert | inherit | invert | no | visual, interactive | ||
| 'outline-style' | <border-style> | inherit | none | no | visual, interactive | ||
| 'outline-width' | <border-width> | inherit | medium | no | visual, interactive | ||
| 'overflow' | visible | hidden | scroll | auto | inherit | visible | block-level and replaced elements | no | visual | |
| 'padding' | <padding-width>{1,4} | inherit | XX | no | refer to width of containing block | visual | |
| 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' | <padding-width> | inherit | 0 | no | refer to width of containing block | visual | |
| 'position' | static | relative | absolute | fixed | inherit | static | all elements, but not to generated content | no | visual | |
| 'quotes' | [<string> <string>]+ | none | inherit | depends on user agent | yes | visual | ||
| 'right' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
| 'table-layout' | auto | fixed | inherit | auto | 'table' and 'inline-table' elements | no | visual | |
| 'text-align' | left | right | center | justify | <string> | inherit | depends on user agent and writing direction | block-level elements | yes | visual | |
| 'text-decoration' | none | [ underline || overline || line-through || blink ] | inherit | none | no (see prose) | visual | ||
| 'text-indent' | <length> | <percentage> | inherit | 0 | block-level elements | yes | refer to width of containing block | visual |
| 'text-shadow' | none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit | none | no (see prose) | visual | ||
| 'text-transform' | capitalize | uppercase | lowercase | none | inherit | none | yes | visual | ||
| 'top' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
| 'unicode-bidi' | normal | embed | bidi-override | inherit | normal | all elements, but see prose | no | visual | |
| 'vertical-align' | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | inline-level and 'table-cell' elements | no | refer to the 'line-height' of the element itself | visual |
| 'visibility' | visible | hidden | collapse | inherit | inherit | no | visual | ||
| 'white-space' | normal | pre | nowrap | inherit | normal | block-level elements | yes | visual | |
| 'width' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
| 'word-spacing' | normal | <length> | inherit | normal | yes | visual | ||
| 'z-index' | auto | <integer> | inherit | auto | positioned elements | no | visual |
Visual Paged Media
| Name | Values | Initial value |
Applies to
(Default: all) | Inherited? |
Percentages
(Default: N/A) |
Media groups |
|---|---|---|---|---|---|---|
| 'page' | <identifier> | auto | auto | block-level elements | yes | visual, paged | |
| 'page-break-after' | auto | always | avoid | left | right | inherit | auto | block-level elements | no | visual, paged | |
| 'page-break-before' | auto | always | avoid | left | right | inherit | auto | block-level elements | no | visual, paged | |
| 'page-break-inside' | avoid | auto | inherit | auto | block-level elements | yes | visual, paged | |
| 'marks' | [ crop || cross ] | none | inherit | none | page context | N/A | visual, paged | |
| 'orphans' | <integer> | inherit | 2 | block-level elements | yes | visual, paged | |
| 'size' | <length>{1,2} | auto | portrait | landscape | inherit | auto | the page context | N/A | visual, paged | |
| 'widows' | <integer> | inherit | 2 | block-level elements | yes | visual, paged |
Tips
To create a heading with left and right aligned text use the CSS float attribute. Note that the right text must occur before the left text in the HTML.
<span style="float: right;">RIGHT TEXT<span>LEFT TEXT
IE Colors
In Internet Explorer 4.0 and up, the following colors can be used to match the user's chosen color scheme (so that you can match the UI).
| activeborder | activecaption | appworkspace | background | ||||
| buttonface | buttonhighlight | buttonshadow | buttontext | ||||
| captiontext | graytext | highlight | highlighttext | ||||
| inactiveborder | inactivecaption | inactivecaptiontext | infobackground | ||||
| infotext | menu | menutext | scrollbar | ||||
| threeddarkshadow | threedface | threedhighlight | threedlightshadow | ||||
| threedshadow | window | windowframe | windowtext |
Scrollbar Attributes:
scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #9F3227; scrollbar-highlight-color: #9F3227; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #9F3227;
Examples
TBD
Tutorial
The following online tutorials have been recommended by our members:
www.w3schools.com - Tutorial
