• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

CSS Quick Reference

Appendix. CSS Quick Reference

NameValuesInitial valueApplies toInherited?PercentagesPage
background-attachmentscroll | fixed | inheritscrollall elementsnoN/A235
background-color<color> | transparent | inherittransparentall elementsnoN/A230
background-image<uri> | none | inheritnoneall elementsnoN/A232
background-position[ [ <percentage> | <length> | left | center | right] [ <percentage> | <length> | top | center | bottom ]?] | [[leftl center | right] II [ top | center \ bottom ] ] | inherit0% 0%all elementsnoreferto the size ofthe box itself237
background-repeatrepeat | repeat-x | repeat-y | no-repeat | inheritrepeatall elementsnoN/A233
background[background-color II background-image II background-repeat II background-attachment II background-position] | inheritsee individual propertiesall elementsnoallowed on 'background-position'239
border-collapsecollapse | separate | inheritseparate'table' and 'inline-table' elementsyesN/A333
border-color[ <color> | transparent]{l,4} | inheritsee individual propertiesall elementsnoN/A180
border-spacing<length> <length>? | inherit0'table' and 'inline-table' elementsyesN/A333
border-style<border-style>{l,4} | inheritsee individual propertiesall elementsnoN/A181
border-top border-right border-bottom border-left[ <border-width> II <border-style> II 'border-top-color'] | inheritsee individual propertiesall elementsnoN/A186
border-top-color border-right-color border-bottom-color border-left-color<color> | transparent | inheritthe value of the 'color' propertyall elementsnoN/A180
border-top-style border-right-style border-bottom-style border-left-style<border-style> | inheritnoneall elementsnoN/A181
border-top-width border-right-width border-bottom-width border-left-width<border-width> | inheritmediumall elementsnoN/A184
border-width<border-width>{l,4} | inheritsee individual propertiesall elementsnoN/A183
border[ <border-width> II <border-style> II 'border-top-color'] | inheritsee individual propertiesall elementsnoN/A186
bottom<length> | <percentage> | auto | inheritautopositioned elementsnorefer to height of containing block207
caption-sidetop | bottom | inherittop'table-caption' elementsyesN/A340
clearnone | left | right | both | inheritnoneblock-level elementsnoN/A195
clip<shape> | auto | inheritautoabsolutely positioned elementsnoN/A218
color<color> | inherit(including 17 color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow)depends on browserall elementsyesN/A227
contentnormal | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote]+ | inheritnormalibefore and :after pseudo-elementsnoN/A136
counter-increment[ <identifier> <integer>?]+ | none | inheritnoneall elementsnoN/A140
counter-reset[ <identifier> <integer>?]+ | none | inheritnoneall elementsnoN/A141
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 | progress ] ] | inheritautoall elementsyesN/A 
directionItr | rtl | inheritItrall elementsyesN/A120
displayinline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inheritinlineall elementsnoN/A125
empty-cellsshow | hide | inheritshow‘table-cell’ elementsyesN/A334
floatleft | right | none | inheritnoneall elementsnoN/A193
font-family[[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]*] | inheritdepends on user agentall elementsyesN/A94
font-size<absolute-size> | <relative-size> | <length> | <percentage> | inheritmediumall elementsyesrefer to parent element’s font size104
font-stylenormal | italic | oblique | inheritnormalall elementsyesN/A107
font-variantnormal | small-caps | inheritnormalall elementsyesN/A109
font-weightnormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inheritnormalall elementsyesN/A110
font[[ ‘font-style’ | | ‘font-variant’ | | ‘font-weight’ ]? ‘font-size’ [/‘inline-height’]? ‘font-family’] | caption | icon | menu | message-box | small-caption | status-bar | inheritsee individual propertiesall elementsyessee individual properties113
height<length> | <percentage> | auto | inheritauto(1)nosee prose193
left<length> | <percentage> | auto | inheritautopositioned elementsnorefer to width of containing block207
letter-spacingnormal | <length> | inheritnormalall elementsyesN/A162
line-heightnormal | <number> | <length> | <percentage> | inheritnormalall elementsyesrefer to the font size of the element itself157
list-style-image<uri> | none | inheritnoneelements with ‘display: list-item’yesN/A131
list-style-positioninside | outside | inheritoutsideelements with ‘display: list-item’yesN/A132
list-style-typedisc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inheritdiscelements with ‘display: list-item’yesN/A130
list-style[‘list-style-type’ | | ‘list-style-position’ | | ‘list-style-image’] | inheritsee individual propertieselements with ‘display: list-item’yesN/A132
margin-right margin-left margin-top margin-bottom<margin-width> | inherit0(3)norefer to width of containing block171
margin<margin-width>{1,4} | inheritsee individual properties(3)norefer to width of containing block171
max-height<length> | <percentage> | none | inheritnone(4)nosee prose198
max-width<length> | <percentage> | none | inheritnone(4)norefer to width of containing block198
min-height<length> | <percentage> | inherit0(4)nosee prose198
min-width<length> | <percentage> | inherit0(4)norefer to width of containing block197
orphans<integer> | inherit2block-level elementsyesN/A270
outline-color<color> | invert | inheritinvertall elementsnoN/A188
outline-style<border-style> | inheritnoneall elementsnoN/A189
outline-width<border-width> | inheritmediumall elementsnoN/A189
outline[‘outline-color’ | | ‘outline-style’ | | ‘outline-width’] | inheritsee individual propertiesall elementsnoN/A188
overflowvisible | hidden | scroll | auto | inheritvisible(6)noN/A204
padding-top padding-right padding-bottom padding-left<padding-width> | inherit0(5)norefer to width of containing block176
padding<padding-width>{1,4} | inheritsee individual properties(5)norefer to width of containing block176
page-break-afterauto | always | avoid | left | right | inheritautoblock-level elementsnoN/A269
page-break-beforeauto | always | avoid | left | right | inheritautoblock-level elementsnoN/A268
page-break-insideavoid | auto | inheritautoblock-level elementsyesN/A269
positionstatic | relative | absolute | fixed | inheritstaticall elementsnoN/A207
quotes[<string> <string>]+ | none | inheritdepends on user agentall elementsyesN/A137
right<length> | <percentage> | auto | inheritautopositioned elementsnorefer to width of contain-ingblock207
table-layoutauto | fixed | inheritauto'table' and 'inline-table' elementsnoN/A337
text-alignleft | right | center | justify | inherit'left' if 'direction' is 'Itr'; 'right' if 'direction' is 'rtl'block-level elements, table cells and inline blocksyesN/A150
text-decorationnone | [underline II overline II line-through II blink] | inheritnoneall elementsno (see prose)N/A116
text-indent<length> | <percentage> | inherit0block-level elements, table cells and inline blocksyesrefer to width of contain-ingblock153
text-transformcapitalize | uppercase | lowercase | none | inheritnoneall elementsyesN/A118
top<length> | <percentage> | auto | inheritautopositioned elementsnorefer to height of contain-ingblock207
unicode-bidinormal | embed | bidi-override | inheritnormalall elementsnoN/A120
vertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inheritbaselineinline-level and 'table-cell' elementsnorefer to the 'line-height' of the element itself165
visibilityvisible | hidden | collapse | inheritvisibleall elementsyesN/A217
white-spacenormal | pre | nowrap | pre-wrap | pre-line | inheritnormalall elementsyesN/A144
widows<integer> | inherit2block-level elementsyesN/A270
width<length> | <percentage> | auto | inheritauto(2)norefer to width of contain-ingblock192
word-spacingnormal | <length> | inheritnormalall elementsyesN/A160
z-indexauto | <integer> | inheritautopositioned elementsnoN/A216


* not discussed in this book, see CSS 2.1 specification for description


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint