CSS Properties

This page provides a quick reference for the CSS properties, for complete details refer to the Web Design Group's web page CSS section.

Application of these properties are based on the element type as described earlier in the "Element Categories" section.

Box Properties

NameDescriptionPossible ValuesElement TypesExampleinherited
borderSets border width, style and color.See border width, style, and colorAll{border: medium solid green}No
border-bottomSet the bottom border width style, and color.See border width, style, and colorAll{border-bottom: medium solid green}No
border-bottom-widthSet the bottom border widththin, medium, thick, or length valueAll{border-bottom-width: thin}No
border-colorSet the border colorA color value, color, #RRGGBBAll{border: #0000ff}No
border-leftSet the left border width style, and color.See border width, style, and colorAll{border-left: medium solid green}No
border-left-widthSet the left border widththin, medium, thick, or length valueAll{border-left-width: thin}No
border-rightSet the right border width style, and color.See border width, style, and colorAll{border-right: medium solid green}No
border-right-widthSet the right border widththin, medium, thick, or length valueAll{border-right-width: thin}No
border-styleSets border stylenone, dotted, dashed, solid, double, groove, ridge, inset, outsetAll{border: dashed}No
border-topSet the top border width style, and color.See border width, style, and colorAll{border-top: medium solid green}No
border-top-widthSet the top border widththin, medium, thick, or length valueAll{border-top-width: thin}No
border-widthSets Border width.thin, medium, thick, or length valueAll{border-width: 8}No
clearDetermines where floating elements are allowed.none, left, right, bothAll{clear: left}No
floatSpecifies how text is wrapped and where it is aligned.none, left, rightAll{float: left}No
heightHeight of elementauto or a height valueBlock elements and IMG, INPUT, TEXTAREA, SELECT, and OBJECT{height: 200}No
marginSet element margin width. A single value sets all margins, two values set top and bottom, four values set top, right, bottom, and left margins.auto, length value, or percent valueAll{margin: 4em 2em 4em 2em}No
margin-bottomSet element bottom marginlength value, or percent valueAll{margin-bottom: 4em}No
margin-leftSet element left marginlength value, or percent valueAll{margin-left: 4em}No
margin-rightSet element right marginlength value, or percent valueAll{margin-right: 4em}No
margin-topSet element top marginlength value, or percent valueAll{margin-top: 4em}No
paddingSpace between border and content. A single value sets all sides, two values set top/bottom and left/right, three values set top, right/left, and bottom, and four values set top, right, bottom, and left. length value, or percent valueAll{padding: 4em}No
padding-bottomSpace between bottom border and content.length value, or percent valueAll{padding-bottom: 4em}No
padding-leftSpace between left border and content.length value, or percent valueAll{padding-left: 4em}No
padding-rightSpace between right border and content.length value, or percent valueAll{padding-right: 4em}No
padding-topSpace between top border and content.length value, or percent valueAll{padding-top: 4em}No
widthWidth of elementauto or a height value in length or percentageBlock elements and IMG, INPUT, TEXTAREA, SELECT, and OBJECT{width: 40em}No

Background and Color Properties

NameDescriptionPossible ValuesElement TypesExampleinherited
backgroundSet background color, repeat, image, attachment, or position.See background-color, background-image, background-attachment, background-repeat, background-positionAll{background: #8080ff}No
background-attachmentDetermines if the background image is fixed or scroll.scroll, fixedAll{background-attachment: scroll}No
background-colorSets the background color.Named or value colorAll{background-color: #8080ff}No
background-imageSets the background image.urlAll{background-image: url('../../../../gifs/flowers.gif')}No
background-positionSets the background image initial position.top, center, bottom, left, center, right, or percent valuesBlock and IMG, INPUT, TEXTAREA, SELECT, and OBJECT{background-position: left top}No
background-repeatSets how the background image is repeated.repeat, repeat-x, repeat-y, no-repeatAll{background-repeat: no-repeat}No
colorSets element color.Named or value colorAll{color: green}Yes

Classification Properties

NameDescriptionPossible ValuesElement TypesExampleinherited
displaySets the type of element.block, inline, list-item, noneAll{display: list-item}No
list-styleSets list style type and/or position.See list-style-type and list-style-positionList-item{list-style: circle}Yes
list-style-imageSets image to be used as the list item marker.urlList-item{list-style-image: url(this.gif)}Yes
list-style-typeSets list style type.circle, disc, decimal, lower-alpha, lower-roman, none, square, upper-alpha, upper-romanList-item{list-style-type: square}Yes
list-style-positionSets where the marker is place relative to the text and its wrapping position.inside, outsideList-item{list-style: circle}Yes
whitespaceSets treatment of spaces inside the element.normal, pre, nowrapBlock{whitespace: pre}Yes

Font Properties

NameDescriptionPossible ValuesElement TypesExampleinherited
fontUsed to define font propertiesSee font-family, font-size, font-style, font-variant, and font-weight.All{font: 20pt}Yes
font-familyUsed to define font family to usefamily nameAll{font-family: ariel roman}Yes
font-sizeUsed to define font size to usexx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, length value, or percent valueAll{font-size: 18pt}Yes
font-styleUsed to define font style to usenormal, italic, obliqueAll{font-style: italic}Yes
font-variantUsed to determine whether to use normal or small capsnormal, small-capsAll{font-variant: small-caps}Yes
font-weightSets font weight.normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900All{font-weight: 600}Yes

Text Properties

NameDescriptionPossible ValuesElement TypesExampleinherited
letter-spacingSets the space between characters.normal or length valueAll{letter-spacing: 0.2em}Yes
line-heightSets the height of lines.normal, a number, a percent of the element font size,All{line-height: 2}Yes
text-alignSets the alignment of text.left, right, center, justifyBlock{text-align: center}Yes
text-decorationSets the special decoration attributes of text.none, overline, underline, line-through, blinkAll{text-decoration: blink}No
text-indentSets the element's first line amount of indentation.length or percentage valueBlock{text-indent: 5%}Yes
text-transformTransforms text to one of the set values.none, capitalize, uppercase, lowercaseAll{text-transform: uppercase}Yes
vertical-alignSets vertical position.baseline, sub. super, top, middle, bottom, text-top, text-bottom, or percent valueInline{vertical-align: sub}No
word-spacingSets extra space between words.normal or length valueAll{word-spacing: 0.2em}Yes