| align-content |
Specifies the alignment between the lines inside a flexible container when the items do not use all available space |
align-content: center; |
| align-items |
Specifies the alignment for items inside a flexible container |
align-items: flex-start; |
| align-self |
Specifies the alignment for an item inside a flexible container, overriding the align-items value |
align-self: center; |
| all |
Resets all properties (except unicode-bidi and direction) to their initial or inherited value |
all: initial; |
| animation |
Shorthand property for setting all the animation properties into a single property |
animation: name 5s linear infinite; |
| animation-delay |
Specifies a delay for the start of an animation |
animation-delay: 2s; |
| animation-direction |
Specifies whether an animation should be played forwards, backwards, or in alternate cycles |
animation-direction: reverse; |
| animation-duration |
Specifies how long an animation should take to complete one cycle |
animation-duration: 3s; |
| animation-fill-mode |
Specifies how a CSS animation should apply styles before and after it is executed |
animation-fill-mode: forwards; |
| animation-iteration-count |
Specifies the number of times an animation should be played |
animation-iteration-count: infinite; |
| animation-name |
Specifies the name of the @keyframes animation to be played |
animation-name: slide; |
| animation-play-state |
Specifies whether the animation is running or paused |
animation-play-state: paused; |
| animation-timing-function |
Specifies the speed curve of an animation |
animation-timing-function: ease-in-out; |
| backdrop-filter |
Applies filter effects to the background of an element |
backdrop-filter: blur(5px); |
| backface-visibility |
Specifies whether or not the back face of an element is visible when facing the user |
backface-visibility: hidden; |
| background |
Shorthand property for setting all the background properties in one declaration |
background: #f2f2f2 url("image.jpg") no-repeat fixed center; |
| background-attachment |
Specifies whether a background image scrolls with the rest of the page, or is fixed |
background-attachment: fixed; |
| background-blend-mode |
Specifies the blending mode of each background layer (color/image) |
background-blend-mode: multiply; |
| background-color |
Specifies the background color of an element |
background-color: #f2f2f2; |
| background-image |
Specifies the background image for an element |
background-image: url("image.jpg"); |
| background-origin |
Specifies where the background image(s) is/are positioned relative to the content box |
background-origin: content-box; |
| background-position |
Specifies the starting position of a background image |
background-position: top right; |
| background-repeat |
Specifies how a background image should be repeated |
background-repeat: no-repeat; |
| background-size |
Specifies the size of the background image |
background-size: cover; |
| block-size |
Specifies the block-level dimension of an element |
block-size: 200px; |
| border |
Shorthand property for setting all the border properties in one declaration |
border: 1px solid #ccc; |
| border-block-end |
Shorthand property for setting the border-width, border-style, and border-color of the bottom border of an element |
border-block-end: 2px solid red; |
| border-block-start |
Shorthand property for setting the border-width, border-style, and border-color of the top border of an element |
border-block-start: 2px solid red; |
| border-bottom |
Shorthand property for setting the border-width, border-style, and border-color of the bottom border of an element |
border-bottom: 2px solid red; |
| border-bottom-color |
Specifies the color of the bottom border of an element |
border-bottom-color: red; |
| border-bottom-left-radius |
Specifies the radius of the bottom-left corner of the border |
border-bottom-left-radius: 10px; |
| border-bottom-right-radius |
Specifies the radius of the bottom-right corner of the border |
border-bottom-right-radius: 10px; |
| border-bottom-style |
Specifies the style of the bottom border of an element |
border-bottom-style: solid; |
| border-bottom-width |
Specifies the width of the bottom border of an element |
border-bottom-width: 2px; |
| border-collapse |
Specifies whether or not table borders should be collapsed |
border-collapse: collapse; |
| border-color |
Specifies the color of the four borders |
border-color: red green blue yellow; |
| border-end-end-radius |
Specifies the radius of the bottom-right corner of the border of the end edge of the box, in the box's coordinate system |
border-end-end-radius: 10px; |
| border-end-start-radius |
Specifies the radius of the bottom-left corner of the border of the end edge of the box, in the box's coordinate system |
border-end-start-radius: 10px; |
| border-image |
Shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties |
border-image: url("border.png") 30 30 round; |
| border-image-outset |
Specifies the amount by which the border image area extends beyond the border box |
border-image-outset: 10px; |
| border-image-repeat |
Specifies whether the border image should be repeated, rounded, or stretched |
border-image-repeat: stretch; |
| border-image-slice |
Specifies how to slice the border image |
border-image-slice: 30%; |
| border-image-source |
Specifies the path to the image to be used as a border |
border-image-source: url("border.png"); |
| border-image-width |
Specifies the width of the border image |
border-image-width: 30px; |
| border-inline-end |
Shorthand property for setting the border-width, border-style, and border-color of the right border of an element |
border-inline-end: 2px solid red; |
| border-inline-start |
Shorthand property for setting the border-width, border-style, and border-color of the left border of an element |
border-inline-start: 2px solid red; |
| border-left |
Shorthand property for setting the border-width, border-style, and border-color of the left border of an element |
border-left: 2px solid red; |
| border-left-color |
Specifies the color of the left border of an element |
border-left-color: red; |
| border-left-style |
Specifies the style of the left border of an element |
border-left-style: solid; |
| border-left-width |
Specifies the width of the left border of an element |
border-left-width: 2px; |
| border-radius |
Shorthand property for setting the border-radius properties in one declaration |
border-radius: 10px; |
| border-right |
Shorthand property for setting the border-width, border-style, and border-color of the right border of an element |
border-right: 2px solid red; |
| border-right-color |
Specifies the color of the right border of an element |
border-right-color: red; |
| border-right-style |
Specifies the style of the right border of an element |
border-right-style: solid; |
| border-right-width |
Specifies the width of the right border of an element |
border-right-width: 2px; |
| border-spacing |
Specifies the distance between the borders of adjacent cells |
border-spacing: 5px; |
| border-start-end-radius |
Specifies the radius of the bottom-right corner of the border of the start edge of the box, in the box's coordinate system |
border-start-end-radius: 10px; |
| border-start-start-radius |
Specifies the radius of the bottom-left corner of the border of the start edge of the box, in the box's coordinate system |
border-start-start-radius: 10px; |
| border-style |
Specifies the style of the four borders |
border-style: solid dashed dotted double; |
| border-top |
Shorthand property for setting the border-width, border-style, and border-color of the top border of an element |
border-top: 2px solid red; |
| border-top-color |
Specifies the color of the top border of an element |
border-top-color: red; |
| border-top-left-radius |
Specifies the radius of the top-left corner of the border |
border-top-left-radius: 10px; |
| border-top-right-radius |
Specifies the radius of the top-right corner of the border |
border-top-right-radius: 10px; |
| border-top-style |
Specifies the style of the top border of an element |
border-top-style: solid; |
| border-top-width |
Specifies the width of the top border of an element |
border-top-width: 2px; |
| border-width |
Specifies the width of the four borders |
border-width: 1px 2px 3px 4px; |
| bottom |
Specifies the bottom position of a positioned element |
bottom: 20px; |
| box-decoration-break |
Specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented |
box-decoration-break: slice; |
| box-shadow |
Adds shadow effects around an element's frame |
box-shadow: 5px 5px 5px #888888; |
| box-sizing |
Specifies how the total width and height of an element is calculated |
box-sizing: border-box; |
| break-after |
Specifies the page-, column-, or region-break behavior after an element |
break-after: always; |
| break-before |
Specifies the page-, column-, or region-break behavior before an element |
break-before: always; |
| break-inside |
Specifies the page-, column-, or region-break behavior inside an element |
break-inside: avoid; |
| caption-side |
Specifies the placement of a table caption |
caption-side: bottom; |
| caret-color |
Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable |
caret-color: blue; |
| @charset |
Specifies the character encoding for an external style sheet |
@charset "UTF-8"; |
| clear |
Specifies the sides of an element where other floating elements are not allowed |
clear: both; |
| clip |
Clips an absolutely positioned element |
clip: rect(0px, 100px, 100px, 0px); |
| clip-path |
Specifies a clipping path for an element |
clip-path: circle(50% at 50% 50%); |
| color |
Specifies the text color of an element |
color: red; |
| column-count |
Specifies the number of columns an element should be divided into |
column-count: 3; |
| column-fill |
Specifies how to fill columns |
column-fill: balance; |
| column-gap |
Specifies the gap between the columns |
column-gap: 40px; |
| column-rule |
Shorthand property for setting the width, style, and color of the rule between columns |
column-rule: 1px solid red; |
| column-rule-color |
Specifies the color of the rule between columns |
column-rule-color: red; |
| column-rule-style |
Specifies the style of the rule between columns |
column-rule-style: solid; |
| column-rule-width |
Specifies the width of the rule between columns |
column-rule-width: 1px; |
| column-span |
Specifies how many columns an element should span across |
column-span: all; |
| column-width |
Specifies the width of the columns |
column-width: 200px; |
| columns |
Shorthand property for setting the column-width and column-count properties |
columns: 200px 3; |
| content |
Inserts generated content |
content: "Hello"; |
| counter-increment |
Increments one or more counters |
counter-increment: section; |
| counter-reset |
Creates or resets one or more counters |
counter-reset: section; |
| cue |
Specifies sound files (known as an "auditory icon") to be played by speech media agents before and after presenting an element's content |
cue: url("sound.wav"); |
| cue-after |
Specifies a sound file (known as an "auditory icon") to be played by speech media agents after presenting an element's content |
cue-after: url("sound.wav"); |
| cue-before |
Specifies a sound file (known as an "auditory icon") to be played by speech media agents before presenting an element's content |
cue-before: url("sound.wav"); |
| cursor |
Specifies the type of cursor to be displayed |
cursor: pointer; |
| direction |
Specifies the text direction/writing direction |
direction: rtl; |
| display |
Specifies the display behavior of an element |
display: none; |
| empty-cells |
Specifies whether or not to display borders and background on empty cells in a table |
empty-cells: show; |
| filter |
Defines effects (e.g., blurring or color shifting) on an element's rendering before the element is displayed |
filter: blur(5px); |
| flex |
Specifies the components of a flexible length flexible box |
flex: 1; |
| flex-basis |
Specifies the initial length of a flexible item |
flex-basis: 100px; |
| flex-direction |
Specifies the direction of the flexible items |
flex-direction: row-reverse; |
| flex-flow |
Shorthand property for setting the flex-direction and flex-wrap properties |
flex-flow: row nowrap; |
| flex-grow |
Specifies how much the item will grow relative to the rest of the flexible items |
flex-grow: 1; |
| flex-shrink |
Specifies how the item will shrink relative to the rest of the flexible items |
flex-shrink: 0; |
| flex-wrap |
Specifies whether the flexible items should wrap or not |
flex-wrap: wrap; |
| float |
Specifies whether or not a box should float |
float: left; |
| font |
Shorthand property for setting the font-style, font-variant, font-weight, font-size, line-height, and font-family properties |
font: italic small-caps bold 12px/1.5 Arial, sans-serif; |
| font-family |
Specifies the font family for text |
font-family: Arial, sans-serif; |
| font-feature-settings |
Provides low-level control over OpenType font features |
font-feature-settings: "liga" on; |
| font-kerning |
Controls the usage of the kerning information (how letters are spaced) |
font-kerning: normal; |
| font-language-override |
Controls the usage of language-specific glyphs in a typeface |
font-language-override: normal; |
| font-size |
Specifies the font size of text |
font-size: 16px; |
| font-size-adjust |
Preserves the readability of text when font fallback occurs |
font-size-adjust: none; |
| font-stretch |
Selects a normal, condensed, or expanded face from a font family |
font-stretch: condensed; |
| font-style |
Specifies the font style for text |
font-style: italic; |
| font-synthesis |
Specifies whether font faces are synthesized |
font-synthesis: weight style; |
| font-variant |
Specifies whether or not a text should be displayed in a small-caps font |
font-variant: small-caps; |
| font-variant-alternates |
Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values |
font-variant-alternates: historical-forms; |
| font-variant-caps |
Controls the usage of alternate glyphs for capital letters |
font-variant-caps: small-caps; |
| font-variant-east-asian |
Controls the usage of alternate glyphs for East Asian scripts (e.g., Japanese and Chinese) |
font-variant-east-asian: normal; |
| font-variant-ligatures |
Controls which ligatures and contextual forms are used in textual content of the elements it applies to |
font-variant-ligatures: common-ligatures; |
| font-variant-numeric |
Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers |
font-variant-numeric: lining-nums; |
| font-variant-position |
Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font |
font-variant-position: normal; |
| font-weight |
Specifies the weight of a font |
font-weight: bold; |
| grid |
Shorthand property for setting grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow properties |
grid: auto / 1fr 1fr; |
| grid-area |
Specifies a grid item's size and location within the grid |
grid-area: 1 / 1 / span 2 / span 3; |
| grid-auto-columns |
Specifies the size of an implicitly-created grid column |
grid-auto-columns: 100px; |
| grid-auto-flow |
Specifies how auto-placed items are inserted in the grid |
grid-auto-flow: row; |
| grid-auto-rows |
Specifies the size of an implicitly-created grid row |
grid-auto-rows: minmax(100px, auto); |
| grid-column |
Shorthand property for setting grid-column-start and grid-column-end properties |
grid-column: 1 / span 2; |
| grid-column-end |
Specifies where to end the grid item |
grid-column-end: 2; |
| grid-column-gap |
Specifies the size of the gap between columns in a grid layout |
grid-column-gap: 20px; |
| grid-column-start |
Specifies where to start the grid item |
grid-column-start: 1; |
| grid-gap |
Shorthand property for setting grid-row-gap and grid-column-gap properties |
grid-gap: 20px 10px; |
| grid-row |
Shorthand property for setting grid-row-start and grid-row-end properties |
grid-row: 1 / span 2; |
| grid-row-end |
Specifies where to end the grid item |
grid-row-end: 2; |
| grid-row-gap |
Specifies the size of the gap between rows in a grid layout |
grid-row-gap: 20px; |
| grid-row-start |
Specifies where to start the grid item |
grid-row-start: 1; |
| grid-template |
Shorthand property for setting grid-template-rows, grid-template-columns, and grid-template-areas properties |
grid-template: 100px 200px / 1fr 2fr; |
| grid-template-areas |
Specifies named grid areas |
grid-template-areas: "header header header" "main main sidebar" "footer footer footer"; |
| grid-template-columns |
Specifies the size of the columns in a grid layout |
grid-template-columns: 1fr 2fr; |
| grid-template-rows |
Specifies the size of the rows in a grid layout |
grid-template-rows: 100px 200px; |
| hanging-punctuation |
Specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text |
hanging-punctuation: none; |
| height |
Specifies the height of an element |
height: 100px; |
| hyphens |
Controls how words should be hyphenated when text wraps across multiple lines |
hyphens: auto; |
| image-orientation |
Specifies a rotation in the right or clockwise direction that a user agent applies to an image |
image-orientation: flip; |
| image-rendering |
Specifies how an element's content should be rendered in terms of interpolation and scaling |
image-rendering: auto; |
| image-resolution |
Specifies the intrinsic resolution of all raster images used in or on the element |
image-resolution: 300dpi; |
| ime-mode |
Controls the state of the input method editor for text fields |
ime-mode: auto; |
| initial-letters |
Specifies a decorative element for the first letter of the text in an element |
initial-letters: 3; |
| inline-size |
Specifies the width or height of a box that is generated by an inline-level element |
inline-size: 200px; |
| inset |
Shorthand property that specifies the margins of an absolutely positioned element |
inset: 10px; |
| inset-block |
Shorthand property that specifies the margins of an absolutely positioned element in the block dimension |
inset-block: 10px; |
| inset-block-end |
Specifies the margin at the end of an absolutely positioned element in the block dimension |
inset-block-end: 10px; |
| inset-block-start |
Specifies the margin at the start of an absolutely positioned element in the block dimension |
inset-block-start: 10px; |
| inset-inline |
Shorthand property that specifies the margins of an absolutely positioned element in the inline dimension |
inset-inline: 10px; |
| inset-inline-end |
Specifies the margin at the end of an absolutely positioned element in the inline dimension |
inset-inline-end: 10px; |
| inset-inline-start |
Specifies the margin at the start of an absolutely positioned element in the inline dimension |
inset-inline-start: 10px; |
| isolation |
Specifies whether an element must create a new stacking context |
isolation: isolate; |
| justify-content |
Specifies the alignment of flexible items along the main axis of the flex container |
justify-content: center; |
| justify-items |
Specifies the alignment of grid items along the inline (row) axis |
justify-items: center; |
| justify-self |
Specifies the alignment of a grid item inside its grid cell along the inline (row) axis |
justify-self: center; |
| left |
Specifies the left position of a positioned element |
left: 10px; |
| letter-spacing |
Specifies the spacing between characters in a text |
letter-spacing: 2px; |
| line-break |
Specifies how/if to break lines within words |
line-break: normal; |
| line-height |
Specifies the height of a line |
line-height: 1.5; |
| list-style |
Shorthand property for setting the list-style-type, list-style-position, and list-style-image properties |
list-style: disc inside url("image.png"); |
| list-style-image |
Specifies an image as the list-item marker |
list-style-image: url("image.png"); |
| list-style-position |
Specifies the position of the list-item marker |
list-style-position: inside; |
| list-style-type |
Specifies the type of list-item marker |
list-style-type: disc; |
| margin |
Shorthand property for setting the margin-top, margin-right, margin-bottom, and margin-left properties |
margin: 10px; |
| margin-block |
Shorthand property for setting the margin-top and margin-bottom properties |
margin-block: 10px; |
| margin-block-end |
Specifies the bottom margin of an element in the block direction |
margin-block-end: 10px; |
| margin-block-start |
Specifies the top margin of an element in the block direction |
margin-block-start: 10px; |
| margin-bottom |
Specifies the bottom margin of an element |
margin-bottom: 10px; |
| margin-inline |
Shorthand property for setting the margin-inline-start and margin-inline-end properties |
margin-inline: 10px; |
| margin-inline-end |
Specifies the right margin of an element in the inline direction |
margin-inline-end: 10px; |
| margin-inline-start |
Specifies the left margin of an element in the inline direction |
margin-inline-start: 10px; |
| margin-left |
Specifies the left margin of an element |
margin-left: 10px; |
| margin-right |
Specifies the right margin of an element |
margin-right: 10px; |
| margin-top |
Specifies the top margin of an element |
margin-top: 10px; |
| marker |
Shorthand property for setting the marker-start, marker-mid, and marker-end properties |
marker: url("marker.svg"); |
| marker-end |
Specifies the marker symbol to use at the end of a line or curve |
marker-end: url("marker.svg"); |
| marker-mid |
Specifies the marker symbol to use at the middle of a line or curve |
marker-mid: url("marker.svg"); |
| marker-start |
Specifies the marker symbol to use at the start of a line or curve |
marker-start: url("marker.svg"); |
| mask |
Shorthand property that sets all mask properties at once |
mask: url("mask.png"); |
| mask-border |
Shorthand property that sets all individual mask-border-* properties at once |
mask-border: 10px solid black; |
| mask-border-mode |
Specifies the blending mode used to combine the mask border with the element's background |
mask-border-mode: alpha; |
| mask-border-outset |
Specifies the amount by which the mask border image area extends beyond the border box |
mask-border-outset: 10px; |
| mask-border-repeat |
Specifies how the mask border image is repeated |
mask-border-repeat: repeat-x; |
| mask-border-slice |
Specifies the inward offsets of the mask border image |
mask-border-slice: 10%; |
| mask-border-source |
Specifies the mask border image source |
mask-border-source: url("mask.png"); |
| mask-border-width |
Specifies the width of the mask border |
mask-border-width: 10px; |
| mask-clip |
Specifies the mask painting area |
mask-clip: border-box; |
| mask-composite |
Specifies the formula used to combine the mask images |
mask-composite: add; |
| mask-image |
Specifies the mask images |
mask-image: url("mask.png"); |
| mask-mode |
Specifies the blending mode used to apply the mask images |
mask-mode: alpha; |
| mask-origin |
Specifies the position of the mask positioning area |
mask-origin: padding-box; |
| mask-position |
Specifies the position of a mask image |
mask-position: 50% 50%; |
| mask-repeat |
Specifies how a mask image should be repeated |
mask-repeat: repeat-x; |
| mask-size |
Specifies the size of the mask images |
mask-size: 100px 200px; |
| mask-type |
Specifies the mask layer type |
mask-type: alpha; |
| max-block-size |
Specifies the maximum block size of an element |
max-block-size: 300px; |
| max-height |
Specifies the maximum height of an element |
max-height: 500px; |
| max-inline-size |
Specifies the maximum inline size of an element |
max-inline-size: 400px; |
| max-lines |
Specifies the maximum number of lines in a block-level element |
max-lines: 3; |
| max-width |
Specifies the maximum width of an element |
max-width: 800px; |
| min-block-size |
Specifies the minimum block size of an element |
min-block-size: 100px; |
| min-height |
Specifies the minimum height of an element |
min-height: 200px; |
| min-inline-size |
Specifies the minimum inline size of an element |
min-inline-size: 150px; |
| min-width |
Specifies the minimum width of an element |
min-width: 300px; |
| mix-blend-mode |
Specifies how an element's content should blend with its background |
mix-blend-mode: multiply; |
| object-fit |
Specifies how the contents of a replaced element should be fitted to the box established by its used height and width |
object-fit: contain; |
| object-position |
Specifies the alignment of the replaced element inside its box |
object-position: 50% 50%; |
| offset |
Shorthand property that sets all individual offset properties at once |
offset: 10px 20px; |
| offset-anchor |
Specifies the positioning reference for the offset properties |
offset-anchor: #element; |
| offset-distance |
Specifies the offset distance for positioned elements |
offset-distance: 20px; |
| offset-path |
Specifies the motion path for positioned elements |
offset-path: path("M10 10 H 90 V 90 H 10 L 10 10"); |
| offset-position |
Specifies the positioning algorithm for positioned elements |
offset-position: auto; |
| offset-rotate |
Specifies the rotation angle for positioned elements |
offset-rotate: 45deg; |
| opacity |
Specifies the transparency level of an element |
opacity: 0.5; |
| order |
Specifies the order of a flexible item relative to the rest of the flexible items inside the same container |
order: 2; |
| orientation |
Specifies the orientation of a page |
orientation: landscape; |
| orphans |
Specifies the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element |
orphans: 2; |
| outline |
Shorthand property for setting the outline-width, outline-style, and outline-color properties |
outline: 2px dashed red; |
| outline-color |
Specifies the color of an outline |
outline-color: red; |
| outline-offset |
Specifies the space between an outline and the edge or border of an element |
outline-offset: 5px; |
| outline-style |
Specifies the style of an outline |
outline-style: dashed; |
| outline-width |
Specifies the width of an outline |
outline-width: 2px; |
| overflow |
Specifies what happens if content overflows an element's box |
overflow: hidden; |
| overflow-anchor |
Specifies whether a scroll container's scrolling area is scrolled when the contents of a focused descendant are scrolled to a focusable area at the edge of the scrolling area |
overflow-anchor: auto; |
| overflow-block |
Shorthand property for setting the overflow-block-start and overflow-block-end properties |
overflow-block: auto; |
| overflow-block-end |
Specifies how content should be displayed when it overflows the end of a block-level element |
overflow-block-end: scroll; |
| overflow-block-start |
Specifies how content should be displayed when it overflows the start of a block-level element |
overflow-block-start: hidden; |
| overflow-clip-box |
Specifies whether or not to clip the scrolling mechanism to the scrolling box |
overflow-clip-box: content-box; |
| overflow-inline |
Shorthand property for setting the overflow-inline-start and overflow-inline-end properties |
overflow-inline: auto; |
| overflow-inline-end |
Specifies how content should be displayed when it overflows the end of an inline-level element |
overflow-inline-end: scroll; |
| overflow-inline-start |
Specifies how content should be displayed when it overflows the start of an inline-level element |
overflow-inline-start: hidden; |
| overflow-wrap |
Specifies whether or not to insert line breaks within words to prevent overflow |
overflow-wrap: break-word; |
| overflow-x |
Specifies what happens if content overflows an element's left and right edges |
overflow-x: scroll; |
| overflow-y |
Specifies what happens if content overflows an element's top and bottom edges |
overflow-y: auto; |
| overscroll-behavior |
Specifies the browser's behavior when the user over-scrolls at the boundary of a scrolling area |
overscroll-behavior: auto; |
| overscroll-behavior-block |
Specifies the browser's behavior when the user over-scrolls at the boundary of a scrolling area in the block direction |
overscroll-behavior-block: auto; |
| overscroll-behavior-inline |
Specifies the browser's behavior when the user over-scrolls at the boundary of a scrolling area in the inline direction |
overscroll-behavior-inline: auto; |
| overscroll-behavior-x |
Specifies the browser's behavior when the user over-scrolls at the boundary of a scrolling area in the horizontal direction |
overscroll-behavior-x: auto; |
| overscroll-behavior-y |
Specifies the browser's behavior when the user over-scrolls at the boundary of a scrolling area in the vertical direction |
overscroll-behavior-y: auto; |
| padding |
Shorthand property for setting the padding-top, padding-right, padding-bottom, and padding-left properties |
padding: 10px; |
| padding-block |
Shorthand property for setting the padding-block-start and padding-block-end properties |
padding-block: 10px; |
| padding-block-end |
Specifies the bottom padding of an element in the block direction |
padding-block-end: 10px; |
| padding-block-start |
Specifies the top padding of an element in the block direction |
padding-block-start: 10px; |
| padding-bottom |
Specifies the bottom padding of an element |
padding-bottom: 10px; |
| padding-inline |
Shorthand property for setting the padding-inline-start and padding-inline-end properties |
padding-inline: 10px; |
| padding-inline-end |
Specifies the right padding of an element in the inline direction |
padding-inline-end: 10px; |
| padding-inline-start |
Specifies the left padding of an element in the inline direction |
padding-inline-start: 10px; |
| padding-left |
Specifies the left padding of an element |
padding-left: 10px; |
| padding-right |
Specifies the right padding of an element |
padding-right: 10px; |
| padding-top |
Specifies the top padding of an element |
padding-top: 10px; |
| page |
Shorthand property for setting the page-break-before, page-break-after, and page-break-inside properties |
page: auto; |
| page-break-after |
Specifies the page-breaking behavior after an element |
page-break-after: always; |
| page-break-before |
Specifies the page-breaking behavior before an element |
page-break-before: avoid; |
| page-break-inside |
Specifies the page-breaking behavior inside an element |
page-break-inside: avoid; |
| paint-order |
Specifies the order in which to paint overlapping fill and stroke when rendering an element |
paint-order: stroke; |
| perspective |
Specifies the perspective from which all child elements of an element are viewed |
perspective: 1000px; |
| perspective-origin |
Specifies the origin of the perspective for an element |
perspective-origin: 50% 50%; |
| place-content |
Shorthand property for setting the align-content and justify-content properties |
place-content: center center; |
| place-items |
Shorthand property for setting the align-items and justify-items properties |
place-items: center center; |
| place-self |
Shorthand property for setting the align-self and justify-self properties |
place-self: center center; |
| pointer-events |
Specifies whether or not an element should be able to respond to pointer events |
pointer-events: none; |
| position |
Specifies the type of positioning method used for an element |
position: absolute; |
| quotes |
Specifies quotation marks for embedded quotations |
quotes: "«" "»"; |
| resize |
Specifies whether or not an element is resizable by the user |
resize: both; |
| right |
Specifies the right position of a positioned element |
right: 10px; |
| rotate |
Specifies the rotation angle of an element |
rotate: 45deg; |
| row-gap |
Specifies the size of the gap between rows in a grid layout |
row-gap: 10px; |
| ruby-align |
Specifies the alignment of the ruby text inside a ruby annotation container |
ruby-align: space-between; |
| ruby-merge |
Specifies whether adjacent ruby text elements should be merged into a single container or remain separate |
ruby-merge: separate; |
| ruby-position |
Specifies the position of the ruby text with respect to the base text |
ruby-position: over; |
| scale |
Specifies the scale transformation applied to an element |
scale: 1.5; |
| scroll-behavior |
Specifies the scrolling behavior for a scrolling box |
scroll-behavior: smooth; |
| scroll-margin |
Shorthand property for setting the scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left properties |
scroll-margin: 10px; |
| scroll-margin-block |
Shorthand property for setting the scroll-margin-block-start and scroll-margin-block-end properties |
scroll-margin-block: 10px; |
| scroll-margin-block-end |
Specifies the bottom scroll-margin of an element in the block direction |
scroll-margin-block-end: 10px; |
| scroll-margin-block-start |
Specifies the top scroll-margin of an element in the block direction |
scroll-margin-block-start: 10px; |
| scroll-margin-bottom |
Specifies the bottom scroll-margin of an element |
scroll-margin-bottom: 10px; |
| scroll-margin-inline |
Shorthand property for setting the scroll-margin-inline-start and scroll-margin-inline-end properties |
scroll-margin-inline: 10px; |
| scroll-margin-inline-end |
Specifies the right scroll-margin of an element in the inline direction |
scroll-margin-inline-end: 10px; |
| scroll-margin-inline-start |
Specifies the left scroll-margin of an element in the inline direction |
scroll-margin-inline-start: 10px; |
| scroll-margin-left |
Specifies the left scroll-margin of an element |
scroll-margin-left: 10px; |
| scroll-margin-right |
Specifies the right scroll-margin of an element |
scroll-margin-right: 10px; |
| scroll-margin-top |
Specifies the top scroll-margin of an element |
scroll-margin-top: 10px; |
| scroll-padding |
Shorthand property for setting the scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left properties |
scroll-padding: 10px; |
| scroll-padding-block |
Shorthand property for setting the scroll-padding-block-start and scroll-padding-block-end properties |
scroll-padding-block: 10px; |
| scroll-padding-block-end |
Specifies the bottom scroll-padding of an element in the block direction |
scroll-padding-block-end: 10px; |
| scroll-padding-block-start |
Specifies the top scroll-padding of an element in the block direction |
scroll-padding-block-start: 10px; |
| scroll-padding-bottom |
Specifies the bottom scroll-padding of an element |
scroll-padding-bottom: 10px; |
| scroll-padding-inline |
Shorthand property for setting the scroll-padding-inline-start and scroll-padding-inline-end properties |
scroll-padding-inline: 10px; |
| scroll-padding-inline-end |
Specifies the right scroll-padding of an element in the inline direction |
scroll-padding-inline-end: 10px; |
| scroll-padding-inline-start |
Specifies the left scroll-padding of an element in the inline direction |
scroll-padding-inline-start: 10px; |
| scroll-padding-left |
Specifies the left scroll-padding of an element |
scroll-padding-left: 10px; |
| scroll-padding-right |
Specifies the right scroll-padding of an element |
scroll-padding-right: 10px; |
| scroll-padding-top |
Specifies the top scroll-padding of an element |
scroll-padding-top: 10px; |
| scroll-snap-align |
Specifies how an element's scroll snap position is aligned within its scroll container |
scroll-snap-align: start; |
| scroll-snap-stop |
Specifies whether or not the scrolling mechanism within a scrolling container should snap to element boundaries |
scroll-snap-stop: normal; |
| scroll-snap-type |
Specifies the type of scrolling used for the snap points within a scrolling container |
scroll-snap-type: x mandatory; |
| scrollbar-color |
Specifies the color of the scrollbar |
scrollbar-color: red blue; |
| scrollbar-gutter |
Specifies the visibility of the scrollbar gutter, which is the space between the scrollbar and the scrollable content |
scrollbar-gutter: auto; |
| scrollbar-width |
Specifies the width of the scrollbar |
scrollbar-width: thin; |
| shape-image-threshold |
Specifies the alpha channel threshold used to extract the shape from the shape image |
shape-image-threshold: 0.5; |
| shape-margin |
Specifies the margin that should be added around the shape |
shape-margin: 10px; |
| shape-outside |
Specifies a shape to wrap content around |
shape-outside: circle(50%); |
| shape-rendering |
Specifies the quality of the rendering for geometric shapes |
shape-rendering: crispEdges; |
| size |
Specifies the size of the generated box |
size: 200px 300px; |
| stop-color |
Specifies the color of the stop in a gradient |
stop-color: red; |
| stop-opacity |
Specifies the opacity of the stop in a gradient |
stop-opacity: 0.5; |
| stroke |
Specifies the color of the outline of a shape or text |
stroke: blue; |
| stroke-dasharray |
Specifies the pattern of dashes and gaps used to stroke paths |
stroke-dasharray: 5px 2px; |
| stroke-dashoffset |
Specifies the offset of the dash pattern used to stroke paths |
stroke-dashoffset: 10px; |
| stroke-linecap |
Specifies the shape to be used at the end of open subpaths when they are stroked |
stroke-linecap: round; |
| stroke-linejoin |
Specifies the shape to be used at the corners of paths or basic shapes when they are stroked |
stroke-linejoin: bevel; |
| stroke-miterlimit |
Specifies the limit on the ratio of the miter length to the stroke-width |
stroke-miterlimit: 3; |
| stroke-opacity |
Specifies the opacity of the outline of a shape or text |
stroke-opacity: 0.8; |
| stroke-width |
Specifies the width of the outline of a shape or text |
stroke-width: 2px; |
| tab-size |
Specifies the width of a tab character |
tab-size: 4; |
| table-layout |
Specifies the algorithm used to lay out table cells, rows, and columns |
table-layout: fixed; |
| text-align |
Specifies the horizontal alignment of text |
text-align: center; |
| text-align-last |
Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" |
text-align-last: center; |
| text-anchor |
Specifies the alignment of text relative to its text anchor |
text-anchor: middle; |
| text-combine-upright |
Specifies the combination of multiple characters into the space of a single character |
text-combine-upright: all; |
| text-decoration |
Specifies the decoration added to text |
text-decoration: underline; |
| text-decoration-color |
Specifies the color of the text decoration |
text-decoration-color: red; |
| text-decoration-line |
Specifies the type of line in a text decoration |
text-decoration-line: underline; |
| text-decoration-skip-ink |
Specifies whether to skip ink for text decoration |
text-decoration-skip-ink: auto; |
| text-decoration-style |
Specifies the style of the line in a text decoration |
text-decoration-style: dashed; |
| text-decoration-thickness |
Specifies the thickness of the line in a text decoration |
text-decoration-thickness: 2px; |
| text-indent |
Specifies the indentation of the first line in a text block |
text-indent: 20px; |
| text-justify |
Specifies how to align and justify text within a text container |
text-justify: inter-word; |
| text-orientation |
Specifies the orientation of the text in a line |
text-orientation: sideways; |
| text-overflow |
Specifies how to handle text overflow when it is too long to fit within a container |
text-overflow: ellipsis; |
| text-rendering |
Specifies the quality of text rendering |
text-rendering: optimizeLegibility; |
| text-shadow |
Specifies the shadow effect added to text |
text-shadow: 2px 2px 2px black; |
| text-size-adjust |
Specifies the size of the text in relation to the viewport |
text-size-adjust: auto; |
| text-transform |
Specifies how to capitalize text |
text-transform: uppercase; |
| text-underline-offset |
Specifies the offset of the underline relative to the baseline of the text |
text-underline-offset: 3px; |
| text-underline-position |
Specifies the position of the underline relative to the baseline of the text |
text-underline-position: under; |
| top |
Specifies the top position of a positioned element |
top: 50px; |
| touch-action |
Specifies how touch events are handled |
touch-action: pan-y; |
| transform |
Specifies a 2D or 3D transformation to apply to an element |
transform: rotate(45deg); |
| transform-box |
Specifies the box to which the transform is applied |
transform-box: fill-box; |
| transform-origin |
Specifies the origin of the transformation applied to an element |
transform-origin: 50% 50%; |
| transform-style |
Specifies how nested elements are rendered in 3D space |
transform-style: preserve-3d; |
| transition |
Shorthand property for setting the transition-property, transition-duration, transition-timing-function, and transition-delay properties |
transition: width 2s ease-in-out; |
| transition-delay |
Specifies when the transition effect will start |
transition-delay: 1s; |
| transition-duration |
Specifies how long the transition effect will run |
transition-duration: 0.5s; |
| transition-property |
Specifies the CSS property to which the transition is applied |
transition-property: opacity; |
| transition-timing-function |
Specifies the speed curve of the transition effect |
transition-timing-function: ease-in-out; |
| unicode-bidi |
Specifies whether the text direction of an element can be overridden |
unicode-bidi: bidi-override; |
| user-select |
Specifies whether the text of an element can be selected |
user-select: none; |
| vector-effect |
Specifies the effect applied to vector graphics |
vector-effect: non-scaling-stroke; |
| vertical-align |
Specifies the vertical alignment of an inline or table-cell box |
vertical-align: middle; |
| visibility |
Specifies whether an element is visible or hidden |
visibility: hidden; |
| white-space |
Specifies how white space inside an element is handled |
white-space: nowrap; |
| widows |
Specifies the minimum number of lines in a block container that must be shown at the top of a page |
widows: 2; |
| width |
Specifies the width of an element |
width: 300px; |
| writing-mode |
Specifies the direction and orientation of the text in a block-level element |
writing-mode: vertical-rl; |
| z-index |
Specifies the stack order of an element |
z-index: 1; |
