CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities
All CSS Properties
align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap z-index

CSS Property Reference

Below down is an alphabetical list of all CSS Properties:


align-content Defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container
align-items Defines how the browser distributes space between and around flex items along the cross-axis of their container
align-self Aligns flex items of the current flex line overriding the align-items value
all Sets all of an element's properties (other than unicode-bidi and direction) to their initial or inherited values
animation A shorthand property for all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies a name for the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of an animation


backface-visibility Determines whether the back face of an element is visible when turned towards the user
background A shorthand property for setting all the background properties in single declaration
background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed
background-blend-mode Specifies the blending mode of each background layer
background-clip Defines how far the background (color or image) should extend within an element
background-color Specifies the background color of an element
background-image Specifies background images for an element
background-origin Specifies the origin position of a background image
background-position Specifies the position of a background image
background-repeat Sets if/how a background image will be repeated
background-size Specifies the size of the background images
border A shorthand property for border-width, border-style and border-color
border-bottom A shorthand property for setting all the bottom border properties in single declaration
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius Defines the radius of the border of the bottom-left corner
border-bottom-right-radius Defines the radius of the border of the bottom-right c
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-collapse Sets whether table borders should collapse into a single border or be separated
border-color Sets the color of the four borders
border-image Lets you draw an image in place of an element's border-style
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched
border-image-slice Specifies how to slice the border image
border-image-source Specifies the path to the image to be used as a border
border-image-width Specifies the width of the border image
border-left A shorthand property for setting all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for setting all the four border radius properties
border-right A shorthand property for setting all the right border properties in single declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-spacing Sets the distance between the borders of adjacent cells
border-style Sets the style of the all four borders
border-top A shorthand property for setting all the top border properties in single declaration
border-top-color Sets the color of the top border
border-top-left-radius Defines the radius of the border of the top-left corner
border-top-right-radius Defines the radius of the border of the top-right corner
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the all four borders
bottom Specifies the vertical position of a positioned element. It has no effect on non-positioned elements
box-decoration-break Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break
box-shadow Add shadow effects around an element's frame
box-sizing Defines how the user agent should calculate the total width and height of an element


caption-side Specifies the placement of a table caption
caret-color Sets the color of the insertion caret in inputs, textareas, or any element that is editable
@charset Specifies the character encoding used in the style sheet
clear Specifies on which sides of an element floating elements are not allowed to float
clip Clips an absolutely positioned element
color Sets the color of text
column-count Breaks an element's content into the specified number of columns
column-fill Controls how an element's contents are balanced when broken into columns
column-gap Sets the size of the gap (gutter) between an element's columns
column-rule Sets the width, style, and color of the rule (line) drawn between columns in a multi-column layout
column-rule-color Sets the color of the rule (line) drawn between columns in a multi-column layout
column-rule-style Sets the style of the rule (line) drawn between columns in a multi-column layout
column-rule-width Sets the width of the rule (line) drawn between columns in a multi-column layout
column-span Specifies how many columns an element should span across
column-width Specifies the column width
columns A shorthand property for setting column-width and column-count
content Used with the :before and :after pseudo-elements, to insert generated content
counter-increment Increases or decreases the value of one or more CSS counters
counter-reset Creates or resets one or more CSS counters
cursor Specifies the mouse cursor to be displayed when pointing over an element


direction Sets the direction of text, table columns, and horizontal overflow
display Specifies the type of rendering box used for an element


empty-cells Specifies how the browser should render borders and backgrounds around table cells that have no visible content


filter Lets you apply graphical effects like blurring or color shifting to an element
flex Specifies how a flex item will grow or shrink so as to fit the space available in its flex container
flex-basis Specifies the initial length of a flexible item
flex-direction Specifies the direction of the flexible items
flex-flow A shorthand property for the flex-direction and the flex-wrap properties
flex-grow Specifies how much the item will grow relative to the rest
flex-shrink Specifies how the item will shrink relative to the rest
flex-wrap Specifies whether the flexible items should wrap or not
float Specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it
font Sets all the font properties in single declaration
@font-face Specifies a custom font with which to display text; the font can be loaded from either a remote server or the user's own computer
font-family Specifies the font family for text
font-kerning Controls the usage of the kerning information stored in a font
font-size Specifies the font size of text
font-size-adjust Specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters
font-stretch Selects a normal, condensed, or expanded face from a font
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight (or boldness) of the font


grid A shorthand property that sets all of the explicit grid properties
grid-area A shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for defining grid columns, rows, and areas
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout


hanging-punctuation Specifies whether a punctuation mark should hang at the start or end of a line of text
height Sets the height of an element
hyphens Specifies how words should be hyphenated when text wraps across multiple lines


@import Allows you to import a style sheet into another style sheet
isolation Determines whether an element must create a new stacking context


justify-content Defines how the browser distributes space between and around content items along the main axis of their container


@keyframes Specifies the animation code


left Specifies the left position of a positioned element
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
list-style Sets all the properties for a list in single declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers
list-style-type Specifies the type of list-item marker


margin Sets all the margin properties in single declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
@media Sets the style rules based on the result of one or more media queries
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
mix-blend-mode Specifies how an element's content should blend with its parent background


object-fit Specifies how the replaced element's content object should be fitted to the containing element's box
object-position Specifies the alignment of the replaced element's content object within the element's box
opacity Sets the opacity level for an element
order Sets the order of the flexible item, relative to the rest
outline Sets all the outline properties in single declaration
outline-color Sets the color of an element's outline
outline-offset Sets the amount of space between an outline and the edge or border of an element
outline-style Sets the style of an outline
outline-width Sets the width of an outline
overflow Specifies what to do when an element's content is too large to fit in its containing box
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area


padding Sets the padding area on all four sides of an element
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
page-break-after Sets the page-breake behavior after an element
page-break-before Sets the page-breake behavior before an element
page-break-inside Sets the page-breake behavior inside an element
perspective Gives a 3D-positioned element some perspective
perspective-origin Defines at which position the user is looking at the 3D-positioned element
pointer-events Specifies under what circumstances (if any) a particular graphic element can become the target of mouse events
position specifies how an element is positioned in a document


quotes Specified how browser should render quotation marks


resize Sets whether an element is resizable, and if so, in which direction(s)
right Specifies the right position of a positioned element


tab-size Specifies the width of a tab character
table-layout Specifies the algorithm used to lay out table cells, rows, and columns
text-align Specifies the horizontal alignment of text
text-align-last Describes how the last line of a block or a line, right before a forced line break, is aligned
text-combine-upright Specifies the combination of multiple characters into the space of a single character
text-decoration Specifies the appearance of decorative lines used on text
text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration
text-decoration-style Specifies the style of the line in a text decoration
text-indent Specifies the indentation of the first line in a text-block
text-justify Defines what type of justification should be applied to text when it is justified
text-overflow Specifies what should happen when text overflows the containing element
text-shadow Adds shadow to text
text-transform Specifies how to capitalize an element's text
top Specifies the top position of a positioned element
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
transition A shorthand property for setting all transition properties
transition-delay Specifies the amount of time to wait before starting a property's transition effect when its value changes
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect


unicode-bidi Determines how bidirectional text in a document (together with the direction property)
user-select Specifies whether or not the text of an element can be selected


vertical-align Sets the vertical alignment of an element
visibility Specifies whether or not an element is visible


white-space Determines how whitespace inside an element is handled
width Sets the width of an element
windows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element
word-break Specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box
word-spacing Specifies the spacing behavior between tags and words
word-wrap Specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box
writing-mode Specifies whether lines of text are laid out horizontally or vertically


z-index Specifies the z-order of a positioned element