Welcome to the CSS Properties repository! This project contains a comprehensive list of CSS properties with their descriptions and links to learn more about each.
| Category | Property Name | Brief Description | Learn More Link |
|---|---|---|---|
A |
accent-color |
Specifies an accent color for user-interface controls | Learn More |
A |
align-content |
Specifies the alignment between the lines inside a flexible container when the items do not use all available space | Learn More |
A |
align-items |
Specifies the alignment for items inside a flexible container | Learn More |
A |
align-self |
Specifies the alignment for selected items inside a flexible container | Learn More |
A |
all |
Resets all properties (except unicode-bidi and direction) | Learn More |
A |
animation |
A shorthand property for all the animation-* properties | Learn More |
A |
animation-delay |
Specifies a delay for the start of an animation | Learn More |
A |
animation-direction |
Specifies whether an animation should be played forward, backward or in alternate cycles | Learn More |
A |
animation-duration |
Specifies how long an animation should take to complete one cycle | Learn More |
A |
animation-fill-mode |
Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) | Learn More |
A |
animation-iteration-count |
Specifies the number of times an animation should be played | Learn More |
A |
animation-name |
Specifies a name for the @keyframes animation | Learn More |
A |
animation-play-state |
Specifies whether the animation is running or paused | Learn More |
A |
animation-timing-function |
Specifies the speed curve of an animation | Learn More |
A |
aspect-ratio |
Specifies preferred aspect ratio of an element | Learn More |
B |
backdrop-filter |
Defines a graphical effect to the area behind an element | Learn More |
B |
backface-visibility |
Defines whether or not the back face of an element should be visible when facing the user | Learn More |
B |
background |
A shorthand property for all the background-* properties | Learn More |
B |
background-attachment |
Sets whether a background image scrolls with the rest of the page, or is fixed | Learn More |
B |
background-blend-mode |
Specifies the blending mode of each background layer (color/image) | Learn More |
B |
background-clip |
Defines how far the background (color or image) should extend within an element | Learn More |
B |
background-color |
Specifies the background color of an element | Learn More |
B |
background-image |
Specifies one or more background images for an element | Learn More |
B |
background-origin |
Specifies the origin position of a background image | Learn More |
B |
background-position |
Specifies the position of a background image | Learn More |
B |
background-position-x |
Specifies the position of a background image on x-axis | Learn More |
B |
background-position-y |
Specifies the position of a background image on y-axis | Learn More |
B |
background-repeat |
Sets if/how a background image will be repeated | Learn More |
B |
background-size |
Specifies the size of the background images | Learn More |
B |
block-size |
Specifies the size of an element in block direction | Learn More |
B |
border |
A shorthand property for border-width, border-style and border-color | Learn More |
B |
border-block |
A shorthand property for border-block-width, border-block-style and border-block-color | Learn More |
B |
border-block-color |
Sets the color of the borders at start and end in the block direction | Learn More |
B |
border-block-end |
A shorthand property for border-block-end-width, border-block-end-style and border-block-end-color | Learn More |
B |
border-block-end-color |
Sets the color of the border at the end in the block direction | Learn More |
B |
border-block-end-style |
Sets the style of the border at the end in the block direction | Learn More |
B |
border-block-end-width |
Sets the width of the border at the end in the block direction | Learn More |
B |
border-block-start |
A shorthand property for border-block-start-width, border-block-start-style and border-block-start-color | Learn More |
B |
border-block-start-color |
Sets the color of the border at the start in the block direction | Learn More |
B |
border-block-start-style |
Sets the style of the border at the start in the block direction | Learn More |
B |
border-block-start-width |
Sets the width of the border at the start in the block direction | Learn More |
B |
border-block-style |
Sets the style of the borders at start and end in the block direction | Learn More |
B |
border-block-width |
Sets the width of the borders at start and end in the block direction | Learn More |
B |
border-bottom |
A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color | Learn More |
B |
border-bottom-color |
Sets the color of the bottom border | Learn More |
B |
border-bottom-left-radius |
Defines the radius of the border of the bottom-left corner | Learn More |
B |
border-bottom-right-radius |
Defines the radius of the border of the bottom-right corner | Learn More |
B |
border-bottom-style |
Sets the style of the bottom border | Learn More |
B |
border-bottom-width |
Sets the width of the bottom border | Learn More |
B |
border-collapse |
Sets whether table borders should collapse into a single border or be separated | Learn More |
B |
border-color |
Sets the color of the four borders | Learn More |
B |
border-end-end-radius |
Sets the radius of the corner between the block-end and the inline-end sides of the element | Learn More |
B |
border-end-start-radius |
Sets the radius of the corner between the block-end and the inline-start sides of the element | Learn More |
B |
border-image |
A shorthand property for all the border-image-* properties | Learn More |
B |
border-image-outset |
Specifies the amount by which the border image area extends beyond the border box | Learn More |
B |
border-image-repeat |
Specifies whether the border image should be repeated, rounded or stretched | Learn More |
B |
border-image-slice |
Specifies how to slice the border image | Learn More |
B |
border-image-source |
Specifies the path to the image to be used as a border | Learn More |
B |
border-image-width |
Specifies the width of the border image | Learn More |
B |
border-inline |
A shorthand property for border-inline-width, border-inline-style and border-inline-color | Learn More |
B |
border-inline-color |
Sets the color of the borders at start and end in the inline direction | Learn More |
B |
border-inline-end |
A shorthand property for border-inline-end-width, border-inline-end-style and border-inline-end-color | Learn More |
B |
border-inline-end-color |
Sets the color of the border at the end in the inline direction | Learn More |
B |
border-inline-end-style |
Sets the style of the border at the end in the inline direction | Learn More |
B |
border-inline-end-width |
Sets the width of the border at the end in the inline direction | Learn More |
B |
border-inline-start |
A shorthand property for border-inline-start-width, border-inline-start-style and border-inline-start-color | Learn More |
B |
border-inline-start-color |
Sets the color of the border at the start in the inline direction | Learn More |
B |
border-inline-start-style |
Sets the style of the border at the start in the inline direction | Learn More |
B |
border-inline-start-width |
Sets the width of the border at the start in the inline direction | Learn More |
B |
border-inline-style |
Sets the style of the borders at start and end in the inline direction | Learn More |
B |
border-inline-width |
Sets the width of the borders at start and end in the inline direction | Learn More |
B |
border-left |
A shorthand property for all the border-left-* properties | Learn More |
B |
border-left-color |
Sets the color of the left border | Learn More |
B |
border-left-style |
Sets the style of the left border | Learn More |
B |
border-left-width |
Sets the width of the left border | Learn More |
B |
border-radius |
A shorthand property for the four border-*-radius properties | Learn More |
B |
border-right |
A shorthand property for all the border-right-* properties | Learn More |
B |
border-right-color |
Sets the color of the right border | Learn More |
B |
border-right-style |
Sets the style of the right border | Learn More |
B |
border-right-width |
Sets the width of the right border | Learn More |
B |
border-spacing |
Sets the distance between the borders of adjacent cells | Learn More |
B |
border-start-end-radius |
Sets the radius of the corner between the block-start and the inline-end sides of the element | Learn More |
B |
border-start-start-radius |
Sets the radius of the corner between the block-start and the inline-start sides of the element | Learn More |
B |
border-style |
Sets the style of the four borders | Learn More |
B |
border-top |
A shorthand property for border-top-width, border-top-style and border-top-color | Learn More |
B |
border-top-color |
Sets the color of the top border | Learn More |
B |
border-top-left-radius |
Defines the radius of the border of the top-left corner | Learn More |
B |
border-top-right-radius |
Defines the radius of the border of the top-right corner | Learn More |
B |
border-top-style |
Sets the style of the top border | Learn More |
B |
border-top-width |
Sets the width of the top border | Learn More |
B |
border-width |
Sets the width of the four borders | Learn More |
B |
bottom |
Sets the elements position, from the bottom of its parent element | Learn More |
B |
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. | Learn More |
B |
box-reflect |
The box-reflect property is used to create a reflection of an element. | Learn More |
B |
box-shadow |
Attaches one or more shadows to an element | Learn More |
B |
box-sizing |
Defines how the width and height of an element are calculated: should they include padding and borders, or not | Learn More |
B |
break-after |
Specifies whether or not a page-, column-, or region-break should occur after the specified element | Learn More |
B |
break-before |
Specifies whether or not a page-, column-, or region-break should occur before the specified element | Learn More |
B |
break-inside |
Specifies whether or not a page-, column-, or region-break should occur inside the specified element | Learn More |
C |
caption-side |
Specifies the placement of a table caption | Learn More |
C |
caret-color |
Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable | Learn More |
C |
clear |
Specifies what should happen with the element that is next to a floating element | Learn More |
C |
clip |
Deprecated in favor of clip-path. Clips an absolutely positioned element | Learn More |
C |
clip-path |
Clips an element to a basic shape or to an SVG source | Learn More |
C |
color |
Sets the color of text | Learn More |
C |
color-scheme |
Indicates which operating system color scheme an element should render with | Learn More |
C |
column-count |
Specifies the number of columns an element should be divided into | Learn More |
C |
column-fill |
Specifies how to fill columns, balanced or not | Learn More |
C |
column-gap |
Specifies the gap between the columns | Learn More |
C |
column-rule |
A shorthand property for all the column-rule-* properties | Learn More |
C |
column-rule-color |
Specifies the color of the rule between columns | Learn More |
C |
column-rule-style |
Specifies the style of the rule between columns | Learn More |
C |
column-rule-width |
Specifies the width of the rule between columns | Learn More |
C |
column-span |
Specifies how many columns an element should span across | Learn More |
C |
column-width |
Specifies the column width | Learn More |
C |
columns |
A shorthand property for column-width and column-count | Learn More |
C |
content |
Used with the :before and :after pseudo-elements, to insert generated content | Learn More |
C |
counter-increment |
Increases or decreases the value of one or more CSS counters | Learn More |
C |
counter-reset |
Creates or resets one or more CSS counters | Learn More |
C |
counter-set |
Creates or sets one or more CSS counters | Learn More |
C |
cursor |
Specifies the mouse cursor to be displayed when pointing over an element | Learn More |
C |
@charset |
Specifies the character encoding used in the style sheet | Learn More |
C |
@container |
Define styles for elements in container, depending on the container's size or style | Learn More |
C |
@counter-style |
Lets you define your own counter styles | Learn More |
F |
@font-face |
Specifies a custom font to use to display text | Learn More |
F |
@font-palette-values |
Allows you to customize the default values of a font-palette | Learn More |
I |
@import |
Allows you to import a style sheet into another style sheet | Learn More |
K |
@keyframes |
Controls the steps in an animation by defining styles for points along the animation sequence | Learn More |
L |
@layer |
Controls how the CSS cascade layers evaluates the order of styles | Learn More |
M |
@media |
Sets the style rules for different media types/devices/sizes | Learn More |
N |
@namespace |
Defines an XML namespace to be used in the style sheet | Learn More |
P |
@page |
Customizes the dimension, orientation, and margins of printed pages | Learn More |
P |
@property |
Defines custom CSS properties directly in the stylesheet without having to run any JavaScript | Learn More |
S |
@scope |
Allows you to select elements in specific DOM subtrees and target elements precisely without writing overly-specific selectors | Learn More |
S |
@starting-style |
Defines an element's starting styles before the element gets its first style update | Learn More |
S |
@supports |
Used to test whether a browser supports a CSS feature | Learn More |
D |
direction |
Specifies the text direction/writing direction | Learn More |
D |
display |
Specifies how a certain HTML element should be displayed | Learn More |
E |
empty-cells |
Specifies whether or not to display borders and background on empty cells in a table | Learn More |
F |
filter |
Defines effects (e.g. blurring or color shifting) on an element before the element is displayed | Learn More |
F |
flex |
A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties | Learn More |
F |
flex-basis |
Specifies the initial length of a flexible item | Learn More |
F |
flex-direction |
Specifies the direction of the flexible items | Learn More |
F |
flex-flow |
A shorthand property for the flex-direction and the flex-wrap properties | Learn More |
F |
flex-grow |
Specifies how much the item will grow relative to the rest | Learn More |
F |
flex-shrink |
Specifies how the item will shrink relative to the rest | Learn More |
F |
flex-wrap |
Specifies whether the flexible items should wrap or not | Learn More |
F |
float |
Specifies whether an element should float to the left, right, or not at all | Learn More |
F |
font |
A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties | Learn More |
F |
font-family |
Specifies the font family for text | Learn More |
F |
font-feature-settings |
Allows control over advanced typographic features in OpenType fonts | Learn More |
F |
font-kerning |
Controls the usage of the kerning information (how letters are spaced) | Learn More |
F |
font-size |
Specifies the font size of text | Learn More |
F |
font-size-adjust |
Preserves the readability and size of text when fallback font occurs | Learn More |
F |
font-stretch |
Selects a normal, condensed, or expanded face from a font family | Learn More |
F |
font-style |
Specifies the font style for text | Learn More |
F |
font-variant |
Specifies whether or not a text should be displayed in a small-caps font | Learn More |
F |
font-variant-caps |
Controls the usage of alternate glyphs for capital letters | Learn More |
F |
font-weight |
Specifies the weight of a font | Learn More |
G |
gap |
A shorthand property for the row-gap and the column-gap properties | Learn More |
G |
grid |
A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties | Learn More |
G |
grid-area |
Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties | Learn More |
G |
grid-auto-columns |
Specifies a default column size | Learn More |
G |
grid-auto-flow |
Specifies how auto-placed items are inserted in the grid | Learn More |
G |
grid-auto-rows |
Specifies a default row size | Learn More |
G |
grid-column |
A shorthand property for the grid-column-start and the grid-column-end properties | Learn More |
G |
grid-column-end |
Specifies where to end the grid item | Learn More |
G |
grid-column-start |
Specifies where to start the grid item | Learn More |
G |
grid-row |
A shorthand property for the grid-row-start and the grid-row-end properties | Learn More |
G |
grid-row-end |
Specifies where to end the grid item | Learn More |
G |
grid-row-start |
Specifies where to start the grid item | Learn More |
G |
grid-template |
A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties | Learn More |
G |
grid-template-areas |
Specifies how to display columns and rows, using named grid items | Learn More |
G |
grid-template-columns |
Specifies the size of the columns, and how many columns in a grid layout | Learn More |
G |
grid-template-rows |
Specifies the size of the rows in a grid layout | Learn More |
H |
hanging-punctuation |
Specifies whether a punctuation character may be placed outside the line box | Learn More |
H |
height |
Sets the height of an element | Learn More |
H |
hyphens |
Sets how to split words to improve the layout of text | Learn More |
H |
hypenate-character |
Sets the character used at the end of line, before a hyphenation break | Learn More |
I |
image-rendering |
Specifies the type of algorithm to use for image scaling | Learn More |
I |
initial-letter |
Specifies the size of the initial-letter and optionally the number of lines the initial letter should sink (down in the text) | Learn More |
I |
inline-size |
Specifies the size of an element in the inline direction | Learn More |
I |
inset |
Specifies the distance between an element and the parent element | Learn More |
I |
inset-block |
Specifies the distance between an element and the parent element in the block direction | Learn More |
I |
inset-block-end |
Specifies the distance between the end of an element and the parent element in the block direction | Learn More |
I |
inset-block-start |
Specifies the distance between the start of an element and the parent element in the block direction | Learn More |
I |
inset-inline |
Specifies the distance between an element and the parent element in the inline direction | Learn More |
I |
inset-inline-end |
Specifies the distance between the end of an element and the parent element in the inline direction | Learn More |
I |
inset-inline-start |
Specifies the distance between the start of an element and the parent element in the inline direction | Learn More |
I |
isolation |
Defines whether an element must create a new stacking content | Learn More |
J |
justify-content |
Specifies the alignment between the items inside a flexible container when the items do not use all available space | Learn More |
J |
justify-items |
Is set on the grid container. Specifies the alignment of grid items in the inline direction | Learn More |
J |
justify-self |
Is set on the grid item. Specifies the alignment of the grid item in the inline direction | Learn More |
L |
left |
Specifies the left position of a positioned element | Learn More |
L |
letter-spacing |
Increases or decreases the space between characters in a text | Learn More |
L |
line-height |
Sets the line height | Learn More |
L |
list-style |
Sets all the properties for a list in one declaration | Learn More |
L |
list-style-image |
Specifies an image as the list-item marker | Learn More |
L |
list-style-position |
Specifies the position of the list-item markers (bullet points) | Learn More |
L |
list-style-type |
Specifies the type of list-item marker | Learn More |
M |
margin |
Sets all the margin properties in one declaration | Learn More |
M |
margin-block |
Specifies the margin in the block direction | Learn More |
M |
margin-block-end |
Specifies the margin at the end in the block direction | Learn More |
M |
margin-block-start |
Specifies the margin at the start in the block direction | Learn More |
M |
margin-bottom |
Sets the bottom margin of an element | Learn More |
M |
margin-inline |
Specifies the margin in the inline direction | Learn More |
M |
margin-inline-end |
Specifies the margin at the end in the inline direction | Learn More |
M |
margin-inline-start |
Specifies the margin at the start in the inline direction | Learn More |
M |
margin-left |
Sets the left margin of an element | Learn More |
M |
margin-right |
Sets the right margin of an element | Learn More |
M |
margin-top |
Sets the top margin of an element | Learn More |
M |
marker |
Points to a marker that will be drawn on all vertices of an element's path (the first, middle, and last) | Learn More |
M |
marker-end |
Points to a marker that will be drawn on the last vertex of an element's path | Learn More |
M |
marker-mid |
Points to a marker that will be drawn on all the middle vertices of an element's path | Learn More |
M |
marker-start |
Points to a marker that will be drawn on the first vertex of an element's path | Learn More |
M |
mask |
A shorthand property for mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size and mask-composite | Learn More |
M |
mask-clip |
Specifies which area is affected by a mask image | Learn More |
M |
mask-composite |
Specifies a compositing operation used on the current mask layer with the mask layers below it | Learn More |
M |
mask-image |
Specifies an image to be used as a mask layer for an element | Learn More |
M |
mask-mode |
Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask | Learn More |
M |
mask-origin |
Specifies the origin position (the mask position area) of a mask layer image | Learn More |
M |
mask-position |
Sets the starting position of a mask layer image (relative to the mask position area) | Learn More |
M |
mask-repeat |
Specifies how the mask layer image is repeated | Learn More |
M |
mask-size |
Specifies the size of a mask layer image | Learn More |
M |
mask-type |
Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask | Learn More |
M |
max-height |
Sets the maximum height of an element | Learn More |
M |
max-width |
Sets the maximum width of an element | Learn More |
M |
max-block-size |
Sets the maximum size of an element in the block direction | Learn More |
M |
max-inline-size |
Sets the maximum size of an element in the inline direction | Learn More |
M |
min-block-size |
Sets the minimum size of an element in the block direction | Learn More |
M |
min-inline-size |
Sets the minimum size of an element in the inline direction | Learn More |
M |
min-height |
Sets the minimum height of an element | Learn More |
M |
min-width |
Sets the minimum width of an element | Learn More |
M |
mix-blend-mode |
Specifies how an element's content should blend with its direct parent background | Learn More |
O |
object-fit |
Specifies how the contents of a replaced element should be fitted to the box established by its used height and width | Learn More |
O |
object-position |
Specifies the alignment of the replaced element inside its box | Learn More |
O |
offset |
A shorthand property for the offset-anchor, offset-distance, offset-path, offset-position, and the offset-rotate properties | Learn More |
O |
offset-anchor |
Specifies a point on an element that is fixed to the path it is animated along | Learn More |
O |
offset-distance |
Specifies the position along a path where an animated element is placed | Learn More |
O |
offset-path |
Specifies the path an element is animated along | Learn More |
O |
offset-position |
Specifies the initial position of an element along a path | Learn More |
O |
offset-rotate |
Specifies rotation of an element as it is animated along a path | Learn More |
O |
opacity |
Sets the opacity level for an element | Learn More |
O |
order |
Sets the order of the flexible item, relative to the rest | Learn More |
O |
orphans |
Sets the minimum number of lines that must be left at the bottom of a page or column | Learn More |
O |
outline |
A shorthand property for the outline-width, outline-style, and the outline-color properties | Learn More |
O |
outline-color |
Sets the color of an outline | Learn More |
O |
outline-offset |
Offsets an outline, and draws it beyond the border edge | Learn More |
O |
outline-style |
Sets the style of an outline | Learn More |
O |
outline-width |
Sets the width of an outline | Learn More |
O |
overflow |
Specifies what happens if content overflows an element's box | Learn More |
O |
overflow-anchor |
Specifies whether or not content in viewable area in a scrollable contianer should be pushed down when new content is loaded above | Learn More |
O |
overflow-wrap |
Specifies whether or not the browser can break lines with long words, if they overflow the container | Learn More |
O |
overflow-x |
Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area | Learn More |
O |
overflow-y |
Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area | Learn More |
O |
overscroll-behavior |
Specifies whether to have scroll chaining or overscroll affordance in x- and y-directions | Learn More |
O |
overscroll-behavior-block |
Specifies whether to have scroll chaining or overscroll affordance in the block direction | Learn More |
O |
overscroll-behavior-inline |
Specifies whether to have scroll chaining or overscroll affordance in the inline direction | Learn More |
O |
overscroll-behavior-x |
Specifies whether to have scroll chaining or overscroll affordance in x-direction | Learn More |
O |
overscroll-behavior-y |
Specifies whether to have scroll chaining or overscroll affordance in y-directions | Learn More |
P |
padding |
A shorthand property for all the padding-* properties | Learn More |
P |
padding-block |
Specifies the padding in the block direction | Learn More |
P |
padding-block-end |
Specifies the padding at the end in the block direction | Learn More |
P |
padding-block-start |
Specifies the padding at the start in the block direction | Learn More |
P |
padding-bottom |
Sets the bottom padding of an element | Learn More |
P |
padding-inline |
Specifies the padding in the inline direction | Learn More |
P |
padding-inline-end |
Specifies the padding at the end in the inline direction | Learn More |
P |
padding-inline-start |
Specifies the padding at the start in the inline direction | Learn More |
P |
padding-left |
Sets the left padding of an element | Learn More |
P |
padding-right |
Sets the right padding of an element | Learn More |
P |
padding-top |
Sets the top padding of an element | Learn More |
P |
page-break-after |
Sets the page-break behavior after an element. Replaced by break-after property | Learn More |
P |
page-break-before |
Sets the page-break behavior before an element. Replaced by break-before property | Learn More |
P |
page-break-inside |
Sets the page-break behavior inside an element. Replaced by break-inside property | Learn More |
P |
paint-order |
Sets the order of how an SVG element or text is painted. | Learn More |
P |
perspective |
Gives a 3D-positioned element some perspective | Learn More |
P |
perspective-origin |
Defines at which position the user is looking at the 3D-positioned element | Learn More |
P |
place-content |
Specifies align-content and justify-content property values for flexbox and grid layouts | Learn More |
P |
place-items |
Specifies align-items and justify-items property values for grid layouts | Learn More |
P |
place-self |
Specifies align-self and justify-self property values for grid layouts | Learn More |
P |
pointer-events |
Defines whether or not an element reacts to pointer events | Learn More |
P |
position |
Specifies the type of positioning method used for an element (static, relative, absolute or fixed) | Learn More |
Q |
quotes |
Sets the type of quotation marks for embedded quotations | Learn More |
R |
resize |
Defines if (and how) an element is resizable by the user | Learn More |
R |
right |
Specifies the right position of a positioned element | Learn More |
R |
rotate |
Specifies the rotation of an element | Learn More |
R |
row-gap |
Specifies the gap between the grid rows | Learn More |
S |
scale |
Specifies the size of an element by scaling up or down | Learn More |
S |
scroll-behavior |
Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump | Learn More |
S |
scroll-margin |
Specifies the margin between the snap position and the container | Learn More |
S |
scroll-margin-block |
Specifies the margin between the snap position and the container in the block direction | Learn More |
S |
scroll-margin-block-end |
Specifies the end margin between the snap position and the container in the block direction | Learn More |
S |
scroll-margin-block-start |
Specifies the start margin between the snap position and the container in the block direction | Learn More |
S |
scroll-margin-bottom |
Specifies the margin between the snap position on the bottom side and the container | Learn More |
S |
scroll-margin-inline |
Specifies the margin between the snap position and the container in the inline direction | Learn More |
S |
scroll-margin-inline-end |
Specifies the end margin between the snap position and the container in the inline direction | Learn More |
S |
scroll-margin-inline-start |
Specifies the start margin between the snap position and the container in the inline direction | Learn More |
S |
scroll-margin-left |
Specifies the margin between the snap position on the left side and the container | Learn More |
S |
scroll-margin-right |
Specifies the margin between the snap position on the right side and the container | Learn More |
S |
scroll-margin-top |
Specifies the margin between the snap position on the top side and the container | Learn More |
S |
scroll-padding |
Specifies the distance from the container to the snap position on the child elements | Learn More |
S |
scroll-padding-block |
Specifies the distance in block direction from the container to the snap position on the child elements | Learn More |
S |
scroll-padding-block-end |
Specifies the distance in block direction from the end of the container to the snap position on the child elements | Learn More |
S |
scroll-padding-block-start |
Specifies the distance in block direction from the start of the container to the snap position on the child elements | Learn More |
S |
scroll-padding-bottom |
Specifies the distance from the bottom of the container to the snap position on the child elements | Learn More |
S |
scroll-padding-inline |
Specifies the distance in inline direction from the container to the snap position on the child elements | Learn More |
S |
scroll-padding-inline-end |
Specifies the distance in inline direction from the end of the container to the snap position on the child elements | Learn More |
S |
scroll-padding-inline-start |
Specifies the distance in inline direction from the start of the container to the snap position on the child elements | Learn More |
S |
scroll-padding-left |
Specifies the distance from the left side of the container to the snap position on the child elements | Learn More |
S |
scroll-padding-right |
Specifies the distance from the right side of the container to the snap position on the child elements | Learn More |
S |
scroll-padding-top |
Specifies the distance from the top of the container to the snap position on the child elements | Learn More |
S |
scroll-snap-align |
Specifies where to position elements when the user stops scrolling | Learn More |
S |
scroll-snap-stop |
Specifies scroll behaviour after fast swipe on trackpad or touch screen | Learn More |
S |
scroll-snap-type |
Specifies how snap behaviour should be when scrolling | Learn More |
S |
scrollbar-color |
Specifies the color of the scrollbar of an element | Learn More |
S |
shape-outside |
Defines a shape for wrapping for the inline content | Learn More |
T |
tab-size |
Specifies the width of a tab character | Learn More |
T |
table-layout |
Defines the algorithm used to lay out table cells, rows, and columns | Learn More |
T |
text-align |
Specifies the horizontal alignment of text | Learn More |
T |
text-align-last |
Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | Learn More |
T |
text-decoration |
Specifies the decoration added to text | Learn More |
T |
text-decoration-color |
Specifies the color of the text-decoration | Learn More |
T |
text-decoration-line |
Specifies the type of line in a text-decoration | Learn More |
T |
text-decoration-style |
Specifies the style of the line in a text decoration | Learn More |
T |
text-decoration-thickness |
Specifies the thickness of the decoration line | Learn More |
T |
text-emphasis |
A shorthand property for the text-emphasis-style and text-emphasis-color properties | Learn More |
T |
text-emphasis-color |
Specifies the color of emphasis marks | Learn More |
T |
text-emphasis-position |
Specifies the position of emphasis marks | Learn More |
T |
text-emphasis-style |
Specifies the style of emphasis marks | Learn More |
T |
text-indent |
Specifies the indentation of the first line in a text-block | Learn More |
T |
text-justify |
Specifies the justification method used when text-align is "justify" | Learn More |
T |
text-orientation |
Defines the orientation of characters in a line | Learn More |
T |
text-overflow |
Specifies what should happen when text overflows the containing element | Learn More |
T |
text-shadow |
Adds shadow to text | Learn More |
T |
text-transform |
Controls the capitalization of text | Learn More |
T |
text-underline-offset |
Specifies the offset distance of the underline text decoration | Learn More |
T |
text-underline-position |
Specifies the position of the underline text decoration | Learn More |
T |
top |
Specifies the top position of a positioned element | Learn More |
T |
transform |
Applies a 2D or 3D transformation to an element | Learn More |
T |
transform-origin |
Allows you to change the position on transformed elements | Learn More |
T |
transform-style |
Specifies how nested elements are rendered in 3D space | Learn More |
T |
transition |
A shorthand property for all the transition-* properties | Learn More |
T |
transition-delay |
Specifies when the transition effect will start | Learn More |
T |
transition-duration |
Specifies how many seconds or milliseconds a transition effect takes to complete | Learn More |
T |
transition-property |
Specifies the name of the CSS property the transition effect is for | Learn More |
T |
transition-timing-function |
Specifies the speed curve of the transition effect | Learn More |
T |
translate |
Specifies the position of an element | Learn More |
U |
unicode-bidi |
Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document | Learn More |
U |
user-select |
Specifies whether the text of an element can be selected | Learn More |
V |
vertical-align |
Sets the vertical alignment of an element | Learn More |
V |
visibility |
Specifies whether or not an element is visible | Learn More |
W |
white-space |
Specifies how white-space inside an element is handled | Learn More |
W |
widows |
Sets the minimum number of lines that must be left at the top of a page or column | Learn More |
W |
width |
Sets the width of an element | Learn More |
W |
word-break |
Specifies how words should break when reaching the end of a line | Learn More |
W |
word-spacing |
Increases or decreases the space between words in a text | Learn More |
W |
word-wrap |
Allows long, unbreakable words to be broken and wrap to the next line | Learn More |
W |
writing-mode |
Specifies whether lines of text are laid out horizontally or vertically | Learn More |
Z |
z-index |
Sets the stack order of a positioned element | Learn More |
Z |
zoom |
Specifies the zoom factor for an element. An element can be zoomed in and out | Learn More |
The table will be dynamically updated based on the JSON data.
python crawler.py
python update.pypThis repository includes a Python script to automatically generate the README.md file based on the css_properties.json file. Ensure that the JSON file is updated with the latest data.
The table columns will include:
- Category: The CSS property category (e.g.,
Background,Text, etc.). - Name: The name of the CSS property.
- Link: A link to the detailed reference for the CSS property on W3Schools.
- Brief Description: A short description of what the CSS property does.
This project is licensed under the MIT License.
© Copyright Max Base, 2025