CSS Reference Manual

CSS Property

A

accent-color Specify the emphasis color of the user interface control.
align-content Define the alignment method between rows within the flexible container when items do not use all available space.
align-items Define the alignment method of items within the flexible container.
align-self Define the alignment method of the selected items within the flexible container.
all Reset all properties (except unicode-bidi and direction).
animation Abbreviated property for all animation-* properties.
animation-delay Define the delay before the animation starts.
animation-direction Define whether the animation should play forward, backward, or alternately.
animation-duration Define the time it should take for the animation to complete one cycle.
animation-fill-mode Define the style of the element when it is not playing an animation (before it starts, after it ends, or both).
animation-iteration-count Define the number of times the animation should play.
animation-name Define the name of the @keyframes animation.
animation-play-state Define whether the animation should play or pause.
animation-timing-function Define the speed curve of the animation.
aspect-ratio Specify the preferred aspect ratio of the element.

B

backdrop-filter Define the graphical effect of the element's background area.
backface-visibility Define whether the back of the element should be visible when facing the user.
background Abbreviated property for all background-* properties.
background-attachment Set whether the background image should scroll with the rest of the page or be fixed.
background-blend-mode Define the blending mode for each background layer (color/image).
background-clip Define the distance that the background (color or image) should extend within the element.
background-color Define the background color of the element.
background-image Define one or more background images of the element.
background-origin Define the initial position of the background image.
background-position Specify the position of the background image.
background-position-x Specify the position of the background image on the x-axis.
pr_background-position-y Specify the position of the background image on the y-axis.
background-repeat Set whether and how the background image is repeated.
background-size Specify the size of the background image.
block-size Specify the size of the element in the block direction.
border Abbreviated properties of border-width, border-style, and border-color.
border-block

The shorthand property for the following attributes:
border-block-color Set the color of the start and end borders in the block direction.
border-block-end

The shorthand property for the following attributes:
border-block-end-color Set the color of the end border in the block direction.
border-block-end-style Set the style of the end border in the block direction.
border-block-end-width Set the width of the end border in the block direction.
border-block-start

The shorthand property for the following attributes:
border-block-start-color Set the color of the start border in the block direction.
border-block-start-style Set the style of the start border in the block direction.
border-block-start-width Set the width of the start border in the block direction.
border-block-style Set the style of the start and end borders in the block direction.
border-block-width Set the width of the start and end borders in the block direction.
border-bottom Abbreviated properties of border-bottom-width, border-bottom-style, and border-bottom-color.
border-bottom-color Set the color of the bottom border.
border-bottom-left-radius Define the border corner radius at the bottom left.
border-bottom-right-radius Define the border corner radius at the bottom right.
border-bottom-style Set the style of the bottom border.
border-bottom-width Set the width of the bottom border.
border-collapse Set whether the table border is collapsed into a single border or separated.
border-color Sets the color for all four borders.
border-end-end-radius Sets the corner radius between the end of the block and the end of the inline for the element.
border-end-start-radius Sets the corner radius between the end of the block and the start of the inline for the element.
border-image Abbreviated properties for border-image-* properties.
border-image-outset Specifies the amount by which the border image area extends beyond the border.
border-image-repeat Specifies whether the border image should be repeated, rounded, or stretched.
border-image-slice Specifies how the border image is clipped.
border-image-source Specifies the path of the image used as the border.
border-image-width Specifies the width of the border image.
border-inline

The shorthand property for the following attributes:
border-inline-color Sets the color of the borders at the start and end of the inline direction.
border-inline-end

The shorthand property for the following attributes:
border-inline-end-color Sets the color of the border at the end of the inline direction.
border-inline-end-style Sets the style of the border at the end of the inline direction.
border-inline-end-width Sets the width of the border at the end of the inline direction.
border-inline-start

