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 alternate.
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 the animation is not playing (before the start, after the end, 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 remain 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 Define 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 Define 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 properties of the following attributes:
border-block-color Set the color of the beginning and ending borders in the block direction.
border-block-end

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

The shorthand properties of the following attributes:
border-block-start-color Set the color of the beginning border in the block direction.
border-block-start-style Set the style of the beginning border in the block direction.
border-block-start-width Set the width of the beginning border in the block direction.
border-block-style Set the style of the beginning and ending borders in the block direction.
border-block-width Set the width of the beginning and ending 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 the table border to collapse 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.
border-end-start-radius Sets the corner radius between the end of the block and the start of the inline.
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 properties of 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 properties of 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 properties of 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 edge of the element.
border-start-start-radius Set the corner radius between the block start and inline start edge of the element.
border-style Set the style of all four borders.
border-top Abbreviated property 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 corner radius at the top left corner.
border-top-right-radius Define the border corner radius at 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 symbol, or for inline elements at the line break symbol.
box-reflect Used to create reflection effects for elements.
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 the input, textarea, or any editable element.
@charset Specify the character encoding used in the style sheet.
clear Specify which side of the element does not allow floating elements
clip Clip the absolutely positioned elements.
clip-path Clip the element into a basic shape or SVG source.
color Set the text color.
color-scheme Indicate which operating system color scheme should be used to render the element.
column-count Specify the number of columns an 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 an 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 a 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 Allow 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 to display a certain HTML element.

E

empty-cells Specify whether to display borders and background on blank cells in a table.

F

filter Define the effect before an element is displayed (e.g., blur or color offset).
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 Increment of the specified item relative to the other items.
flex-shrink Reduction of the specified item relative to the other items.
flex-wrap Specify whether the flexible item should wrap.
float Specify whether the 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 (except "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 specific language glyphs 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 glyphs associated with alternate names defined in @font-feature-values.
font-variant-caps Control the use of alternative glyphs for uppercase letters.
font-variant-east-asian Control the use of alternative glyphs for East Asian characters (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 glyphs for numbers, fractions, and ordinal indicators.
font-variant-position Control the use of alternative glyphs for smaller text sizes, which are positioned above or below the baseline relative to the font's base line.
font-weight Specify the weight of the font.

G

grid Abbreviated properties of the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow properties.
grid-area Can specify the name of the grid item, or it can be the abbreviated properties of the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
grid-auto-columns Specify the default column size.
grid-auto-flow Specify how to insert automatically placed items in the grid.
grid-auto-rows Specify the default row size.
grid-column Abbreviated properties of the grid-column-start and grid-column-end properties.
grid-column-end Specify how to end the grid item.
grid-column-gap Specify the size of the row gap.
grid-column-start Specify where the grid item starts.
grid-gap Abbreviated properties of the grid-row-gap and grid-column-gap.
grid-row Abbreviated properties of the grid-row-start and grid-row-end properties.
grid-row-end Specify where the grid item ends.
grid-row-gap Specify the size of the row gap.
grid-row-start Specify where the grid item starts.
grid-template Abbreviated properties of the grid-template-rows, grid-template-columns, and grid-areas properties.
grid-template-areas Specify how to display columns and rows using named grid items.
grid-template-columns Specify the size of the columns and the number of columns in the grid layout.
grid-template-rows Specify the size of the 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 to split words to improve the layout of the paragraph.
hyphenate-character Set the characters used for hyphenation before line breaks.

I

image-rendering Specify the algorithm type used for image scaling.
@import Allow you to import a stylesheet into another stylesheet.
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 its parent.
inset-block Specify the distance between the element and its parent in the block direction.
inset-block-end Specify the distance between the element and its parent in the block direction at the end.
inset-block-start Specify the distance between the element and its parent in the block direction at the start.
inset-inline Specify the distance between the element and its parent in the inline direction.
inset-inline-end Specify the distance between the element and its parent in the inline direction at the end.
inset-inline-start Specify the distance between the element and its parent in the inline direction at the start.
isolation Define whether an element must create new stacking content.

J

justify-content Define the alignment of items within the flex container when the items do not use all 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 CSS cascade layers evaluate styles.
left Define the left position of the positioned element.
letter-spacing Increase or decrease the spacing between characters in the text.
line-break How to break lines/whether to break lines.
line-height Set the line height.
list-style Set all list properties in a single 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 outer margin properties in a single declaration.
margin-block Specify the outer margin in the block direction.
margin-block-end Specify the outer margin at the end of the block direction.
margin-block-start Specify the outer margin at the beginning of the block direction.
margin-bottom Set the bottom outer margin of the element.
margin-inline Specify the outer margin in 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 properties of 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 processed 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 processed 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 Specify how the element content should blend with the background of its direct parent.

N

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

O

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

The shorthand properties of the following attributes:
offset-anchor Specifies the point on the element that is fixed to the animation path.
offset-distance Specifies the position of the animated element on the path.
offset-path Specifies the path along which the element animates.
offset-position Specifies the initial position of the element along the path.
offset-rotate Specifies the rotation of the element along the path during 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 happens if the content overflows the element's box.
overflow-anchor Specifies whether content in the visible area should be pushed down when new content is loaded into a scrollable container.
overflow-wrap Specifies whether the browser can break lines at long words when they 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 within 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 the element has a scroll chain or an overflow effect in both the x and y directions.
overscroll-behavior-block Specifies whether the element has a scroll chain or an overflow effect in the block direction.
overscroll-behavior-inline Specifies whether the element has a scroll chain or an overflow effect in the inline direction.
overscroll-behavior-x Specifies whether the element has a scroll chain or an overflow effect in the x-direction.
overscroll-behavior-y Specifies whether the element has a scroll chain or an overflow 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 printed 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 watches the 3D positioned element.
place-content Specify the values of the align-content and justify-content properties for the flexbox and grid layouts.
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 resize the element.
right Define the left position of the positioned element.
rotate Specify the rotation of the element.
row-gap Specify the spacing between rows of the grid.

S

scale Specify the size of an element by zooming in or out.
@scope Allows you to select elements within 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 Specify the margin between the吸附position and the container.
scroll-margin-block Specify the margin between the吸附position in the block direction and the container.
scroll-margin-block-end Specify the margin between the吸附position in the block direction and the end of the container.
scroll-margin-block-start Specify the margin between the吸附position in the block direction and the start of the container.
scroll-margin-bottom Specify the margin between the bottom吸附position and the container.
scroll-margin-inline Specify the margin between the吸附position in the inline direction and the container.
scroll-margin-inline-end Specify the margin between the吸附position in the inline direction and the end of the container.
scroll-margin-inline-start Specify the margin between the吸附position in the inline direction and the start of the container.
scroll-margin-left Specify the margin between the left吸附position and the container.
scroll-margin-right Specify the margin between the right吸附position and the container.
scroll-margin-top Specify 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 container to the吸附position of the child element in the block direction.
scroll-padding-block-start The distance from the start of the container to the吸附position of the child element in the block direction.
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 container to the吸附position of the child element in the inline direction.
scroll-padding-inline-start The distance from the start of the container to the吸附position of the child element in the inline direction.
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 touch screen.
scroll-snap-type Specifies the snap behavior during scrolling.
scrollbar-color Specifies the color of the element's scrollbar.
shape-outside Defines the surrounding shape of inline content.
@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.
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 forced line breaks 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 properties of 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 Abbreviated 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 whitespace within an 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 a page break occurs within the element.
width Sets the width of the element.
word-break Specifies how to wrap a word when it reaches the end of a line.
word-spacing Increases or decreases the spacing between words in the text.
word-wrap Allows long words that cannot be wrapped to be carried over to the next line.
writing-mode Specifies whether the text line is horizontally or vertically aligned.

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.