CSS - References

This comprehensive reference for web developers includes a list of all the CSS properties specified in the recommended specification for Cascading Style Sheets, by the World Wide Web Consortium.

Following is the list of all CSS properties arranged alphabetically.

A

Property	Description
accent-color	Sets a highlight color for controls on user interfaces.
align-content	Specifies how the flex lines are distributed inside a flex container along it's cross-axis or grid's block-axis.
align-items	Describes how objects inside a flexible container should be aligned.
align-self	Defines how selected objects inside a flexible container should be aligned.
all	Resets all the properties except unicode-bidi and direction.
animation	Applies animation between styles. Shorthand for all the animation properties.
animation-delay	Defines a pause before an animation begins.
animation-direction	Specifies whether an animation should play in reverse, forward, or alternating cycles.
animation-duration	Indicates the amount of time an animation should take to finish one cycle.
animation-fill-mode	Defines the styles to be applied on the target element before and after the animation.
animation-iteration-count	Defines how many times an animation should be played.
animation-name	Gives the @keyframes animation a name.
animation-play-state	Specifies whether an animation is running or paused.
animation-timing-function	Gives an animation's speed curve specifications.
aspect-ratio	Defines an element's desired aspect ratio.

B

Property	Description
backdrop-filter	Defines a visual impact on the space behind an element.
backface-visibility	Specifies whether an element's back face should be revealed when facing the user.
background	Shorthand property for all background style properties.
background-attachment	Determines if a background picture is fixed or gets scrolled with the page.
background-blend-mode	Sets the way the background images get blended with each other and with it's background color.
background-clip	Defines the extension of the background within an element.
background-color	Defines the color of an element's background.
background-image	Sets the background image for an element.
background-origin	Describes the location of a background image's origin.
background-position	Sets the starting position of the background image.
background-position-x	Sets the position of the background image on the x-axis.
background-position-y	Sets the position of the background image on the y-axis.
background-repeat	Determines whether and how a background image should be repeated.
background-size	Defines the dimensions of the background image.
border	Sets the border of an element.
border-block	Shorthand for setting the logical block border property values.
border-block-color	Defines the color of the borders in the block direction at the start and end.
border-block-end	Shorthand property for setting the logical block end border properties.
border-block-end-color	Defines the color of the logical block-end border of an element.
border-block-end-style	Defines the style of the logical block-end border of an element.
border-block-end-width	Defines the width of the logical block-end border of an element.
border-block-start	Shorthand property for setting the logical block-start border properties.
border-block-start-color	Defines the color of the logical block-start border of an element.
border-block-start-style	Defines the style of the logical block start border of an element.
border-block-start-width	Defines the width of the logical block-start border of an element.
border-block-style	Defines the style of the logical block borders of an element.
border-block-width	Defines the width of the logical block borders of an element.
border-bottom	Shorthand property sets the element's bottom border.
border-bottom-color	Sets the color of an element's bottom border.
border-bottom-left-radius	Rounds the bottom-left corner of an element.
border-bottom-right-radius	Rounds the bottom-right corner of an element.
border-bottom-style	Sets the style of the bottom border.
border-bottom-width	Sets the width of the bottom border.
border-collapse	Specifies whether the borders of a table should be divided or collapsed into a single border.
border-color	Sets the color of the border(s).
border-end-end-radius	Defines a logical border radius on an element.
border-end-start-radius	Defines a logical border radius on an element.
border-image	Sets an image as border to an element.
border-image-outset	Defines how much of the border image area goes outside of the border box.
border-image-repeat	Specifies whether the border image should be stretched, rounded, or repeated.
border-image-slice	Divides the border image into regions.
border-image-source	Defines the path to the image that will be used as the border.
border-image-width	Sets the width of the border image.
border-inline	Shorthand property for setting the individual logical inline border property values.
border-inline-color	Defines the color of the logical inline borders of an element.
border-inline-end	Shorthand property for setting the logical inline-end border property values.
border-inline-end-color	Sets the color of the logical inline-end border.
border-inline-end-style	Sets the style of the logical inline-end border.
border-inline-end-width	Sets the width of the logical inline-end border.
border-inline-start	Shorthand property for setting the logical inline-start border property values.
border-inline-start-color	Sets the color of the logical inline-start border.
border-inline-start-style	Sets the style of the logical inline-start border.
border-inline-start-width	Sets the width of the logical inline-start border.
border-inline-style	Defines the style of the logical inline borders of an element.
border-inline-width	Defines the width of the logical inline borders of an element.
border-left	Shorthand for setting all the properties of the left border of an element.
border-left-color	Defines the color of the left border of an element.
border-left-style	Defines the style of the left border of an element.
border-left-width	Defines the width of the left border of an element.
border-radius	Rounds the corners of an element's outer border edge.
border-right	Shorthand for setting all the properties of the right border of an element.
border-right-color	Defines the color of the right border of an element.
border-right-style	Defines the style of the right border of an element.
border-right-width	Defines the width of the right border of an element.
border-spacing	Defines a distance between borders of adjacent cells in a table.
border-start-end-radius	Defines a logical border radius on an element, between the block-start and inline-end sides.
border-start-start-radius	Defines a logical border radius on an element, between the block-start and inline-start sides.
border-style	Sets the line style for all four sides of an element's border.
border-top	Shorthand property setting all the properties of the top border of an element.
border-top-color	Defines the color of the top border.
border-bottom-left-radius	Rounds the top-left corner of an element.
border-top-right-radius	Rounds the top-right corner of an element.
border-top-style	Sets the line style of top border of an element.
border-top-width	Sets the width of top border of an element.
border-width	Sets the width of an element's border.
bottom	Sets the vertical position of an element.
box-decoration-break	Defines how an element's border and background will behave during page breaks or, in the case of inline elements, at line breaks.
box-shadow	Adds a shadow effect around an element.
box-sizing	Sets the way, the total width and height of an element is calculated.
break-after	Defines whether the given element should be followed by a page, column, or region break.
break-before	Defines whether a region, page, or column break should come before the given element.
break-inside	Defines if the given element should have a page, column, or region break inside of it.

