| background |
Sets all the background properties in one declaration. |
color image repeat attachment position size |
| background-color |
Sets the background color of an element. |
color | transparent | inherit |
| background-image |
Sets the background image of an element. |
url | none | inherit |
| background-position |
Sets the starting position of a background image. |
left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom |
| background-repeat |
Sets how a background image will be repeated. |
repeat | repeat-x | repeat-y | no-repeat | inherit |
| background-size |
Specifies the size of the background image(s). |
auto | cover | contain | length | percentage |
| border |
Sets all the border properties in one declaration. |
width style color |
| border-color |
Sets the color of the four borders. |
color | transparent | inherit |
| border-style |
Sets the style of the four borders. |
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit |
| border-width |
Sets the width of the four borders. |
thin | medium | thick | length | inherit |
| border-radius |
Defines the radius of the element's corners. |
length | percentage |
| box-shadow |
Attaches one or more shadows to an element. |
none | h-offset v-offset blur spread color | inset |
| color |
Sets the color of text. |
color | inherit |
| display |
Specifies the display behavior of an element. |
inline | block | inline-block | flex | grid | none | inherit |
| flex |
Specifies the flexible length on flexible items. |
none | [flex-grow flex-shrink flex-basis] | inherit |
| font-family |
Specifies the font family for text. |
family-name | generic-family | inherit |
| font-size |
Specifies the font size of text. |
xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | percentage | inherit |
| font-weight |
Specifies the weight (boldness) of the font. |
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| height |
Sets the height of an element. |
auto | length | percentage | inherit |
| margin |
Sets all the margin properties in one declaration. |
length | percentage | auto | inherit |
| padding |
Sets all the padding properties in one declaration. |
length | percentage | inherit |
| position |
Specifies the type of positioning method used for an element. |
static | relative | absolute | fixed | sticky | inherit |
| text-align |
Specifies the horizontal alignment of text. |
left | right | center | justify | inherit |
| width |
Sets the width of an element. |
auto | length | percentage | inherit |
| align-content |
Aligns a flex container’s lines within when there is extra space in the cross-axis. |
stretch | center | flex-start | flex-end | space-between | space-around | inherit |
| align-items |
Aligns flex items in the flex container. |
stretch | center | flex-start | flex-end | baseline | inherit |
| align-self |
Aligns the flex item of the current line of the flex container. |
auto | stretch | center | flex-start | flex-end | baseline | inherit |
| animation |
A shorthand property for all the animation properties. |
name duration timing-function delay iteration-count direction fill-mode play-state |
| animation-delay |
Specifies when the animation will start. |
time | inherit |
| animation-duration |
Specifies how long an animation should take to complete one cycle. |
time | inherit |
| animation-name |
Specifies the name of the @keyframes animation. |
none | keyframename | inherit |
| border-collapse |
Specifies whether or not table borders should collapse. |
collapse | separate | inherit |
| border-spacing |
Sets the distance between the borders of adjacent cells. |
length | inherit |
| bottom |
Specifies the bottom position of a positioned element. |
auto | length | percentage | inherit |
| clear |
Specifies which sides of an element where other floating elements are not allowed. |
none | left | right | both | inherit |
| clip |
Clips an absolutely positioned element. |
rect(top, right, bottom, left) | auto | inherit |
| content |
Inserts generated content. |
normal | none | counter | attr() | string | inherit |
| cursor |
Specifies the type of cursor to be displayed. |
alias | all-scroll | auto | cell | context-menu | col-resize | copy | crosshair | default | e-resize | ew-resize | grab | grabbing | help | move | n-resize | ne-resize | nesw-resize | ns-resize | nw-resize | nwse-resize | no-drop | none | not-allowed | pointer | progress | row-resize | s-resize | se-resize | sw-resize | text | vertical-text | w-resize | wait | zoom-in | zoom-out | inherit |
| direction |
Specifies the text direction/writing direction. |
ltr | rtl | inherit |
| display |
Specifies how an element is displayed. |
inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inherit |
| filter |
Adds graphical effects like blurring or color shifting to an element. |
none | blur(px) | brightness(%) | contrast(%) | drop-shadow(h-shadow v-shadow blur spread color) | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) |
| float |
Specifies whether or not a box should float. |
none | left | right | inherit |
| flex-direction |
Specifies the direction of the flexible items. |
row | row-reverse | column | column-reverse | inherit |
| flex-wrap |
Specifies whether the flexible items should wrap or not. |
nowrap | wrap | wrap-reverse | inherit |
| font |
Sets all the font properties in one declaration. |
font-style font-variant font-weight font-size/line-height font-family | inherit |
| font-style |
Specifies the font style for text. |
normal | italic | oblique | inherit |
| font-variant |
Specifies whether or not a text should be displayed in a small-caps font. |
normal | small-caps | inherit |
| gap |
Specifies the gaps (gutters) between rows and columns. |
length | percentage | inherit |
| grid |
A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow properties. |
none | subgrid | [ grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow ] |
| grid-area |
Specifies a grid item’s size and location in a grid layout. |
name | span | [line1 / line2 / line3 / line4] |
| grid-template |
A shorthand property for the grid-template-rows, grid-template-columns, and grid-template-areas properties. |
none | subgrid | [ grid-template-rows grid-template-columns grid-template-areas ] |
| height |
Sets the height of an element. |
auto | length | percentage | inherit |
| justify-content |
Aligns the flexible container’s items when the items do not use all available space on the main-axis. |
flex-start | flex-end | center | space-between | space-around | space-evenly | inherit |
| left |
Specifies the left position of a positioned element. |
auto | length | percentage | inherit |
| line-height |
Sets the line height. |
normal | number | length | percentage | inherit |
| list-style |
Sets all the properties for a list in one declaration. |
list-style-type list-style-position list-style-image | inherit |
| margin |
Sets all the margin properties in one declaration. |
length | percentage | auto | inherit |
| max-height |
Sets the maximum height of an element. |
none | length | percentage | inherit |
| max-width |
Sets the maximum width of an element. |
none | length | percentage | inherit |
| min-height |
Sets the minimum height of an element. |
length | percentage | inherit |
| min-width |
Sets the minimum width of an element. |
length | percentage | inherit |
| object-fit |
Specifies how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. |
fill | contain | cover | none | scale-down |
| opacity |
Sets the opacity level for an element (0 is fully transparent and 1 is fully opaque). |
number | inherit |
| overflow |
Specifies what happens if content overflows an element's box. |
visible | hidden | scroll | auto | inherit |
| padding |
Sets all the padding properties in one declaration. |
length | percentage | inherit |
| position |
Specifies the type of positioning method used for an element. |
static | relative | absolute | fixed | sticky | inherit |
| right |
Specifies the right position of a positioned element. |
auto | length | percentage | inherit |
| text-align |
Specifies the horizontal alignment of text. |
left | right | center | justify | inherit |
| top |
Specifies the top position of a positioned element. |
auto | length | percentage | inherit |
| transition |
A shorthand property for the four transition properties. |
property duration timing-function delay |
| visibility |
Specifies whether or not an element is visible. |
visible | hidden | collapse | inherit |
| width |
Sets the width of an element. |
auto | length | percentage | inherit |
| z-index |
Specifies the stack order of an element. |
auto | number | inherit |