CSS Code Snippets

Provides Level 2.1 and Level 3 Cascade StyleSheets (CSS) code snippets. Cascade StyleSheets provide a realistic way to attach presentation and layout information to Markup such as HTML and XML. There is also some code snippets from Vendor Specific CSS such as from Mozilla, Opera, Apple and Microsoft.
All properties (except Opera properties) also support the 'inherit' value (and as of CSS3, the 'initial' value).

General editor notes or advisories within the snippets are contained within angle quotations: « ».
Keywords are surrounded by braces such as: {length}, {number}, {color} and {%}.

Version 2.0.0.1. Released: 2008-09-02. Update refines differences or additions between CSS2.1 and CSS3; adds outline-offset, resize, box-sizing from CSS3; plus more Vendor Specifics.

References: CSS 2.1, CSS 3 modules.

/* */

{ }

!important

inherit

initial

nsprefix|

.className

#IDName

:link

:visited

:active

:hover

:focus

:root

:first-child

:only-child

:empty

:lang(en)

[attributeName]

[attributeName="value"]

[attributeName~="value"]

[attributeName|="value"]

:first-letter

:first-line

::first-letter

::first-line

:before

:after

::before

::after

::marker

:not({something})

@namespace nsprefix url('http://www.example.com/namespace');

@import url('stylesheet.css');

@media {mediaType}, {optionalMediaType}, {nthMediaType} { }

@page :first / :left / :right / {nothing} { }

@phonetic-alphabet "ipa";

all

screen

projection

handheld

braille

embossed

tty

aural

speech

presentation

margin: auto / {%} / {length}, auto / {%} / {length}, auto / {%} / {length}, auto / {%} / {length};

margin-left: auto / {%} / {length};

margin-top: auto / {%} / {length};

margin-right: auto / {%} / {length};

margin-bottom: auto / {%} / {length};

padding: auto / {%} / {length}, auto / {%} / {length}, auto / {%} / {length}, auto / {%} / {length};

padding-left: auto / {%} / {length};

padding-top: auto / {%} / {length};

padding-right: auto / {%} / {length};

padding-bottom: auto / {%} / {length};

border: {border-width} {border-style} {border-color};

border-left: {border-width} {border-style} {border-color};

border-top: {border-width} {border-style} {border-color};

border-right: {border-width} {border-style} {border-color};

border-bottom: {border-width} {border-style} {border-color};

border-width: thin / medium / thick / {length}, thin / medium / thick / {length}, thin / medium / thick / {length}, thin / medium / thick / {length};

border-left-width: thin / medium / thick / {length};

border-top-width: thin / medium / thick / {length};

border-right-width: thin / medium / thick / {length};

border-bottom-width: thin / medium / thick / {length};

border-color: {color} / transparent, {color} / transparent, {color} / transparent, {color} / transparent;

border-left-color: {color} / transparent;

border-top-color: {color} / transparent;

border-right-color: {color} / transparent;

border-bottom-color: {color} / transparent;

border-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset, none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset, none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset, none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

border-left-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

border-top-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

border-right-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

border-bottom-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

border-radius: {length};

outline: {color} / invert none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset thin / medium / thick / {length};

outline-color: {color} / invert;

outline-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset, none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset, none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset, none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;

outline-width: thin / medium / thick / {length};

outline-offset: {length};

width: {length} / {%} / {number} / auto;

height: {length} / {%} / {number} / auto;

max-width: {length} / {%} / none « CSS3: / auto » ;

max-height: {length} / {%} / none « CSS3: / auto » ;

min-width: {length} / {%};

min-height: {length} / {%};

float: left / right / none;

clear: left / right / both / none;

display: inline / block / inline-block / run-in / list-item / table / inline-table / table-row-group / table-header-group / table-footer-group / table-column-group / table-column / table-row / table-cell / table-caption / none;

visibility: visible / hidden / colapse;

position: static / relative / absolute / fixed;

left: {length} / {%} / auto;

top: {length} / {%} / auto;

right: {length} / {%} / auto;

bottom: {length} / {%} / auto;

z-index: {int} / auto;

overflow: visible / hidden / scroll / auto;

direction: ltr / rtl;

unicode-bidi: normal / embed / bidi-overide;

resize: none / both / horizontal / vertical;

box-sizing: content-box / border-box;