C

Property	Description
caption-side	Defines where a table caption should be positioned.
caret-color	Defines the color of the editable cursor (caret) in text areas, input fields, and other elements.
@charset	Provides details about the character encoding that the style sheet uses.
clear	Defines the behavior of the element next to a floating element.
clip	Clips an element that is precisely positioned.
clip-path	Creates a clipping region that sets the part of the element to be shown.
color	Defines the foreground color of a text.
column-count	Defines the number of columns into which an element should be divided.
column-fill	Controls an element's contents and break it into columns.
column-gap	Defines the size of the gap that exists between the columns.
column-rule	Shorthand property for setting the color, style, and width of the line drawn in between columns.
column-rule-color	Defines the color of the rule that appears between columns.
column-rule-style	Defines the rule's style in between columns.
column-rule-width	Defines how wide the rule should be between columns.
column-span	Defines the number of columns that an element should span across.
column-width	Defines the width of the column.
columns	Shorthand property for setting the width and count of columns.
content	Replaces content with a generated value.
counter-increment	Used to increase or decrease the value of named CSS counters.
counter-reset	Creates named CSS counters and initializes a specific value to them.
counter-set	Sets a given value to a CSS counter.
cursor	Defines the mouse pointer that will be displayed when pointing at an item.

D

Property	Description
direction	Sets the direction of the text, table columns, and horizontal overflow.
display	Defines the display method for a certain HTML element.

E

Property	Description
empty-cells	Defines whether borders and backgrounds to be shown on empty cells in a table.

F

