CSS PropertiesOrder by Category

The following section contains a complete list of standard properties

belonging to the latest CSS3 specifications. All the properties are listed
alphabetically.

Property Description

align-content Specifies the alignment of flexible container's items within the flex container.
align-items Specifies the default alignment for items within the flex container.
align-self Specifies the alignment for selected items within the flex container.
animation Specifies the keyframe-based animations.
animation-delay Specifies when the animation will start.
animation- Specifies whether the animation should play in reverse on alternate cycles or not.
direction
animation- Specifies the number of seconds or milliseconds an animation should take to complete on
duration cycle.

animation-fill- Specifies how a CSS animation should apply styles to its target before and after it is
mode executing.

animation- Specifies the number of times an animation cycle should be played before stopping.
iteration-count
animation-name Specifies the name of @keyframes defined animations that should be applied to the
selected element.
animation-play- Specifies whether the animation is running or paused.
state
animation- Specifies how a CSS animation should progress over the duration of each cycle.
timing-function
backface- Specifies whether or not the "back" side of a transformed element is visible when facing
visibility user.

background Defines a variety of background properties within one declaration.

background- Specify whether the background image is fixed in the viewport or scrolls.
attachment
background-clip Specifies the painting area of the background.
background-color Defines an element's background color.
Property Description

background-image Defines an element's background image.

background- Specifies the positioning area of the background images.
origin
background- Defines the origin of a background image.
position
background- Specify whether/how the background image is tiled.
repeat
background-size Specifies the size of the background images.
border Sets the width, style, and color for all four sides of an element's border.
border-bottom Sets the width, style, and color of the bottom border of an element.
border-bottom- Sets the color of the bottom border of an element.
color
border-bottom- Defines the shape of the bottom-left border corner of an element.
left-radius
border-bottom- Defines the shape of the bottom-right border corner of an element.
right-radius
border-bottom- Sets the style of the bottom border of an element.
style
border-bottom- Sets the width of the bottom border of an element.
width
border-collapse Specifies whether table cell borders are connected or separated.
border-color Sets the color of the border on all the four sides of an element.
border-image Specifies how an image is to be used in place of the border styles.
border-image- Specifies the amount by which the border image area extends beyond the border box.
outset
border-image- Specifies whether the image-border should be repeated, rounded or stretched.
repeat
border-image- Specifies the inward offsets of the image-border.
slice
border-image- Specifies the location of the image to be used as a border.
source
border-image- Specifies the width of the image-border.
Property Description

width
border-left Sets the width, style, and color of the left border of an element.
border-left- Sets the color of the left border of an element.
color
border-left- Sets the style of the left border of an element.
style
border-left- Sets the width of the left border of an element.
width
border-radius Defines the shape of the border corners of an element.
border-right Sets the width, style, and color of the right border of an element.
border-right- Sets the color of the right border of an element.
color
border-right- Sets the style of the right border of an element.
style
border-right- Sets the width of the right border of an element.
width
border-spacing Sets the spacing between the borders of adjacent table cells.
border-style Sets the style of the border on all the four sides of an element.
border-top Sets the width, style, and color of the top border of an element.
border-top-color Sets the color of the top border of an element.
border-top-left- Defines the shape of the top-left border corner of an element.
radius
border-top- Defines the shape of the top-right border corner of an element.
right-radius
border-top-style Sets the style of the top border of an element.
border-top-width Sets the width of the top border of an element.
border-width Sets the width of the border on all the four sides of an element.
bottom Specify the location of the bottom edge of the positioned element.
box-shadow Applies one or more drop-shadows to the element's box.
box-sizing Alter the default CSS box model.
Property Description

caption-side Specify the position of table's caption.

clear Specifies the placement of an element in relation to floating elements.
clip Defines the clipping region.
color Specify the color of the text of an element.
column-count Specifies the number of columns in a multi-column element.
column-fill Specifies how columns will be filled.
column-gap Specifies the gap between the columns in a multi-column element.
column-rule Specifies a straight line, or "rule", to be drawn between each column in a multi-column
element.
column-rule- Specifies the color of the rules drawn between columns in a multi-column layout.
color
column-rule- Specifies the style of the rule drawn between the columns in a multi-column layout.
style
column-rule- Specifies the width of the rule drawn between the columns in a multi-column layout.
width
column-span Specifies how many columns an element spans across in a multi-column layout.
column-width Specifies the optimal width of the columns in a multi-column element.
columns A shorthand property for setting column-width and column-count properties.
content Inserts generated content.
counter- Increments one or more counter values.
increment
counter-reset Creates or resets one or more counters.
cursor Specify the type of cursor.
direction Define the text direction/writing direction.
display Specifies how an element is displayed onscreen.
empty-cells Show or hide borders and backgrounds of empty table cells.
flex Specifies the components of a flexible length.
flex-basis Specifies the initial main size of the flex item.
flex-direction Specifies the direction of the flexible items.
Property Description