The shorthand property for the following attributes:
border-inline-start-color Sets the color of the border at the start of the inline direction.
border-inline-start-style Sets the style of the border at the start of the inline direction.
border-inline-start-width Sets the width of the border at the start of the inline direction.
border-inline-style Sets the style of the borders at the start and end of the inline direction.
border-inline-width Sets the width of the borders at the start and end of the inline direction.
border-left Abbreviated properties for all border-left-* properties.
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 Abbreviated properties for the four border-*-radius properties.
border-right Abbreviated property for all border-right-* properties.
border-right-color Set the color of the right border.
border-right-style Set the style of the right border.
border-right-width Set the width of the right border.
border-spacing Set the distance between adjacent cell borders.
border-start-end-radius Set the corner radius between the block start and inline end edges of the element.
border-start-start-radius Set the corner radius between the block start and inline start edges of the element.
border-style Set the style of all four borders.
border-top Abbreviated attribute of border-top-width, border-top-style, and border-top-color.
border-top-color Set the color of the top border.
border-top-left-radius Define the border radius of the top left corner.
border-top-right-radius Define the border radius of the top right corner.
border-top-style Set the style of the top border.
border-top-width Set the width of the top border.
border-width Set the width of all four borders.
bottom Set the position of the element relative to the bottom of its parent element.
box-decoration-break Set the background and border behavior of the element at the pagination mark, or for inline elements at the line break.
box-reflect Used to create a reflection effect for the element.
box-shadow Attach one or more shadows to the element.
box-sizing Define the calculation method of the width and height of the element: whether they should include padding and border.
break-after Specify whether page-, column-, or region-break should appear after the specified element.
break-before Specify whether page-, column-, or region-break should appear before the specified element.
break-inside Specify whether page-, column-, or region-break should appear inside the specified element.

C

caption-side Specify the placement method of the table title.
caret-color Specify the color of the cursor in input, textarea, or any editable elements.
@charset Specify the character encoding used in the style sheet.
clear Specify which side of the element does not allow floating elements.
clip Clip absolute positioning elements.
clip-path Clip the element into a basic shape or SVG source.
color Set the color of the text.
color-scheme Indicate which operating system color scheme should be used to render the element.
column-count Specify the number of columns the element should be divided into.
column-fill Specify how columns are filled (whether balanced).
column-gap Specify the column gap.
column-rule Abbreviated properties for all column-rule-* properties.
column-rule-color Specify the color of the rule between columns.
column-rule-style Specify the rule style between columns.
column-rule-width Specify the rule width between columns.
column-span Specify how many columns the element should span.
column-width Specify the column width.
columns Abbreviated properties for column-width and column-count.
@container Define the style of elements within the container based on the size or style of the container.
content Used with :before and :after pseudo-elements to insert generated content.
counter-increment Increase or decrease the value of one or more CSS counters.
counter-reset Create or reset one or more CSS counters.
counter-set Create or set one or more CSS counters.
@counter-style Allows you to define custom counter styles.
cursor Specify the mouse cursor to be displayed when pointing to the element.

D

direction Specify the text direction/script direction.
display Specify how an HTML element is displayed.

E

empty-cells Specify whether to display borders and backgrounds on blank cells in the table.

F

filter Define the effect before the element is displayed (such as blur or color shift).
flex Abbreviated properties for flex-grow, flex-shrink, and flex-basis.
flex-basis Specify the initial length of the flexible items.
flex-direction Specify the direction of the flexible items.
flex-flow Abbreviated properties for flex-direction and flex-wrap.
flex-grow The increment of the specified item compared to the rest of the items.
flex-shrink The reduction of the specified item compared to the rest of the items.
flex-wrap Specify whether the flexible item should wrap.
float Specify whether the box (box) should be floated.
font Abbreviated properties of font-style, font-variant, font-weight, font-size/line-height, and font-family.
@font-face Specify the rules for downloading and using other fonts (other than 'web-safe' fonts) on the website.
font-family Specify the font family (font family) of the text.
font-feature-settings Allow control of advanced printing features in OpenType fonts.
@font-feature-values Allow creators to use generic names in font-variant-alternate to activate features in OpenType in different ways.
font-kerning Control the use of kerning information (letter spacing).
font-language-override Control the use of character shapes for specific languages in the font.
@font-palette-values Allow you to customize the default values of the font palette.
font-size Specify the font size of the text.
font-size-adjust Maintain readability when font fallback occurs.
font-stretch Select a normal, condensed, or expanded font from the font family.
font-style Specify the font style of the text.
font-synthesis Control which missing fonts (bold or italic) can be synthesized by the browser.
font-variant Specify whether text should be displayed in small-caps.
font-variant-alternates Control the use of alternative character shapes associated with alternate names defined in @font-feature-values.
font-variant-caps Control the use of alternative character shapes for uppercase letters.
font-variant-east-asian Control the use of alternative character shapes for East Asian scripts (such as Chinese and Japanese).
font-variant-ligatures Control which ligatures and contextual forms are used in the text content of the element.
font-variant-numeric Control the use of alternative character shapes for numbers, fractions, and ordinal indicators.
font-variant-position Control the use of alternative character shapes for smaller text, which are positioned above or below the baseline relative to the font's baseline.
font-weight Specify the weight of the font.

G