Property	Description
filter	Applies graphical effects to an element.
flex	Shorthand property that sets whether a flex item will grow or shrink.
flex-basis	Defines the starting length of a flexible object.
flex-direction	Defines the flexible elements' direction in a flex container.
flex-flow	Shorthand property for specifying the direction and wrapping behavior of a flex container.
flex-grow	Defines the extent that the item will grow in comparison to the others.
flex-shrink	Defines the shrinking of the item in relation to the others.
flex-wrap	Defines if the flexible elements need to be wrapped or not.
float	Places an element on left or right side of its container.
font	Shorthand property for setting all the font related properties.
@font-face	A rule that allows websites to download and utilize fonts other than the web-safe fonts.
font-family	Defines the text's font family.
font-feature-settings	Gives users command over OpenType fonts' sophisticated typographic capabilities.
font-kerning	Determines how the kerning information, the spacing between letters, is used.
font-language-override	Determines how glyphs, unique to a certain language, are used in a font.
font-size	Determines the font size of the text.
font-size-adjust	Preserves text readability in the event of a font fallback.
font-strech	Selects the standard, condensed, or expanded face of a font.
font-style	Sets the text's font style.
font-synthesis	Determines whether or not the browser should synthesize a style that are missing in a font-family.
font-variant	Sets all the font variants for a font.
font-variant-alternate	Controls the use of alternate glyphs.
font-variant-caps	Controls the use of alternate glyphs used for small capitals.
font-variant-east-asian	Regulates the use of alternate glyphs for East Asian scripts, such as Chinese and Japanese.
font-variant-ligatutes	Regulates the usage of contextual forms and ligatures.
font-variant-numeric	Regulates the use of different glyphs for ordinal markers, fractions, and integers.
font-variant-position	Regulates the use of smaller alternate glyphs that are positioned as superscript or subscript.
font-weight	Specifies the weight of a font.

G

Property	Description
gap	Shorthand property that sets the gaps for the rows and columns.
grid	Shorthand property for setting all grid related properties in one declaration.
grid-area	Shorthand property specifying the grid item's size and location inside a grid.
grid-auto-columns	Defines the default size of a column.
grid-auto-flow	Defines the grid's auto-placed item insertion process.
grid-auto-rows	Defines the default row size.
grid-column	Shorthand property specifying the grid item's size and location inside a grid column.
grid-column-end	Defines the end point of the grid item within grid column.
grid-column-start	Defines the start point of the grid item within grid column.
grid-row	Shorthand property specifying the grid item's size and location inside a grid row.
grid-row-end	Specifies the end point of grid item within grid row.
grid-row-gap	Defines the gap between rows in terms of size.
grid-row-start	Specifies the start point of grid item within grid row.
grid-template	Shorthand property specifying properties related to grid columns, grid rows and grid areas.
grid-template-areas	Defines named grid items and their use in displaying columns and rows.
grid-template-columns	Defines the number of and what size columns are there in a grid layout.
grid-template-rows	Defines the size of the rows in a grid layout.

H

Property	Description
height	Defines an element's height.
hyphens	Defines how to divide words to enhance text layout.
hyphenate-character	Sets the character that will be used before a hyphenation break at the end of the line.

I

Property	Description
image-rendering	Defines the kind of image scaling approach to be used.
@import	Facilitates the importing of one style sheet into another.
inline-size	Defines the horizontal and vertical size of an element's block.
inset	Indicates the distance an element is from its parent element.
inset-block	Defines the logical block start and end offsets of an element.
inset-block-end	Defines the logical block end offsets of an element.
inset-block-start	Defines the logical block start offsets of an element.
inset-inline	Defines the logical start and end offsets of an element in the inline direction.
inset-inline-end	Defines the distance, measured in the inline direction, between an element's end and its parent element.
inset-inline-start	Defines the distance, measured in the inline direction, between an element's start and it's parent element.
isolation	Defines if a new stacking content must be created by an element.

J

Property	Description
justify-content	Defines how space is distributed between and around content items in a flex and grid container.
justify-items	Defines how grid elements should be aligned along the horizontal axis within a grid container.
justify-self	Defines how a grid item should be aligned in the inline direction that resides within a grid container.