color: {color};

color: {color} / attr(attributeName,color);

opacity: {0.0 - 1.0};

background: {color} url('path/from/stylesheet/image.png') « repeat / repeat-x / repeat-y / no-repeat » « scroll / fixed « « {%} / {length} / left / center / right {%} / {length} / top / center / bottom » / « left / center / right » / « top / center / bottom » » » ;

background: {color} url('path/from/stylesheet/image.png'), url('path/from/stylesheet/image2.png'), url('path/from/stylesheet/image3.png'), ... « repeat / space / no-repeat, ... » « scroll / fixed / local, scroll / fixed / local, ... « « {%} / {length} / left / center / right {%} / {length} / top / center / bottom » / « left / center / right » / « top / center / bottom), ... » » ;

background-color: {color};

background-image: url('path/from/stylesheet/image.png');

background-image: url('path/from/stylesheet/image.png'), url('path/from/stylesheet/image2.png'), url('path/from/stylesheet/image3.png'), ...;

background-repeat: repeat / repeat-x / repeat-y / no-repeat;

background-repeat: repeat / space / no-repeat , repeat / space / no-repeat, ...;

background-attachment: scroll / fixed;

background-attachment: scroll / fixed / local, scroll / fixed / local, ...;

background-position: « {%} / {length} / left / center / right {%} / {length} / top / center / bottom » / « left / center / right » / « top / center / bottom » ;

background-position: « {%} / {length} / left / center / right {%} / {length} / top / center / bottom » / « left / center / right » / « top / center / bottom « , ...;

text-align: left / right / center / justify « CSS3: / start / end / {string} » ;

vertical-align: baseline / sub / super / top / text-top / middle / bottom / text-bottom / {%} / {length} « CSS3: / use-script / central » ;

text-indent: {length} / {%} « CSS3: / hanging » ;

text-decoration: none / underline / overline / line-through / blink « CSS3: / hanging » ;

text-transform: capitalize / uppercase / lowercase / none;

font: (normal / italic / oblique / small-caps / xx-small / x-small / small / medium / large / x-large / xx-large / smaller / larger / {length} / {%}) {font} / serif / sans-serif / cursive / fantasy / monospace, {font} / serif / sans-serif / cursive / fantasy / monospace,... / caption / icon / menu / message-box / small-caption / status-bar {CSS3: / none / window / document / workspace / desktop / info / dialog / button / pull-down-menu / list / field};

font-family: {font} / serif / sans-serif / cursive / fantasy / monospace, {font} / serif / sans-serif / cursive / fantasy / monospace,... « CSS3: ( / none) » ;

font-size: xx-small / x-small / small / medium / large / x-large / xx-large / smaller / larger / {length} / {%};

font-style: normal / italic / oblique;

font-variant: normal / small-caps;

font-weight: normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900;

letter-spacing: normal / {length};

word-spacing: normal / {length};

white-space: normal / pre / nowrap / pre-wrap / pre-line;

line-height: normal / {number} / {length} / {%} « CSS3: / none » ;

content: normal / {string} / counter(name) / counter(name, {list-style-type}) / counters(name, {string}) / counters(name, {string}, {list-style-type}) / attr(attributeName) / open-quote / close-quote / no-open-quote / no-close-quote « CSS3: / url('path/from/stylesheet/to/fileorimage.png') {, url('optional/file/or/image.png')...} / none / inhibit » ;

quotes: {open quote} {close quote} {nested open quote} {nested close quote}... / none;

counter-increment: {counter name} {optional int} / none;

counter-reset: {counter name} {optional int} / none;

