Categories Home DHTML Home CSS Tutorials DHTML Tutorials Ryan's DHTML Tutorial Advertise Here

CSS Properties List

A listing of the CSS properties

Quick Links
Background Properties Border Properties Classification and Positioning Properties Dimension Properties Font Properties Generated Content Properties List Properties Margin Properties Outline Properties Padding Properties Page Properties Table Properties Text Properties Other Properties

Background Properties
Description Possible Values Declares the backgroundfixed attachment of a attachment scroll background image (to Property Examples div { backgroundattachment:fixed; }

scroll with the page content or be in a fixed position). background- Declares the color background color. Declares the backgroundbackground image of image an element.

div { backgroundattachment:scroll; } Valid color names, RGB div { background-color:green; } values, hexidecimal notation. div { color:#00FF00; } div { backgroundimage:url(images/img.jpg); } URL values. body { backgroundimage:url(img.jpg); } Lengths or percentages for the x and y positions, or one of the predefined values: top left top center top right center left center center center right bottom left bottom center bottom right div { background-position:10px 50px; } div { backgroundposition:bottom right; }

Declares the position backgroundof a background position image.

repeat Declares how and/or if backgroundrepeat-x a background image repeat repeat-y repeats. no-repeat

div { background-repeat:repeatx; } div { background-repeat:norepeat; }

background

Used as a shorthand property to set all the background properties background-color at once. background-image background-repeat background-attachment background-position

Separate values by a space in the following order (those that are not div { background:green defined will use inherited url(image.jpg) no-repeat fixed or default initial values): center center; } div { background:url(image.jpg) fixed; }

Border Properties

Property

Description

Possible Values

Valid color names, RGB values, borderDeclares the color of hexidecimal notation, or the predefined top-color the top border. value transparent. none hidden dotted dashed Declares the style of solid the top border. double groove ridge inset outset Lengths or the following predefined values:

Examples div { border-topcolor:green; } div { border-topcolor:#00FF00; }

bordertop-style

div { border-topstyle:solid; } div { border-topstyle:inset; }

borderDeclares the width of thin top-width the top border. medium thick Separate values by a space in the following order (those that are not defined will use Used as a shorthand inherited or default initial values): property to set all the border-top border-top properties border-top-width at once. border-top-style border-top-color Valid color names, RGB values, borderDeclares the color of hexidecimal notation, or the predefined right-color the right border. value transparent. none hidden dotted dashed borderDeclares the style of solid right-style the right border. double groove ridge inset outset borderDeclares the width of Lengths or the following predefined values: rightthe right border.

div { border-topwidth:2px; } div { border-topwidth:thin; } div { bordertop:2px solid green; } div { bordertop:thick double #00FF00; } div { border-rightcolor:green; } div { border-rightcolor:#00FF00; }

div { border-rightstyle:solid; } div { border-rightstyle:inset; }

div { border-rightwidth:2px; }

width thin medium thick Separate values by a space in the following order (those that are not defined will use Used as a shorthand inherited or default initial values): property to set all the border-right border-right-width properties at once. border-right-style border-right-color div { border-rightwidth:thin; } div { borderright:2px solid green; } div { borderright:thick double #00FF00; } div { borderbottomcolor:green; } div { borderbottomcolor:#00FF00; } div { borderbottomstyle:solid; } div { borderbottom-style:inset; }

borderright

borderbottomcolor

Valid color names, RGB values, Declares the color of hexidecimal notation, or the predefined the bottom border. value transparent.

borderbottomstyle

none hidden dotted dashed Declares the style of solid the bottom border. double groove ridge inset outset

div { borderLengths or the following predefined values: bottom-width:2px; } borderDeclares the width of bottomthin the bottom border. width medium div { borderthick bottomwidth:thin; } div { borderSeparate values by a space in the following bottom:2px solid order (those that are not defined will use green; } Used as a shorthand inherited or default initial values): borderproperty to set all the bottom border-bottom div { borderborder-bottom-width properties at once. bottom:thick border-bottom-style double #00FF00; border-bottom-color } borderDeclares the color of Valid color names, RGB values, div { border-leftleft-color the left border. hexidecimal notation, or the predefined color:green; }

value transparent. div { border-leftcolor:#00FF00; } none hidden dotted dashed Declares the style of solid the left border. double groove ridge inset outset Lengths or the following predefined values:

borderleft-style

div { border-leftstyle:solid; } div { border-leftstyle:inset; }

borderDeclares the width of thin left-width the left border. medium thick Separate values by a space in the following order (those that are not defined will use Used as a shorthand inherited or default initial values): property to set all the border-left border-left properties border-left-width at once. border-left-style border-left-color Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. Separate the color for each border by a space, declaring the colors for the borders in the following order: Declares the border color of all four borders at once. border-top-color border-right-color border-bottom-color border-left-color

div { border-leftwidth:2px; } div { border-leftwidth:thin; } div { borderleft:2px solid green; } div { borderleft:thick double #00FF00; }

div { bordercolor:green red blue olive; } div { bordercolor:green; } div { bordercolor:green red; }

bordercolor

Undeclared values work as further div { bordershorthand notation. If only one color value color:green red is declared, all four borders will use that blue; } color. If two colors are declared, the top and bottom borders will use the first color while the right and left borders will use the second color. If three colors are declared,

borderstyle

Declares the border style of all four borders at once.

the top border will use the first color, the right and left borders will use the second color, and the bottom border will use the third color. none hidden dotted dashed solid double groove ridge inset outset

div { borderstyle:solid dotted dashed double; } div { borderstyle:solid; }

Undeclared values work as further div { bordershorthand notation. If only one style value style:solid dotted; is declared, all four borders will use that } style. If two styles are declared, the top and bottom borders will use the first style while div { borderthe right and left borders will use the style:solid dotted second style. If three styles are declared, the dashed; } top border will use the first style, the right and left borders will use the second style, and the bottom border will use the third style. Lengths or the following predefined values: thin medium thick div { borderwidth:1px 3px 5px 2px; } div { borderwidth:thin; } div { borderwidth:2px 4px; } div { borderwidth:2px 4px 5px; }

borderwidth

border

Undeclared values work as further Declares the width of shorthand notation. If only one width value all four borders at is declared, all four borders will use that once. width. If two widths are declared, the top and bottom borders will use the first width while the right and left borders will use the second width. If three widths are declared, the top border will use the first width, the right and left borders will use the second width, and the bottom border will use the third width. Used as a shorthand Separate values by a space in the following to declare the border order (those that are not defined will use

div { border:1px double green; }

properties when all four borders will have the same appearance.

inherited or default initial values): border-width border-style border-color div { border:thin solid #00FF00; }

Classification and Positioning Properties

Property clear Description Declares the side(s) of an element where no previous floating elements are allowed to be adjacent. Possible Values left right both none URL values, and the following prefefined values: auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group Examples div { clear:right; } div { clear:both; }

div { cursor:crosshair; } div { cusrsor:url(image.csr); } div { cusrsor:url(image.csr), pointer; }

cursor

Declares the type of cursor to be displayed.

div { display:none; } div { display:inline; } div { display:marker; }

display

Declares if/how the element displays.

table-row table-column-group table-column table-cell table-caption float Declares whether a box should float to the left or right of other content, or whether it should not be floated at all. left right none visible hidden collapse div { float:left; } div { float:right; } div { visibility:visible; } div { visibility:hidden; } div { top:15px; } div { top:2%; }

Declares the visibility of boxes visibility generated by an element. Declares the distance that the top content edge of the element is offset below the top edge of its containing block. The position property of the element must also be set to a value other than static. Declares the distance that the right content edge of the element is offset to the left of the right edge of its containing block. The position property of the element must also be set to a value other than static. Declares the distance that the bottom content edge of the element is offset above the bottom edge of its containing block. The position property of the element must also be set to a value other than static. Declares the distance that the left content edge of the element is offset to the right of the left edge of its containing block. The position property of the element must also be set to a value other than static.

top

Lengths, percentages, and the predefined value auto.

right

Lengths, percentages, and the predefined value auto.

div { right:15px; } div { right:2%; }

bottom

Lengths, percentages, and the predefined value auto.

div { bottom:15px; } div { bottom:2%; }

left

Lengths, percentages, and the predefined value auto.

div { left:15px; } div { left:2%; }

position clip

static Declares the type of positioning of relative an element. absolute fixed Declares the shape of a clipped Shapes, or the predefined

div { position:absolute; } div { position:relative; } div { clip:auto; }

region when the value of the value auto. overflow property is set to a value div { clip:rect(2px, 4px, other than visible. In CSS 2, the only valid 7px, 5px); } shape is a rectangle, using the following format to specify the offset lengths from each side of the box: rect(top, right, bottom, left) div { overflow:hidden; visible } hidden scroll auto div { overflow:scroll; } Lengths, percentages, and the following predefined values: span { verticalalign:middle; } td { vertical-align:top; }

Declares how content that overflow overflows the element's box is handled.

baseline Declares the vertical alignment of verticalsub an inline-level element or a table align super cell. top text-top middle bottom text-bottom z-index Declares the stack order of the element. Integer values and the predefined value auto.

div { z-index:2; } div { z-index:auto; }

Dimension Properties
Property height Description Declares the height of the element. Possible Values Lengths, percentages, and the predefined value auto. Examples div { height:200px; } div { height:50%; } div { maxheight:200px; } div { maxheight:50%; } div { min-

maxheight min-

Declares the maximum height Lengths, percentages, and the of the element. predefined value auto. Declares the minimum height Lengths, percentages, and the

height

of the element.

predefined value auto.

height:200px; } div { minheight:50%; } div { width:500px; } div { width:75%; } div { maxwidth:500px; } div { maxwidth:75%; } div { minwidth:500px; } div { minwidth:75%; }

width

Declares the width of the element.

Lengths, percentages, and the predefined value auto.

maxwidth

Declares the maximum width Lengths, percentages, and the of the element. predefined value auto.

min-width

Declares the minimum width Lengths, percentages, and the of the element. predefined value auto.

Font Properties
Property Description Possible Values Examples Valid font family names or generic family names, i.e. Arial, Verdana, sans-serif, "Times New Roman", div { fontTimes, serif, etc. family:Arial; } div { fontfamily:Arial, Helvetica, sans-serif; }

fontfamily

Declares the name of the font to be used. Previously Font family names can be set in HTML via the face separated by a comma in the same attribute in a <font> tag. declaration to allow additional and/or generic family names to be used if the prefereed font is unable to be displayed. Lengths (number and unit type i.e. 1em, 12pt, 10px, 80%) or one of the following predefined values: xx-small x-small small medium large x-large xx-large

div { font-size:70%; } div { fontsize:0.85em; } div { fontsize:medium; }

Declares the size of the font. Previously set in font-size HTML via the size attribute in a <font> tag.

smaller larger Limited browser support: Was part of CSS 2, but not in CSS 2.1. This property may font-sizereturn in CSS 3. adjust Declares the aspect value (font size divided by xheight). normal wider Limited browser narrower support: Was part of ultra-condensed CSS 2, but not in CSS extra-condensed 2.1. This property may condensed return in CSS 3. semi-condensed semi-expanded Declares the stretch of the expanded font face. extra-expanded ultra-expanded normal italic oblique

div { font-sizeadjust:0.54; } Numeric value div { font-sizeadjust:0.46; }

div { fontstretch:narrower; } div { fontstretch:ultraexpanded; }

fontstretch

div { font-style:italic; } div { fontstyle:oblique; } div { fontvariant:normal; } div { fontvariant:small-caps; }

font-style Declares the font style.

fontvariant

Declares the font variant.

normal small-caps normal bold bolder lighter 100 200 300 400 500 600 700 800 900

fontweight

Declares the font weight (lightness or boldness)

div { fontweight:bolder; } div { fontweight:200; }

font

Separate values by a space in the following order (those that are not defined will use inherited or div { font:italic default initial values): Used as a shorthand small-caps bold 1em property to declare all of 1.2em Arial } the font properties at once font-style (except font-size-adjust font-variant div { font:bold 0.8em and font-stretch). font-weight Verdana } font-size line-height font-family

Generated Content Properties

Property Description Possible Values String values, URL values, and predefined value formats: counter(name) counter(name, list-styletype) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote Integers and the predefined value none. Integers and the predefined value none. String values and the predefined value none. Examples

content

Generates content in the document in conjunction with the :before and :after pseudoelements.

div:before { content:"some text"; } div:after { content:url(page2.html); }

counterincrement counterreset quotes

Declares the counter increment for each instance of a selector. Declares the value the counter is set to on each instance of a selector. Declares the type of quotation marks to use for quotations and embedded quotations.

More Information More Information

More Information

List Properties
Property Description list-style- Declares the type of list Possible Values disc Examples ol { list-style-type:upper-

type

marker used.

circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha inside outside

roman; } ul { list-style-type:square; }

list-style- Declares the position of position the list marker. list-style- Declares an image to be image used as the list marker.

ol { list-styleposition:inside; } ul { list-styleposition:outside; } ul { list-styleimage:url(image.jpg); }

URL values.

list-style

Shorthand property to declare three list properties at once.

Separate values by a space in the following order (those that are not defined will use ul { list-style:disc inside inherited or default initial url(image.gif); } values): ol { list-style:upperlist-style-type roman outside; } list-style-position list-style-image li:before { display:marker; markeroffset:5px; }

markeroffset

Declares the marker offset for elements with a value Lengths and the predefined of marker set for the value auto. display property.

Margin Properties
Property Description margin- Declares the top Possible Values Lengths, percentages, and the predefined value Examples div { margin-

top

margin for the element.

auto.

top:5px; } div { margintop:15%; } div { marginright:5px; } div { marginright:15%; } div { marginbottom:5px; } div { marginbottom:15%; } div { marginleft:5px; } div { marginleft:15%; }

marginright

Declares the right Lengths, percentages, and the predefined value margin for the auto. element.

marginbottom

Declares the Lengths, percentages, and the predefined value bottom margin for auto. the element.

marginleft

Declares the left margin for the element.

Lengths, percentages, and the predefined value auto.

margin

Separate values by a space in the following order (those that are not defined will use inherited or div { default initial values): margin:5px 12px 4px 7px; margin-top } margin-right margin-bottom div { Shorthand margin-left margin:5px; } property used to declare all the Undeclared values work as further shorthand margin properties notation. If only one length value is declared, all div { at once. four margins will use that length. If two lengths margin:5px are declared, the top and bottom margins will use 10px; } the first length while the right and left margins will use the second length. If three lengths are div { declared, the top margin will use the first length, margin:5px the right and left margins will use the second 7px 4px; } length, and the bottom margin will use the third length.

Outline Properties
Property Description Possible Values outlineValid color names, RGB values, Declares the outline color. color hexidecimal notation. Examples div { outlinecolor:green; }

div { outlinecolor:#00FF00; } none dotted dashed solid double groove ridge inset outset Lengths or the following predefined values:

outlinestyle

Declares the style of the outline.

div { outlinestyle:solid; } div { outlinestyle:inset; }

outlinewidth

outline

Declares the width of the outline. thin medium thick Separate values by a space in the following order (those that are not Used as a shorthand defined will use inherited or default property to set all the initial values): background properties at once. outline-color outline-style outline-width

div { outlinewidth:2px; } div { outlinewidth:thin; } div { outline:green solid 2px; } div { outline:#00FF00 double thick; }

Padding Properties
Property Description Possible Values Lengths, percentages, and the predefined value auto. Examples div { paddingtop:5px; } div { paddingtop:15%; } div { paddingright:5px; } div { paddingright:15%; } div { paddingbottom:5px; } div { padding-

Declares the top paddingpadding for the top element.

Declares the right paddingLengths, percentages, and the predefined value padding for the right auto. element. Declares the paddingbottom padding bottom for the element.

Lengths, percentages, and the predefined value auto.

Declares the left paddingpadding for the left element.

Lengths, percentages, and the predefined value auto.

bottom:15%; } div { paddingleft:5px; } div { paddingleft:15%; }

padding

Shorthand property used to declare all the Undeclared values work as further shorthand margin properties notation. If only one length value is declared, all at once. four sides will use that length. If two lengths are declared, the top and bottom sides will use the first length while the right and left sides will use the second length. If three lengths are declared, the top side will use the first length, the right and left sides will use the second length, and the bottom side will use the third length.

Separate values by a space in the following order (those that are not defined will use inherited or div { default initial values): padding:5px 12px 4px 7px; padding-top } padding-right padding-bottom div { padding-left padding:5px; } div { padding:5px 10px; } div { padding:5px 7px 4px; }

Page Properties
Property marks orphans page Description Declares the type of marks to display outside the page box. Declares the minimum number of lines of a paragraph that must be left at the bottom of a page. Declares the type of page where an element should be displayed. Possible Values crop cross Integers Indentifiers auto always avoid left right auto always avoid left Examples @page { marks:crop; } @page { orphans:2; } More Information More Information

page-breakDeclares a page break. after

page-breakDeclares a page break. before

More Information

page-breakDeclares a page break. inside

size

Declares the size and orientation of a page box.

right auto avoid Lengths, and the following predefined values: auto landscape potrait

More Information

More Information

widows

Declares the minimum number of lines of a paragraph that must be left at the top of Integers a page.

@page { widows:2; }

Table Properties
Property bordercollapse Description Declares the way collapse borders are displayed. separate Lengths for the horizontal and vertical spacing, separated by a space. borderspacing table { borderDeclares the distance spacing:5px; } If one length is value is declared, that separating borders (if length is used for both the horizontal and border-collapse is vertical spacing. If two lengths are table { borderseparate). declared, the first one is used for spacing:5px 10px; } horizontal spacing and the second one is used for vertical spacing. caption { captionDeclares where the top side:top; } table caption is bottom displayed in relation left caption { captionto the table. right side:right; } table { emptyDeclares the way cells:show; } empty cells are show displayed (if border- hide table { emptycollapse is separate). cells:hide; } Declares the type of auto table { tabletable layout. fixed layout:auto; } Possible Values Examples table { bordercollapse:collapse; } table { bordercollapse:separate; }

captionside

emptycells tablelayout

table { tablelayout:fixed; }

Text Properties
Property Description Possible Values Valid color names, RGB values, hexidecimal notation. The predefined color names are: aqua black blue fuchsia gray Declares the color of the green text. lime maroon navy olive purple red silver teal white yellow ltr rtl Declares the reading direction of the text. ltr = left-to-right rtl = right-to-left Examples

div { color:green; } div { color:rgb(0,255,0); } div { color:#00FF00; }

color

div { direction:ltr; } div { direction:rtl; } div { lineheight:normal; }

direction

line-height

Declares the distance between lines.

Numbers, percentages, lengths, and div { line-height:2em; the predefined value of normal. } div { line-height:125%; }

letterspacing

Declares the amount of A length (in addition to the default div { letterspace between text space) or the predefined value of spacing:normal; } characters. normal.

div { letterspacing:5px; } div { letter-spacing:1px; } left right center justify If used on a set of table cells, this property can be given a string value to which the text of each row of the column will be aligned. none underline overline line-through blink div { text-align:center; } div { text-align:right; } td { text-align:"."; } div { textdecoration:none; } div { textdecoration:underline; } div { text-indent:12px; } div { text-indent:2%; } A list containg a color followed by numeric values (separated by spaces) that specify: 1. The color for the shadow effect 2. Horizontal distance to the right of the text div { text-shadow:olive 3. Vertical distance below the -3px -4px 5px; } text 4. Blur radius div { texttransform:uppercase; } div { texttransform:lowercase; } div { unicodebidi:embed; } div { unicode-bidi:bididiv { textshadow:green 2px 2px 7px; }

Declares the horizontal text-align alignment of inline content.

textDeclares the text decoration decoration.

text-indent

Declares the indentation Lengths and percentages. of the first line of text.

textshadow

Declares shadow effects on the text.

none Declares the textcapitalize capitalization effects on transform uppercase the letters in the text. lowercase unicodebidi Declares values relating normal to bidirectional text. embed May be used in bidi-override conjunction with the the

direction property. whitespace Declares how white space is handled in an element. normal pre nowrap

override; } div { white-space:pre; }

wordspacing

Declares the space between words in the text.

div { whitespace:nowrap; } div { wordA length (in addition to the default spacing:normal; } space) or the predefined value of normal. div { wordspacing:1.5em; }

Other Properties
Property Description Possible Values Angle values in degrees (deg), or one of the following predefined values: Examples

azimuth

left-side far-left left Declares the angle that center-left sound travels to the center listener. center-right right far-right right-side behind leftwards rightwards

div { azimuth:90deg; } div { azimuth:behind; }

cue-after

cue-before

cue

div { cueDeclares an audio cue URL values and the predefined after:url(sound.wav); } to play after an element. value none. div { cue-after:none; } div { cueDeclares an audio cue URL values and the predefined before:url(sound.wav); } to play before an value none. element. div { cue-before:none; } div { cue:url(sound.wav) URL values and the predefined url(sound2.wav); } Shorthand proerty to set value none. Separate the both cue values at once. values by a space in the div { cue:url(sound.wav); following order: }

cue-before cue-after If only one cue value is declared, it is used for both before and after. Angle values in degrees (deg), or one of the following predefined values: elevation Declares the elevation of a sound. div { elevation:30deg; } below level above higher lower div { elevation:higher; }

pause-after

Declares the amount of Time in milliseconds (ms) or time to pause after an percentages. element.

div { pause-after:100ms; } div { pause-after:20%; } div { pause-before:100ms; } div { pause-before:20%; }

Declares the amount of Time in milliseconds (ms) or pause-before time to pause before an percentages. element. Separate the values by a space in the following order: Shorthand proerty to set pause-before pause both pause values at pause-after once. If only one pause value is declared, it is used for both before and after. Frequencies in hertz (Hz) or the following predefined values: Declares the average pitch speaking pitch of a x-low voice. low medium high x-high Number values between 0 and Declares a change in 100 (lower values indicate a pitch-range the pitch range of a flat voice while higher values voice. indicate an animated voice).

div { pause:200ms 100ms; } div { pause:100ms; }

div { pitch:120Hz; } div { pitch:high; }

div { pitch-range:50; } div { pitch-range:99; }

URL value, followed by one or more of the following keywords, separated by spaces: div { playduring:url(music.wav); } Declares a background mix repeat sound to be played div { playplay-during while the current during:url(music.wav) element is spoken. repeat; } Alternatley, one of the following keywords: div { play-during:none; } auto none Numeric values between 0 and div { richness:50; } Declares the richness of 100 (lower values have less richness the voice in spoken richness and higher values text. div { richness:0; } have more richness). div { speak:none; } normal Declares if/how text is speak none spoken. spell-out div { speak:spell-out; } th { speak-header:once; } Declares how often speakonce table header cells are header always th { speak-header:always; spoken. } div { speaknumeral:digits; } speakDeclares how numerals digits numeral are spoken. continuous div { speaknumeral:continuous; } div { speakpunctuation:code; } speakDeclares how code punctuation punctuation is spoken. none div { speakpunctuation:none; } A number indicating the number of words per minute, or one of the following predefined values: div { speech-rate:50; } Declares the speech rate x-slow speech-rate of spoken text. slow div { speech-rate:medium; medium } fast x-fast faster slower

stress

Declares the stress of the voice on spoken text. Declares the voice family of spoken text.

voice-family

Numeric values between 0 and div { stress:50; } 100 (lower values have less stress and higher values have div { stress:0; } more stress). Generic or specific voice More Information family names. Numbers between 0 and 100, percentages, or one of the following predefined values: silent x-soft soft medium loud x-loud div { volume:50; } div { volume:silent; }

volume

Declares the median volume.

Main Page | HTML | HTML5 | CSS3 | JavaScript | DHTML/Style Sheets PutWeb/FTP | CGI/Perl Privacy | Contact
Copyright 1997-2011 The Web Design Resource. All rights reserved.