K

Property	Description
@keyframes	Defines a set of keyframes for animations or transitions.

L

Property	Description
left	Defines the horizontal position of an element.
letter-spacing	Sets the horizontal spacing between text characters.
line-break	Defines if and how to break lines of East Asian scripts.
line-height	Defines the height of a line box.
list-style	Shorthand property to set all the list style properties in single declaration.
list-style-image	Sets an image as the list item marker.
list-style-position	Sets the position of the marker in a list.
list-style-type	Defines the kind of list item marker.

M

Property	Description
margin	Shorthand property to set the margins on all four sides of an element.
margin-block	Shorthand property defining the logical block start and end margins for an element.
margin-block-end	Defines the logical block end margin of an element.
margin-block-start	Defines the logical block start margin of an element.
margin-bottom	Sets the margin area on the bottom of an element.
margin-block-start	Defines the logical block start margin of an element.
margin-inline	Defines the logical inline start and end margins of an element.
margin-inline-end	Defines the logical inline end margin of an element.
margin-inline-start	Defines the logical inline strat margin of an element.
margin-left	Sets the margin area on the left side of an element.
margin-right	Sets the margin area on the right side of an element.
margin-top	Sets the margin on the top side of an element.
mask	Masks or clips the image at particular points to hide an element (partially or completely).
mask-clip	Determines the area covered by a mask.
mask-composite	Displays the mask layers that are below the current mask layer after a compositing operation is performed.
mask-image	Sets an image to be used as an element's mask layer.
mask-mode	Defines whether the mask reference given by mask-image should be considered as a luminance or alpha mask.
mask-origin	Defines the origin of the mask image.
mask-position	Defines the positioning of a mask image within an element.
mask-repeat	Defines how a mask image should be repeated within an element.
mask-size	Defines the size of a mask image applied to an element using the mask-image property.
mask-type	Sets an SVG <mask> element as a luminance or an alpha mask.
max-height	Sets an upper bound on the height of an element.
max-width	Sets an upper bound on the width of an element.
@media	Sets CSS style rules for specific media types, devices, and sizes.
max-block-size	Sets the maximum size of an element in the opposite direction to its writing direction.
max-inline-size	Defines the horizontal or vertical maximum size of an element's block.
min-block-size	Sets the minimum size, either horizontally or vertically of an element's block based on its writing mode.
min-inline-size	Defines the minimum horizontal or vertical size of an element's block.
min-height	Sets a lower bound on the height of an element.
min-width	Sets a lower bound on the width of an element.
mix-blend-mode	Defines how the element's content should blend with the content of its parent and the element's background.

O

Property	Description
object-fit	Defines how an image or video should be resized or cropped to fit within its container.
object-position	Defines the position of the content inside an element that has a defined size.
offset	Shorthand property that makes it easier for an element to animate along a certain path.
offset-anchor	Defines the moving position of an element inside a box traveling along an offset-path.
offset-distance	Defines the position along an offset-path where an element should be placed.
offset-path	Defines an element's path inside its parent container or SVG coordinate system.
offset-rotate	Defines the orientation or direction of an element as it moves along the specified offset-path.
opacity	Sets the transparency of an element.
order	Defines the order in which flex items appear within a flex container.
orphans	Defines the minimum number of lines required at the bottom of a page, region, or column to prevent a break.
outline	Sets the width, color, and style of an outline around an element.
outline-color	Sets the color of an outline around an element.
outline-offset	Defines the space between an outline and the border edge of an element.
outline-style	Determines the style of an outline around an element.
outline-width	Defines the width of the outline around an element.
overflow	Defines how to handle content that overflows the boundaries of its container.
overflow-anchor	Provides a way to disable the browser's scroll anchoring behavior, which adjusts scroll position to reduce content shifting.
overflow-wrap	Allows the browser to split a line of text into an unbreakable string to keep the content from overflowing its container.
overflow-clip-margin	Defines the distance that content can overflow the element's box before being clipped.
overflow-x	Defines that an element's content will overflow to its left and right margins, as well as horizontally.
overflow-y	Defines how the content of a block-level element is displayed when it exceeds the element's top and bottom edges.
overflow-block	Defines how the content of an element behaves when it exceeds the left and right boundaries of its box.
overflow-inline	Defines how overflowing content is displayed when it overflows the inline edges of an element.
overscroll-behavior	Determines what a browser does when the boundary of a scrolling area is reached.
overscroll-behavior-block	Determines how the browser behaves when the block direction border of a scrolling region is reached.
overscroll-behavior-inline	Determines how the browser behaves when the inline direction border of a scrolling region is reached.
overscroll-behavior-x	Determines what a browser does when the horizontal boundary of a scrolling area is reached.
overscroll-behavior-y	Determines what a browser does when the vertical boundary of a scrolling area is reached.