grid Abbreviated properties of grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow attributes.
grid-area Can specify the name of the grid item, or it can be an abbreviated property of grid-row-start, grid-column-start, grid-row-end, and grid-column-end attributes.
grid-auto-columns Specify the default column size.
grid-auto-flow Specify how to insert automatically positioned items in the grid.
grid-auto-rows Specify the default row size.
grid-column Abbreviated properties of grid-column-start and grid-column-end attributes.
grid-column-end Specify how to end the grid item.
grid-column-gap Specify the size of the column gap.
grid-column-start Specify where the grid item starts.
grid-gap Abbreviated properties of grid-row-gap and grid-column-gap.
grid-row Abbreviated properties of grid-row-start and grid-row-end attributes.
grid-row-end Specify where the grid item ends.
grid-row-gap Specify the size of the column gap.
grid-row-start Specify where the grid item starts.
grid-template Abbreviated properties of grid-template-rows, grid-template-columns, and grid-areas properties.
grid-template-areas Specify how named grid items are displayed for rows and columns.
grid-template-columns Specify the size of columns and the number of columns in the grid layout.
grid-template-rows Specify the size of rows in the grid layout.

H

hanging-punctuation Specify whether punctuation can be placed outside the line box.
height Set the height of the element.
hyphens Set how words are split to improve the layout of the paragraph.
hyphenate-character Set the character used for hyphenation before line breaks.

I

image-rendering Specify the algorithm type used for image scaling.
@import Allow you to import a style sheet into another style sheet.
initial-letter Specify the size of the initial letter, and optionally specify the number of lines the initial letter should sink.
inline-size Specify the size of the element in the inline direction.
inset Specify the distance between the element and the parent element.
inset-block Specify the distance from the element to the parent element in the block direction.
inset-block-end Specify the distance from the end of the element to the parent element in the block direction.
inset-block-start Specify the distance from the start of the element to the parent element in the block direction.
inset-inline Specify the distance from the element to the parent element in the inline direction.
inset-inline-end Specify the distance from the end of the element to the parent element in the inline direction.
inset-inline-start Specify the distance from the start of the element to the parent element in the inline direction.
isolation Define whether the element must create new stacking content.

J

justify-content Define the alignment of the item within the flex container when the item does not use all the available space.
justify-items Define the alignment of the grid item in the inline direction. Set on the grid container.
justify-self Define the alignment of the grid item in the inline direction. Set on the grid item.

K

@keyframes Define the animation code.

L

@layer Control the order in which the CSS cascade evaluates styles.
left Define the left position of the positioned element.
letter-spacing Increase or decrease the character spacing in the text.
line-break How to break lines or whether to break lines.
line-height Set the line height.
list-style Set all the list properties in one declaration.
list-style-image Specify an image as the list item marker.
list-style-position Define the position of the list item marker.
list-style-type Define the type of list item marker.

M

margin Set all the margin properties in one declaration.
margin-block Specify the margin in the block direction.
margin-block-end Specify the margin at the end of the block direction.
margin-block-start Specify the margin at the beginning of the block direction.
margin-bottom Set the bottom outside margin of the element.
margin-inline Specify the margin at the end of the inline direction.
margin-inline-end Specify the outer margin at the end of the inline direction.
margin-inline-start Specify the outer margin at the start of the inline direction.
margin-left Set the left outer margin of the element.
margin-right Set the right outer margin of the element.
margin-top Set the top outer margin of the element.
marker Point to the marker to be drawn at all vertices (first, middle, and last) of the element path.
marker-end Point to the marker to be drawn at the last vertex of the element path.
marker-mid Point to the marker to be drawn at all intermediate vertices of the element path.
marker-start Point to the marker to be drawn at the first vertex of the element path.
mask

The shorthand property for the following attributes:
mask-clip Specify the area affected by the mask image.
mask-composite Specify the composite operation used on the current mask layer and the mask layer below it.
mask-image Specify the image used as the element mask layer.
mask-mode Specify whether the mask layer image is treated as a luminance mask or an alpha mask.
mask-origin Specify the original position of the mask layer image (mask position area).
mask-position Set the starting position of the mask layer image (relative to the mask position area).
mask-repeat Specify the repetition method of the mask layer image.
mask-size Specify the size of the mask layer image.
mask-type Specify SVG Whether the element is treated as a luminance mask or an alpha mask.
max-height Set the maximum height of the element.
max-width Set the maximum width of the element.
@media Set style rules for different media types, devices, and sizes.
Set the maximum size of the element in the block direction. Set the maximum size of the element in the block direction.
max-inline-size Set the maximum size of the element in the inline direction.
min-block-size Set the minimum size of the element in the block direction.
min-inline-size Set the minimum size of the element in the inline direction.
min-height Set the minimum height of the element.
min-width Set the minimum width of the element.
mix-blend-mode Define how the content of the element should blend with its direct parent's background.