flex-flow A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow Specifies how the flex item will grow relative to the other items inside the flex container.
flex-shrink Specifies how the flex item will shrink relative to the other items inside the flex containe
flex-wrap Specifies whether the flexible items should wrap or not.
float Specifies whether or not a box should float.
font Defines a variety of font properties within one declaration.
font-family Defines a list of fonts for element.
font-size Defines the font size for the text.
font-size-adjust Preserves the readability of text when font fallback occurs.
font-stretch Selects a normal, condensed, or expanded face from a font.
font-style Defines the font style for the text.
font-variant Specify the font variant.
font-weight Specify the font weight of the text.
height Specify the height of an element.
justify-content Specifies how flex items are aligned along the main axis of the flex container after any
flexible lengths and auto margins have been resolved.
left Specify the location of the left edge of the positioned element.
letter-spacing Sets the extra spacing between letters.
line-height Sets the height between lines of text.
list-style Defines the display style for a list and list elements.
list-style-image Specifies the image to be used as a list-item marker.
list-style- Specifies the position of the list-item marker.
position
list-style-type Specifies the marker style for a list-item.
margin Sets the margin on all four sides of the element.
margin-bottom Sets the bottom margin of the element.
margin-left Sets the left margin of the element.
margin-right Sets the right margin of the element.
Property Description

margin-top Sets the top margin of the element.

max-height Specify the maximum height of an element.
max-width Specify the maximum width of an element.
min-height Specify the minimum height of an element.
min-width Specify the minimum width of an element.
opacity Specifies the transparency of an element.
order Specifies the order in which a flex items are displayed and laid out within a flex containe
outline Sets the width, style, and color for all four sides of an element's outline.
outline-color Sets the color of the outline.
outline-offset Set the space between an outline and the border edge of an element.
outline-style Sets a style for an outline.
outline-width Sets the width of the outline.
overflow Specifies the treatment of content that overflows the element's box.
overflow-x Specifies the treatment of content that overflows the element's box horizontally.
overflow-y Specifies the treatment of content that overflows the element's box vertically.
padding Sets the padding on all four sides of the element.
padding-bottom Sets the padding to the bottom side of an element.
padding-left Sets the padding to the left side of an element.
padding-right Sets the padding to the right side of an element.
padding-top Sets the padding to the top side of an element.
page-break-after Insert a page breaks after an element.
page-break- Insert a page breaks before an element.
before
page-break- Insert a page breaks inside an element.
inside
perspective Defines the perspective from which all child elements of the object are viewed.
perspective- Defines the origin (the vanishing point for the 3D space) for the perspective property.
origin
position Specifies how an element is positioned.
Property Description

quotes Specifies quotation marks for embedded quotations.

resize Specifies whether or not an element is resizable by the user.
right Specify the location of the right edge of the positioned element.
tab-size Specifies the length of the tab character.
table-layout Specifies a table layout algorithm.
text-align Sets the horizontal alignment of inline content.
text-align-last Specifies how the last line of a block or a line right before a forced line break is aligned
when text-align is justify.
text-decoration Specifies the decoration added to text.
text-decoration- Specifies the color of the text-decoration-line.
color
text-decoration- Specifies what kind of line decorations are added to the element.
line
text-decoration- Specifies the style of the lines specified by the text-decoration-line property
style
text-indent Indent the first line of text.
text-justify Specifies the justification method to use when the text-align property is set
to justify.
text-overflow Specifies how the text content will be displayed, when it overflows the block containers.
text-shadow Applies one or more shadows to the text content of an element.
text-transform Transforms the case of the text.
top Specify the location of the top edge of the positioned element.
transform Applies a 2D or 3D transformation to an element.
transform-origin Defines the origin of transformation for an element.
transform-style Specifies how nested elements are rendered in 3D space.
transition Defines the transition between two states of an element.
transition-delay Specifies when the transition effect will start.
transition- Specifies the number of seconds or milliseconds a transition effect should take to comple
duration
transition- Specifies the names of the CSS properties to which a transition effect should be applied.
Property Description