P

Property	Description
padding	Shorthand property that defines the padding for all sides of an element.
padding-block	Determines the logical block start and end padding of an element.
padding-block-end	Determines the logical block end padding of an element.
padding-block-start	Sets the width of the padding on the bottom of an element.
padding-bottom	Sets the width of the padding on the bottom of an element.
padding-inline	Determines the logical inline start and end padding of an element.
padding-inline-end	Determines the logical inline end padding of an element.
padding-inline-start	It is used to create custom counter styles.
padding-left	Sets the padding space on the left side of an element.
padding-right	Sets the padding space on the right side of an element.
padding-top	Sets the padding space on the top side of an element.
perspective	Defines the distance between the z=0 plane and the user.
perspective-origin	Defines the position at which viewer / user is looking.
place-content	Aligns content in both the block (column) and inline (row) axes simultaneously.
place-items	Aligns the items within the grid and flexbox container along both the block (column) and inline (row) axes.
place-self	Aligns the individual items in both block and inline directions simultaneously.
pointer-events	Determines whether or not an element receive pointer events.
position	Defines the position of an element on a web page.

Q

Property	Description
quotes	Defines the style of quotation marks to be used for embedded quotes.

R

Property	Description
resize	Defines if and how a user can resize an element.
right	Controls the horizontal position of an element
rotate	Defines the way an element rotates.
row-gap	Defines the gap between the grid rows.

S

Property	Description
scale	Specifies the scale transformation of elements, independent of transform property.
scroll-behavior	Defines how smoothly the browser scrolls when a user clicks on a link or uses the scroll bar.
scroll-margin	Defines the margin of an element within the snap area.
scroll-margin-block	Shorthand property that defines the margin of the scroll snap area at the block axis.
scroll-margin-block-end	Defines the margin of the scroll snap area at the end of the block axis.
scroll-margin-block-start	Defines the margin of the scroll snap area at the start of the block axis.
scroll-margin-bottom	Defines the margin at the bottom of a scrolling container.
scroll-margin-inline	Sets the scroll margin of an element in the line (horizontal axis) dimension.
scroll-margin-inline-end	Defines the margin for the scroll snap region at the end of the horizontal dimension.
scroll-margin-inline-start	Defines the margin for the scroll snap area at the start of the horizontal dimension.
scroll-margin-bottom	Defines the bottom margin of the scroll snap area of an element.
scroll-margin-left	Defines the left margin of the scroll snap area of an element.
scroll-margin-top	Defines the top margin of the scroll snap area of an element.
scroll-margin-right	Defines the right margin of the scroll snap area of an element.
scroll-padding	Defines the scroll padding between the edge of the scroll container and the area of an element that snaps into place once scrolling stops.
scroll-padding-block	Defines the scroll padding of an element in the block dimension.
scroll-padding-block-start	Defines the offsets for the start edge of the scroll padding of an element in the block dimension.
scroll-padding-block-end	Defines the offsets for the end edge of the scroll padding of an element in the block dimension.
scroll-padding-bottom	Defines the bottom offset of the scroll snap area of an element.
scroll-padding-left	Defines the amount of space between the left edge of the scroll container and the scroll snap area of an element.
scroll-padding-right	Defines the amount of space between the right edge of the scroll container and the scroll snap area of an element.
scroll-padding-top	Defines the top offset of the scroll snap area of an element.
scroll-padding-inline	Defines the scroll padding of an element in the inline dimension.
scroll-padding-inline-start	Defines the offsets for the start edge of the scrollport, in the inline dimension.
scroll-padding-inline-end	Defines the offsets for the end edge of the scrollport, in the inline dimension.
scroll-snap-align	Defines how a snapped element is positioned within its snap container.
scroll-snap-shot	Determines whether the scroll container will scroll past or stick to the nearest snap positions.
scroll-snap-type	Defines how the scroll container snaps to snap positions.
scrollbar-color	Defines the color of the scrollbar track and thumb.
scrollbar-width	Used to style the width of scrollbar track and thumb.
scrollbar-gutter	It helps to create a fixed space for the scrollbar.
shape-image-threshold	Specifies the alpha channel threshold for shape extraction when using an image with the shape-outside property.
shape-margin	Defines the margin around a specified CSS shape.
shape-outside	Defines a shape around which inline content should wrap.