N

@namespace Define the XML namespace used in the style sheet.

O

object-fit The content of the replaced element should be suitable for the box formed by the height and width it uses.
object-position Specifies the alignment method of the replacement element within its box.
offset

The shorthand property for the following attributes:
offset-anchor Specifies the point fixed on the animation path on the element.
offset-distance Specifies the position of the animated element on the path.
offset-path Specifies the path along which the element moves during the animation.
offset-position Specifies the initial position of the element along the path.
offset-rotate Specifies the rotation of the element along the path during the animation.
opacity Sets the opacity level of the element.
order Sets the order of the flexible item relative to the other items.
orphans Sets the minimum number of lines that must be retained at the bottom of the page or column.
orphans Sets the minimum number of lines that must be retained at the bottom of the page when pagination occurs within the element.
outline Abbreviated properties of outline-width, outline-style, and outline-color attributes.
outline-color Sets the color of the outline.
outline-offset Offsets the outline and draws it outside the border edge.
outline-style Sets the style of the outline.
outline-width Sets the width of the outline.
overflow Specifies what will happen if the content overflows the element's box.
overflow-anchor Specifies whether the content in the visible area should be pushed down when new content is loaded in a scrollable container.
overflow-wrap Specifies whether the browser can break lines for long words that overflow the container.
overflow-wrap Specifies whether the browser may break lines within words to prevent overflow (when a string is too long to fit its containing box).
overflow-x Specifies whether the left and right edges of the content should be clipped if they overflow the element's content area.
overflow-y Specifies whether the top and bottom edges of the content should be clipped if they overflow the element's content area.
overscroll-behavior Specifies whether there is a scroll chain or an overshoot effect in both the x and y directions.
overscroll-behavior-block Specifies whether there is a scroll chain or an overshoot effect in the block direction.
overscroll-behavior-inline Specifies whether there is a scroll chain or an overshoot effect in the inline direction.
overscroll-behavior-x Specifies whether there is a scroll chain or an overshoot effect in the x direction.
overscroll-behavior-y Specifies whether there is a scroll chain or an overshoot effect in the y direction.

P

padding Abbreviated properties of all padding-* attributes.
padding-block Specify the inner padding in the block direction.
padding-block-end Specify the inner padding at the end of the block direction.
padding-block-start Specify the inner padding at the start of the block direction.
padding-bottom Set the bottom inner padding of the element.
padding-inline Specify the inner padding in the inline direction.
padding-inline-end Specify the inner padding at the end of the inline direction.
padding-inline-start Specify the inner padding at the start of the inline direction.
padding-left Set the left inner padding of the element.
padding-right Set the right inner padding of the element.
padding-top Set the top inner padding of the element.
@page Customize the size, orientation, and margins of the print page.
page-break-after Set the pagination (page-break) behavior after the element.
page-break-before Set the pagination (page-break) behavior before the element.
page-break-inside Set the pagination (page-break) behavior within the element.
paint-order Set the drawing order of SVG elements or text.
perspective Provide perspective for 3D positioned elements.
perspective-origin Define the position where the user views the 3D positioned element.
place-content Specify the values of the align-content and justify-content properties for flexbox and grid layout.
place-items Specify the values of the align-items and justify-items properties for the grid layout.
place-self Specify the values of the align-self and justify-self properties for the grid layout.
pointer-events Define whether the element responds to pointer events.
position Specify the type of positioning method used for the element (static, relative, absolute, or fixed).
@property Define custom CSS properties directly in the style sheet without running any JavaScript.

Q

quotes Set the type of quotes.

R

resize Define whether and how the user can adjust the size of the element.
right Define the left position of the positioned element.
rotate Specify the rotation of the element.
row-gap Specify the gap between rows of the grid.

S

