Transcription
CSS Quick Reference GuideThe following table is based upon the CSS 2.1 Properties Table found in the CSS specifications on the W3C web site. Not all of the properties available in the CSS 2.1 specificationare listed here. Only properties implemented by the major browsers are shown in this table. For a more complete listing of properties and links to more complete descriptions of theproperties visit ckground(shorthand)DescriptionSets image or color andhow it is used as theunderlying backdrop forthe page's contentValues[background-color background-image background-repeat background-attachment background-position] inheritDefaultValueInherited?Applies ToPercentagesMediaSpecial Notesseeindividualpropertiesnoall elementsallowed creen, tty,tvbackground-attachment Determines whetherscroll fixed inheritbackground moves whenwindow scrollsscrollnoall elementsn/ahandheld,print,projection,screen, tty,tvbackground-colorSets background colortransparentnoall elementsn/ahandheld,print,projection,screen, tty,tv color can be specified usingcolor predefined name, 6 digithex value, or using rgb(r, g, b)functionbackground-imageLoads background image uri none inheritfrom designated URInonenoall elementsn/ahandheld,print,projection,screen, tty,tv uri is specified using theurl(path/filename) function.'background-image' takesprecedence over'background-color'background-positionSets the position of thebackground image[[ percentage length left center right] [ percentage length top center bottom]?] [[left center right] [top center bottom]] inherit0% 0%noall elementsrefer to the size of thebox itselfhandheld,print,projection,screen, tty,tv length measured in em, ex,px, in, cm, mm, pt, and pc(pica)background-repeatDetermines ifbackground imagerepeats horizontally (x),vertically (y), or bothrepeat repeat-x repeat-y no-repeat inheritrepeatnoall elementsn/ahandheld,print,projection,screen, tty,tvUsing the value 'repeat' meansimage tiles vertically andhorizontallyborder (shorthand)Sets border width(thickness), style, andcolor[border-width border-style border-color] inheritseeindividualpropertiesnoall elementsn/ahandheld,print,projection,screen, tty,tv color transparent inherit
lies ToPercentagesMediaSpecial Notesborder-collapseSets whether borders ofadjacent table elements(cells, row groups,column groups) arerendered separately orcollapsed (merged) toignore any padding ormargins betweenadjacent borderscollapse separate inheritseparateyes'table' and 'inlinetable' elementsn/ahandheld,print,projection,screen, tty,tvborder-colorSets the color of theborder[ color transparent] {1, 4} inheritseeindividualpropertiesnoall elementsn/ahandheld,print,projection,screen, tty,tvBorder must be establishedbefore color is setborder-spacingSpecifies the distancethat separates adjacentcells in a table length length ? inherit0yes'table' and 'inlinetable' elementsn/ahandheld,print,projection,screen, tty,tvBorder must be establishedbefore spacing is set.border-styleChanges the look of theborder line border-style {1, 4} inheritseeindividualpropertiesnoall elementsn/ahandheld,print,projection,screen, tty,tv border-style can be none hidden dotted dashed solid double groove ridge inset ft(shorthand)Shorthand border forindividual sides[ border-width border-style border-color } inheritseeindividualpropertiesnoall elementsn/ahandheld,print,projection,screen, tom-colorborder-left-colorSets the color of thespecified border side color transparent inheritthe value ofthe 'color'propertynoall elementsn/ahandheld,print,projection,screen, tom-styleborder-left-styleSets the style of thespecified border side border-style inheritnonenoall elementsn/ahandheld,print,projection,screen, tom-widthborder-left-widthSets the border width forthe specified border side border-width inheritmediumnoall elementsn/ahandheld,print,projection,screen, tty,tvborder-widthSets the borderthickness of one to all 4border sides border-width {1, 4} inheritseeindividualpropertiesnoall elementsn/ahandheld,print,projection,screen, tty,tvSee Special Note for the'border-style' property forpossible values of border-style
lies ToPercentagesMediaSpecial NotesbottomPositions element the length percentage auto designated distance from inheritthe CSS box's bottomedgeautonopositioned elementsrefer to height ofcontaining blockhandheld,print,projection,screen, tty,tvcaption-sideSpecifies a table captionposition with respect tothe tabletop bottom inherittopyes'table n, tty,tvclearSpecifies whether anelement allows floatingelements at its side;more specifically, it liststhe sides on whichfloating elements are notexceptednone left right both inheritnonenoblock level elementsn/ahandheld,print,projection,screen, tty,tvclipDefines the portion of anelement's renderedcontent that is visible shape auto inheritautonoabsolutely positioned n/aelementshandheld,print,projection,screen, tty,tvOnly valid shape is 'rect'where offsets are identified inthis order: top, right, bottom,and leftcolorSets the foreground color color inheritdepends onof an elementIncludes 17 color names: aqua, user agentblack, blue, fuchsia, gray,green, lime, maroon, navy,olive, orange, purple, red, silver,teal, white, and yellowyesall elementsn/ahandheld,print,projection,screen, tty,tv color can be specified usingcolor predefined name, 6 digithex value, or using rgb(r, g, b)function. CSS3 if adopted willinclude the 142 predefinedcolor names of the X11 colorset.contentUsed with the :beforeand :afterpseudo-elements togenerate content in adocumentnormal [ string uri counter attr( identifier ) open-quote close-quote no-open-quote no-close-quote] inheritnormalno:before and :afterpseudo-elementsn/aaural, braille,emboss,handheld,print,projection,screen, tty,tvcounter-incrementIncrements ordecrements an identifiedcounter[ identifier integer ?] none inheritnonenoall elementsn/aaural, braille, Zero and negative integers areemboss,allowed. The default incrementhandheld,is 1.print,projection,screen, tty,tv
lies ToPercentagesMediaSpecial Notescounter-resetResets identified counter[ identifier integer ?] none inheritnonenoall elementsn/aaural, braille, Zero and negative integers areemboss,allowed. The default reset valuehandheld,is 0.print,projection,screen, tty,tvcursorSpecifies the type ofmouse cursor to bedisplayed within anelement[[ 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 ]] inheritautoyesall elementsn/ahandheld,screen, tty,tvThe resize cursors indicate thatsome element edge is to bemoved.directionSpecifies the baseltr rtl inheritwriting direction of blocksof textltryesall elementsn/ahandheld,print,projection,screen, tty,tvOverrides Unicode bidirectionalalgorithmdisplayChanges the displayproperties for thedesignated elementinline 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 inheritinlinenoall elementsn/aaural, braille, Default style sheets canemboss,override this property settinghandheld,print,projection,screen, tty,tvempty-cellsControls the rendering ofborders around tablecells that have nocontentshow hide inheritshowyes'table cell' elementsn/ahandheld,print,projection,screen, tty,tvfloatAllows placement of anelement to the left orright edge of a parentelementleft right none inheritnonenoall elementsn/ahandheld,print,projection,screen, tty,tvThe display property of theelement is ignored when"floating" an elementfont(shorthand)Sets font-style,font-variant, font-weight,font-size, and font-familyproperties[[ "font-style' 'font-variant' 'font-weight' 'font-size'[/'line-height']? 'font-family'] caption icon menu message-box small-caption status-bar inheritseeindividualpropertiesyesall elementsSee individual propertieshandheld,print,projection,screen, tty,tvAll font-related properties arefirst reset to their initial values,then explicitly set based on thevalues assigned to thisproperty.font-familySets the typeface[[ family-name generic-family ][, family-name generic-family]*] inheritdepends onuser agentyesall elementsn/ahandheld,print,projection,screen, tty,tvSpecific family names like, Arialor Times New Roman, areacceptable. Names withembedded spaces must beenclosed in quotes.
PropertyDescriptionValuesfont-sizeControls the size of thefontfont-styleDetermines whether anormal italic oblique inheritfont is displayed using anitalic or oblique settingfont-variantDetermines whether fontis displayed in smalluppercase charactersfont-weightDefaultValue absolute-size relative-size medium length percentage inheritInherited?Applies ToPercentagesMediayesall elementsrefer to parent element'sfont sizehandheld,print,projection,screen, tty,tvnormalyesall elementsn/ahandheld,print,projection,screen, tty,tvnormalyesall elementsn/ahandheld,print,projection,screen, tty,tvDetermines the thickness normal bold bolder lighter or darkness of the font100 200 300 400 500 600 700 800 900 inheritnormalyesall elementsn/ahandheld,print,projection,screen, tty,tvheightSets the height ofelements length percentage auto inheritautonoall elements butnon-replaced inlineelements, tablecolumns, and columngroupsrefers to height ofcontaining block, but onlyif the height of thecontaining block is set,otherwise it is ignoredhandheld,print,projection,screen, tty,tvleftSpecifies how far anelement's left edge isoffset from the left edgeof the containing block length percentage auto inheritautonopositioned elementsrefer to width ofcontaining blockhandheld,print,projection,screen, tty,tvletter-spacingIncreases or decreasesspacing between lettersnormal length inheritnormalyesall elementsn/ahandheld,print,projection,screen, tty,tvline-heightSpecifies how far apartthe lines in a paragrapharenormal number length percentage inheritnormalyesall elementsrefer to the font size ofthe element itselfhandheld,print,projection,screen, tty,tvlist-style(shorthand)Specifies the markerstyle, position, andimage for items in a list[ 'list-style-type' 'list-style-position' 'list-style-image'] inheritseeindividualpropertiesyeselements n,screen, tty,tvnormal small-caps inheritSpecial NotesAbsolute sizes are: xx-small,x-small, small, medium, large,x-large, xx-large. Relative sizesare:smaller, largerNormal text is 400 and bold textis 700 number is the value to bemultiplied by the text height.
lies ToPercentagesMedialist-style-imageSets the image used asthe list item marker uri none inheritnoneyeselements n,screen, tty,tvlist-style-positionSpecifies the position ofthe marker in the listinside outside inheritoutsideyeselements n,screen, tty,tvlist-style-typeSpecifies theappearance of the listitem markerdisc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-alpha lower-latin upper-alpha upper-latin armenian georgian none inheritdiscyeselements n,screen, tty,tvmargin(shorthand)Defines all four marginsthat surround the CSSelement box margin-width {1, 4} inheritseeindividualpropertiesnoall elements exceptelements with tabledisplay types otherthan table orinline-tablerefer to width ofcontaining blockhandheld,print,projection,screen, ftDefines the margin forthe specified side of theCSS element box margin-width inherit0noall elements exceptelements with tabledisplay types otherthan table orinline-tablerefer to width ofcontaining blockhandheld,print,projection,screen, tty,tvmax-heightSets the maximumheight for an element length percentage none inheritnonenoall elements exceptnon-replaced inlineelements and tableelementsrefers to height ofcontaining block, but onlyif the height of thecontaining block is set,otherwise it is ignoredhandheld,print,projection,screen, tty,tvmax-widthSets the maximum widthfor an element length percentage none inheritnonenoall elements exceptnon-replaced inlineelements and tableelementsrefer to width ofcontaining blockhandheld,print,projection,screen, tty,tvmin-heightSets the minimum heightfor an element length percentage inherit0noall elements exceptnon-replaced inlineelements and tableelementsrefers to height ofcontaining block, but onlyif the height of thecontaining block is set,otherwise it is ignoredhandheld,print,projection,screen, tty,tvSpecial NotesIf there is a list-style-imageother than none, it will be usedas the label, instead of thelist-style-type.When one value is used allmargins are the same width.With two values the top/bottommargins are the same, and theleft/right margins are the same.With three values the firstvalue top, the secondvalue right & left, the thirdvalue bottom. Four values areassigned to top, right, bottom,and left.
PropertyDescriptionmin-widthSets the minimum widthfor an elementorphansDefaultValueValues length percentage inheritInherited?Applies ToPercentagesMediaSpecial Notes0noall elements exceptnon-replaced inlineelements and tableelementsrefer to width ofcontaining blockhandheld,print,projection,screen, tty,tvMinimum number of lines integer inheritof a paragraph that mustbe left at the bottom of apage2yesblock level , tty,tvoutline(shorthand)Sets outline color, style,and width[ 'outline-color' 'outline-style' 'outline-width'] inheritseeindividualpropertiesnoall elementsn/aaural, braille,emboss,handheld,print,projection,screen, tty,tvoutline-colorSets the color of theoutline that surroundsand element color invert inheritinvertnoall elementsn/aaural, braille,emboss,handheld,print,projection,screen, tty,tvoutline-styleSets the border style ofthe outline border-style inheritnonenoall elementsn/aaural, braille, Similar to n, tty,tvoutline-widthSets the width of theoutline border border-width inheritmediumnoall elementsn/aaural, braille, Similar to n, tty,tvoverflowWorks with the 'clip'property to determinehow overflow is clippedvisible hidden scroll auto inheritvisiblenoblock level andreplaced elements,table cells, inlineblocksn/ahandheld,print,projection,screen, tty,tv
lies ToPercentagesMediaSpecial Notespadding(shorthand)Defines the white spacethat separates thecontents of an elementfrom the border of theelement's CSS box padding-width {1, 4} inheritseeindividualpropertiesnoall elements exceptelements with tabledisplay types otherthan table,inline-table, andtable-cellrefer to width ofcontaining blockhandheld,print,projection,screen, g-leftDefines the padding forthe specified side of theelement's CSS box padding-width inherit0noall elements exceptelements with tabledisplay types otherthan table,inline-table, andtable-cellrefer to width ofcontaining blockhandheld,print,projection,screen, tty,tvpage-break-afterNew page is started after auto always avoid left rightelement is displayed or inheritprintedautonoblock level , tty,tvpage-break-beforeNew page is startedbefore element isdisplayed or printedauto always avoid left right inheritautonoblock level , tty,tvpage-break-insideEstablishes whether apage break can occurwithin the elementavoid auto inheritautoyesblock level , tty,tvTypically used when a designerdoes not want a table or listbroken between pagespositionIdentifies the positioningscheme used forpositioning an elementstatic relative absolute fixed inheritstaticnoblock level elementsn/ahandheld,print,projection,screen, tty,tvThe value is used inconjunction with the left, right,top, and bottom propertiesquotesSpecifies which ISOcharacter is used forenclosed quotes[ string string ] none inheritdepends onuser agentyesall elementsn/ahandheld,print,projection,screen, tty,tvThe first string represents theoutermost level of quotation,the second string representsembedded levels of quotations.Traditional English uses " forthe outermost level and ' forembedded levels.rightSpecifies how far an length percentage auto element's right edge isinheritoffset from the right edgeof the containing blockautonopositioned elementsrefer to width ofcontaining blockhandheld,print,projection,screen, tty,tv
lies ToPercentagesMediatable-layoutControls whether theuser agent is able to usea 'fast mode' for tablelayoutauto fixed inheritautono'table" ion,screen, tty,tvtext-alignControls the horizontalalignment of textleft right center justify inherit'left' if'direction' is'ltr'; 'right' if'direction' is'rtl'yesblock level elements, n/atable cells, and inlineblockshandheld,print,projection,screen, tty,tvtext-decorationUsed to add underling,none [ underline overline overlining, strike-out, or a line-through blink ] inheritblinking effect to textnonenoall elementshandheld,print,projection,screen, tty,tvtext-indentMoves start of first line to length percentage the left or right of textinheritarea's default edge0yesblock level elements, refer to width oftable cells, and inline containing blockblockshandheld,print,projection,screen, tty,tvtext-transformStandardizes the case ofthe textcapitalize uppercase lowercase none inheritnoneyesall elementsn/ahandheld,print,projection,screen, tty,tvtopSpecifies how far anelement's top edge isoffset from the top edgeof the containing block length percentage auto inheritautonopositioned elementsrefer to height ofcontaining elementhandheld,print,projection,screen, tty,tvunicode-bidiUsed to set the directionof text in web pages thatuse languages meant tobe read in differentdirectionsnormal embed bidi-override inheritnormalnoall elementsn/ahandheld,print,projection,screen, tty,tvvertical-alignSpecifies the verticalalignment of textbaseline sub super top text-top middle bottom text-bottom percentage length inheritbaselinenoinline level and'table-cell' elementsrefer to the 'line-height' of handheld,the element itselfprint,projection,screen, tty,tvvisibilityDetermines if an element visible hidden collapse is removed from display inheritvisibleyesall elementsn/an/ahandheld,print,projection,screen, tty,tvSpecial NotesThis property is used inconjunction with the 'direction'property'visibility' doesn't removeelements from the page, butmakes them completelytransparent. You see an emptyspace where the element issupposed to be. The 'collapse'value can make table columnsdisappear and only applies totables.
PropertyDescriptionwhite-spaceDetermines whetherextra white spacecharacters are ignoredby the user agentwidowsDefaultValueValuesnormal pre nowrap pre-wrap pre-line inheritInherited?Applies ToPercentagesMedianormalyesall elementsn/ahandheld,print,projection,screen, tty,tvMinimum number of lines integer inheritof a paragraph that mustbe left at the top of aprinted page2yesblock level , tty,tvwidthSets the width of anelement length percentage auto inheritautonoall elements butrefer to width ofnon-replaced inlinecontaining blockelements, table rows,and row groupshandheld,print,projection,screen, tty,tvword-spacingIncreases or decreasesspacing between wordsnormal length inheritnormalyesall elementsn/ahandheld,print,projection,screen, tty,tvz-indexdesignates the stackingorder when elementsoverlapauto integer inheritautonopositioned elementsn/ahandheld,print,projection,screen, tty,tvSpecial NotesElements with a higher integer value will appear ontop of elements with a lower integer valueHow to Interpret Property ValuesIf a property offers many possible values or many possible complex combinations of values, you may find square brackets, vertical bars, and other symbols in the value field of theabove table. The syntax is defined in a shorthand notation using certain symbols: Angle brackets: and Vertical bars: and Curly braces: { }Regular brackets: [ ]Question mark: ?Asterisk: *Plus: Angle Brackets The words between the angle brackets and specify a type of value. Common examples are length , percentage , color , and uri . Refer to the Full Properties Table in theCSS specification and follow the links for the appropriate value type.
Vertical Bars and A single vertical bar separates alternative values. For example, the font-style property can have values of normal italic oblique inherit which is to say that font-style can have avalue of normal or a value of italic or a value of oblique or a value of inherit. One and only one value can be used.Curly Braces { }Curly braces indicate that the preceding value may occur at least A and at most B times. For example using the margin property above, the value margin-width {1, 4} means that the margin-width value can be specified at least 1 time and at most 4 times.Regular Brackets [ ]Regular brackets group parts of the value together. A question mark ?, asterisk *, plus , or other special symbol that follows the group applies to the whole group.Question Marks ?, Asterisks *, and Plus A plus ( ) indicates the value must occur one or more times.An asterisk (*) indicates the value may occur zero or more times.A question mark (?) indicates the value is optional.
CSS Quick Reference Guide The following table is based upon the CSS 2.1 Properties Table found in the CSS specifications on the W3C web site. Not all of the properties available in the CSS 2.1 specification are listed here. Only properties implemented by the major browsers are shown in this