T

Property	Description
tab-size	Defines the width of tab characters within an element.
table-layout	Defines the way the <table> cells, rows, and columns are displayed.
text-align	Defines the alignment of the text with the margin of the page.
text-align-last	Sets the way the last line of a block or a line, just before a forced line break, is aligned.
text-combine-upright	Defines how to fit several characters into a single character's area.
text-decoration	Defines the decoration added to text.
text-decoration-color	Defines the color of the text decoration.
text-decoration-line	Used to add a decoration line to the text.
text-decoration-style	Used to add style to the text decoration line.
text-decoration-thickness	Used to add thickness to the text decoration line.
text-emphasis	Shorthand property that is used to add emphasis to text.
text-emphasis-color	Used to set the color of the emphasis marks around a text.
text-emphasis-position	Used to set the position of the emphasis mark around a text.
text-emphasis-style	Defines the appearance of emphasis marks.
text-indent	Defines the indentation of the first line of the text.
text-orientation	Defines the orientation of text characters in a line.
text-overflow	Controls how hidden overflow content is displayed to users.
text-shadow	Used to add a shadow effect to text.
text-transform	Change the appearance of text by transforming it in various ways.
text-underline-offset	Defines the distance of an underline text decoration line from its initial position.
text-underline-position	Defines where the underlining text decoration should be positioned.
top	Defines vertical position of an element relative to its containing element.
transform	It is useful in rotation, scaling, skewing, or translation of an element.
transform-box	Defines the layout box to which transformation properties relate.
transform-origin	Helps in setting the origin for the transformation of an element.
transform-style	Defines the 3D space rendering of nested items.
transition	A property that works as a shorthand for every transition property.
transition-delay	Defines the amount of time to wait before starting a transition effect
transition-duration	Defines the amount of time that a transition animation should take to complete.
transition-property	Defines which CSS properties should have a transition effect applied.
transition-timing-function	Defines the transition effect's speed curve.
translate	Allows you to move an element along the X, Y, and Z axes.

U

Property	Description
unicode-bidi	Controls how bidirectional text is displayed in a document.
user-select	Determines if text can be selected by the user.

V

Property	Description
vertical-align	Defines an element's vertical alignment.
visibilty	Defines if an element needs to be shown or hidden without changing the layout of a document.

W

Property	Description
white-space	Defines the white space flow inside the text in an element.
widows	Defines how many lines a page or column must have left at the top.
width	Defines the width of an element's content area.
word-break	Defines how words should be broken or wrapped in case they exceed the available width of an element.
word-spacing	Defines the space between the words in a text.
writing-mode	Defines if text should be displayed vertically or horizontally.

Z

Property	Description
z-index	Controls the stacking order of elements in web page.

Print Page