scale Specifies the size of an element by zooming in or out.
@scope Allows you to select elements in a specific DOM subtree and precisely position them without writing overly specific selectors.
scroll-behavior Specifies whether the scrollable box scrolls smoothly instead of jumping directly.
scroll-margin Specifies the margin between the吸附position and the container.
scroll-margin-block Specifies the margin between the吸附position in the block direction and the container.
scroll-margin-block-end Specifies the margin between the吸附position in the block direction and the end of the container.
scroll-margin-block-start Specifies the margin between the吸附position in the block direction and the start of the container.
scroll-margin-bottom Specifies the margin between the bottom吸附position and the container.
scroll-margin-inline Specifies the margin between the吸附position in the inline direction and the container.
scroll-margin-inline-end Specifies the margin between the吸附position in the inline direction and the end of the container.
scroll-margin-inline-start Specifies the margin between the吸附position in the inline direction and the start of the container.
scroll-margin-left Specifies the margin between the left吸附position and the container.
scroll-margin-right Specifies the margin between the right吸附position and the container.
scroll-margin-top Specifies the margin between the top吸附position and the container.
scroll-padding The distance from the container to the吸附position of the child element.
scroll-padding-block The distance from the container to the吸附position of the child element in the block direction.
scroll-padding-block-end The distance from the end of the block direction container to the吸附position of the child element.
scroll-padding-block-start The distance from the start of the block direction container to the吸附position of the child element.
scroll-padding-bottom The distance from the bottom of the container to the吸附position of the child element.
scroll-padding-inline The distance from the container to the吸附position of the child element in the inline direction.
scroll-padding-inline-end The distance from the end of the inline direction container to the吸附position of the child element.
scroll-padding-inline-start The distance from the start of the inline direction container to the吸附position of the child element.
scroll-padding-left Specifies the distance from the left of the container to the snap position of the child element.
scroll-padding-right Specifies the distance from the right of the container to the snap position of the child element.
scroll-padding-top Specifies the distance from the top of the container to the snap position of the child element.
scroll-snap-align Specifies the position of the element when the user stops scrolling.
scroll-snap-stop Specifies the scrolling behavior after a quick swipe on a trackpad or touchscreen.
scroll-snap-type Specifies the snap behavior during scrolling.
scrollbar-color Specifies the color of the element's scrollbar.
shape-outside Defines the shape of the inline content's wrapping.
@starting-style Defines the starting style of an element before the first style update.
@supports Used to test whether the browser supports a certain CSS feature.

T

tab-size Specifies the width of the tab character.
table-layout Defines the algorithm used for laying out cells, rows, and columns.
text-align Specifies the horizontal alignment of the text.
text-align-last Describes how to align the last line of a block or row before a forced line break when text-align is set to "justify".
text-combine-upright Combines multiple characters into the space of a single character.
text-decoration Specifies the text decoration.
text-decoration-color Specifies the color of the text decoration (text-decoration).
text-decoration-line Specifies the line type within the text decoration (text-decoration).
text-decoration-style Specifies the line style within the text decoration (text-decoration).
text-decoration-thickness Specifies the thickness of the decorative line.
text-emphasis

The shorthand property for the following attributes:
text-emphasis-color Specifies the color of emphasis marks.
text-emphasis-position Specifies the position of emphasis marks.
text-emphasis-style Specifies the style of emphasis marks.
text-indent Specifies the first-line indentation within a text block (text-block).
text-justify Specifies the alignment method used when text-align is set to "justify".
text-orientation Defines the direction of characters in a line.
text-overflow Specifies what should happen when text overflows the containing element.
text-shadow Adds text shadow.
text-transform Controls the capitalization of the text.
text-underline-offset Specifies the offset distance of the underline text decoration.
text-underline-position Specifies the position of the underline text decoration.
top Specifies the top position of the positioned element.
transform Applies 2D or 3D transformations to the element.
transform-origin Allows you to change the position of the transformed element.
transform-style Specifies how nested elements are rendered in 3D space.
transition The shorthand property for all transition-* properties.
transition-delay Specifies when the transition effect should start.
transition-duration Specifies the number of seconds or milliseconds required to complete the transition effect.
transition-property Specifies the name of the CSS property corresponding to the transition effect.
transition-timing-function Specifies the speed curve of the transition effect.
translate Specifies the position of the element.

U

unicode-bidi Used with the direction attribute to set or return whether text should be overwritten to support multiple languages in the same document.
user-select Specifies whether the text of the element can be selected.

V

vertical-align Sets the vertical alignment of the element.
visibility Specifies whether the element is visible.

W

white-space Specifies how to handle white space within the element.
widows Sets the minimum number of lines that must be retained at the top of the page or column.
widows Sets the minimum number of lines that must be retained at the top of the page if pagination occurs within the element.
width Sets the width of the element.
word-break Specifies how to break lines when the word reaches the end of the line.
word-spacing Increases or decreases the spacing between words in the text.
word-wrap Allows long words that cannot be broken to wrap to the next line.
writing-mode Specifies whether the text line is horizontally or vertically laid out.

Z

z-index Sets the stacking order of the positioned element.
zoom The scaling factor of the specified element. The element can be zoomed in and out.