property
transition- Specifies the speed curve of the transition effect.
timing-function
vertical-align Sets the vertical positioning of an element relative to the current text baseline.
visibility Specifies whether or not an element is visible.
white-space Specifies how white space inside the element is handled.
width Specify the width of an element.
word-break Specifies how to break lines within words.
word-spacing Sets the spacing between words.
word-wrap Specifies whether to break words when the content overflows the boundaries of its conta
z-index Specifies a layering or stacking order for positioned elements.

Commonly Used Font Combinations

The following table lists some commonly used font combinations,
organized by generic family.

Serif Fonts
font-family Normal Bold

Georgia, serif This is normal text. This is bold tex

"Times New Roman", Times, serif This is normal text. This is bold text.

"Palatino Linotype", Palatino, "Book Antiqua", serif This is normal text. This is bold tex

Sans-Serif Fonts
font-family Normal Bold

Arial, Helvetica, sans-serif This is normal text. This is bold text.

"Arial Black", Gadget, sans-serif This is normal text. This is bold text.

Impact, Charcoal, sans-serif This is normal text. This is bold text.

Tahoma, Geneva, sans-serif This is normal text. This is bold text.

"Trebuchet MS", Helvetica, sans-serif This is normal text. This is bold text.

Verdana, Geneva, sans-serif This is normal text. This is bold text.

Monospace Fonts

font-family Normal Bold

Courier, monospace This is normal text. This is bold text.

"Courier New", Courier, monospace This is normal text. This is bold text.

"Lucida Console", Monaco, monospace This is normal text. This is bold text.

Cursive Fonts
font-family Normal Bold

"Comic Sans MS", cursive This is normal text. This is bold text.

"Courier New", Courier, monospace This is normal text. This is bold text.

"Lucida Console", Monaco, monospace This is normal text. This is bold text.
This will direct the speech synthesizer to speak headers in a very rich
male voice (a kind of "audio font").Before speaking the headers; a
sound sample will be played from the given URL.
Paragraphs will appear to come from front left (if the sound system is
capable of spatial audio). And quotes will be very soft.

Property Values Description

azimuth angle Sets where the sound should come from horizontally.
left-side
far-left
left
 center-
left
center
center-
right
right
far-right
right-side
behind
leftwards
rightwards
inherit
cue cue-before Shorthand for setting the cue properties (i.e. cue-before and cue-after) in one
cue-after declaration.
inherit
cue-after none Specifies a sound to be played after speaking an element's content to delimit
url from other.
inherit
cue-before none Specifies a sound to be played before speaking an element's content to delim
url from other.
inherit
elevation angle Sets where the sound should come from vertically.
below
level
above
higher
lower
inherit
pause pause-before Shorthand for setting the pause properties (i.e. pause-before and pause-after)
pause-after one declaration.
inherit
pause-after time Specify a pause to be observed after speaking an element's content.
%
inherit
pause-before time Specify a pause to be observed before speaking an element's content.
%
inherit
pitch frequency Specifies the average pitch (a frequency) of the speaking voice. The average
x-low pitch of a voice depends on the voice family.
low
medium
 high
x-high
inherit
pitch-range number Specifies variation in average pitch.
inherit
play-during auto Specifies a sound to be played as a background while an element's content is
none spoken.
url
mix
repeat
inherit
richness number Specifies the richness of the speaking voice.
inherit
speak normal Specifies whether text will be rendered aurally and if so, in what manner.
none
spell-out
inherit
speak-header always Specifies whether table headers are spoken before every cell, or only before
once cell when that cell is associated with a different header than the previous cel
inherit
speak- digits Specifies how numerals are spoken.
numeral continuous
inherit
speak- none Specifies how punctuation characters are spoken.
punctuation code
inherit
speech-rate number Specifies the speaking rate i.e. number of words spoken per minute.
x-slow
slow
medium
fast
x-fast
faster
slower
inherit
Stress number Specifies the "stress" in the speaking voice.
inherit
voice-family specific-voice Specifies a comma-separated, prioritized list of voice family names.
generic-voice
inherit
volume number Specifies the volume of the speaking voice.
%
silent
x-soft
soft
medium
loud
x-loud
inherit