list-style: (disc / circle / square / decimal / decimal-leading-zero / lower-roman / upper-roman / lower-greek / lower-latin / upper-latin / armenian / georgian / none « CSS3: / normal / box / check / diamond / hyphen / cjk-ideographic / ethiopic-numeric / ethiopic / ethiopic-abegede / ethiopic-abegede-am-et / ethiopic-abegede-gez / ethiopic-abegede-ti-er / ethiopic-abegede-ti-et / ethiopic-abegede-aa-er / ethiopic-halehame-aa-er / ethiopic-halehame-aa-et / ethiopic-halehame-am-et / ethiopic-halehame-gez / ethiopic-halehame-om-et / ethiopic-halehame-tig / hebrew / japanese-formal / japanese-informal / lower-armenian / upper-armenian / simp-chinese-formal / simp-chinese-informal trad-chinese-formal / trad-chinese-informal / syriac / tamil / arabic-indic / binary / bengali / cambodian / devanagari / gujarati / gurmukhi / kannada / khmar / lao / lower-hexadecimal / upper-hexadecimal / malayalam / mongolian / myanmar / octal / oriya / persian / talugu / tibetan / thai / urdu / afar / amharic / amharic-abegede / cjk-earthly-branch / cjk-heavenly-stem / hangul / hangul-consonant / hiragana / hiragana-iroha / katakana / katakana-iroha / lower-alpha / upper-alpha / upper-greek / lower-norwegian / upper-norwegian / oromo / sidama / somali / tigre / tigrinya-er / tigrinya-er-abegade / tigrinya-et / tigrinya-et-abegade / asterisks / footnotes / circled-decimal / circled-lower-latin / circled-upper-latin / dotted-decimal / double-circled-decimal / filled-circled-decimal / parenthesised-decimal / parenthesised-lower-latin}) (inside / outside) (url('path/from/stylesheet/to/image.png') / none » ;

list-style-type: disc / circle / square / decimal / decimal-leading-zero / lower-roman / upper-roman / lower-greek / lower-latin / upper-latin / armenian / georgian / none « CSS3: / normal / box / check / diamond / hyphen / cjk-ideographic / ethiopic-numeric / ethiopic / ethiopic-abegede / ethiopic-abegede-am-et / ethiopic-abegede-gez / ethiopic-abegede-ti-er / ethiopic-abegede-ti-et / ethiopic-abegede-aa-er / ethiopic-halehame-aa-er / ethiopic-halehame-aa-et / ethiopic-halehame-am-et / ethiopic-halehame-gez / ethiopic-halehame-om-et / ethiopic-halehame-tig / hebrew / japanese-formal / japanese-informal / lower-armenian / upper-armenian / simp-chinese-formal / simp-chinese-informal trad-chinese-formal / trad-chinese-informal / syriac / tamil / arabic-indic / binary / bengali / cambodian / devanagari / gujarati / gurmukhi / kannada / khmar / lao / lower-hexadecimal / upper-hexadecimal / malayalam / mongolian / myanmar / octal / oriya / persian / talugu / tibetan / thai / urdu / afar / amharic / amharic-abegede / cjk-earthly-branch / cjk-heavenly-stem / hangul / hangul-consonant / hiragana / hiragana-iroha / katakana / katakana-iroha / lower-alpha / upper-alpha / upper-greek / lower-norwegian / upper-norwegian / oromo / sidama / somali / tigre / tigrinya-er / tigrinya-er-abegade / tigrinya-et / tigrinya-et-abegade / asterisks / footnotes / circled-decimal / circled-lower-latin / circled-upper-latin / dotted-decimal / double-circled-decimal / filled-circled-decimal / parenthesised-decimal / parenthesised-lower-latin » ;

list-style-image: url('path/from/stylesheet/to/image.png') / none;

list-style-position: inside / outside;

table-layout: auto / fixed;

border-collapse: collapse / separate;

border-spacing: {length} {optional length};

caption-side: top / bottom;

empty-cells: show / hide;

cursor: url('path/from/stylesheet/to/mousefile'),... / auto / crosshair / default / pointer / move / e-resize / ne-resize / nw-resize / n-resize / se-resize / sw-resize / s-resize / w-resize / text / wait / help / progress « CSS3: / copy / alias / context-menu / cell / grab / grabbing / spinning / count-up / count-down / count-up-down » ;

page-break-before: always / avoid / left / right / auto;

page-break-after: always / avoid / left / right / auto;

page-break-inside: avoid / auto;

orphans: {int};

widows: {int};

speak: normal / none / spell-out {CSS3: / digits / literal-punctuation / no-punctuation};

speak-punctuation: code / none;

speak-numeral: digits / continuous;

speak-header: once / always;

volume: {number} / {%} / silent / x-soft / soft / medium / loud / x-loud;

voice-volume: {number} / {%} / silent / x-soft / soft / medium / loud / x-loud;

voice-family: {voice} / male / female / child, {voice} / male / female / child, ...;

voice-family: {voice} / child / young / old male / female / child / neutral {number}, {voice} / child / young / old male / female / child / neutral {number}, ...;

speech-rate: {number} / x-slow / slow / medium / fast / x-fast / faster / slower;

voice-rate: {%} / x-slow / slow / medium / fast / x-fast;

pitch: {Hz} / x-low / low / medium / high / x-high;

voice-pitch: {Hz} / {%} / x-low / low / medium / high / x-high;

pitch-range: {0 - 100};

voice-pitch-range: {Hz} / {%} / x-low / low / medium / high / x-high;

stress: {0 - 100};

voice-stress: strong / moderate / none / reduced;

richness: {0 - 100};

pause: {time} / {%}, {time} / {%};

pause: {time} / none / x-weak / weak / medium / strong / x-strong, {time} / none / x-weak / weak / medium / strong / x-strong;

pause-before: {time} / {%};

pause-before: {time} / none / x-weak / weak / medium / strong / x-strong;

pause-after: {time} / {%};

pause-after: {time} / none / x-weak / weak / medium / strong / x-strong;

rest: {time} / none / x-weak / weak / medium / strong / x-strong {time} / none / x-weak / weak / medium / strong / x-strong;

rest-before: {time} / none / x-weak / weak / medium / strong / x-strong;

rest-after: {time} / none / x-weak / weak / medium / strong / x-strong;

cue: url('path/from/stylesheet/to/audiofile.mp3') / none « CSS3: / {0 - 100} / {%} / silent / x-soft / soft / medium / loud / x-loud » , url('path/from/stylesheet/to/audiofile.mp3') / none « CSS3: / {0 - 100} / {%} / silent / x-soft / soft / medium / loud / x-loud » ;

cue-before: url('path/from/stylesheet/to/audiofile.mp3') / none « CSS3: / {0 - 100} / {%} / silent / x-soft / soft / medium / loud / x-loud » ;

cue-after: url('path/from/stylesheet/to/audiofile.mp3') / none « CSS3: / {0 - 100} / {%} / silent / x-soft / soft / medium / loud / x-loud » ;

mark: « {markname} / attr(attributename) » « {markname} / attr(attributename) » ;

mark-before: « {markname} / attr(attributename) » ;

mark-after: « {markname} / attr(attributename) » ;

play-during: «url('path/from/stylesheet/to/audiofile.mp3') « mix / repeat » » / auto / none;

voice-duration: {time};

phonemes: {string};

content: normal / {string} / attr(attributeName) / url('path/from/stylesheet/to/audio.mp3') / none / inhibit;

azimuth: {angle} / left-side / far-left / left / center-left / center / center-right / right / far-right / right-side / behind / leftwards / rightwards;

voice-balance: {-100 - 100} / left / center / right / leftwards / rightwards;

elevation: {-90deg - 90deg} / below / level / above / higher / lower;

target: current / root / parent / new / modal / {name} window / tab / none above / behind / front / back;

target-name: current / root / parent / new / modal / {name};

target-new: window / tab / none;

target-position: above / behind / front / back;

ruby-position: before / after / right;

ruby-align: auto / start / left / center / end / right / distribute-letter / distribute-space / line-edge;

ruby-overhang: auto / start / end / none;

ruby-span: attr(attributeName) / none;

-moz-binding: url('path/from/stylesheet/to/binding.xbl') / none;

-moz-opacity: {0.0 - 1.0} / {%};

-moz-border-radius: {length} / {%};

-moz-border-radius-topleft: {length} / {%};

-moz-border-radius-topright: {length} / {%};

-moz-border-radius-bottomright: {length} / {%};

-moz-border-radius-bottomleft: {length} / {%};

-moz-box-sizing: content-box / border-box / inherit;

-o-link: none / attr(attributeName);

-o-link-source: none / current / next;

-o-replace: none / attr(attributeName);

white-space: -o-pre-wrap;

-webkit-border-radius: {length};

-webkit-box-sizing: content-box / border-box / inherit;

-ms-box-sizing: content-box / border-box / inherit;

Web-based Code Snippets are copywritten 2008 to Legend Scrolls and Peter Davison.
Web-based Code Snippets are licensed under the Creative Commons Attribution 3.0 Unported.

Legend Scrolls

Key Website Links

Main Website Navigation

CSS Code Snippets

Footer Links

Free Web Browsers & Office Suites