| Property | Description |
|---|---|
| accent-color | Changes the color of browser-provided interface controls like checkboxes, radio buttons, and range sliders. For example, accent-color: blue; makes your checkboxes blue instead of the browser's default color. Introduced in: |
| align-content | Controls how multiple rows or columns are spaced out inside a flex or grid container when there's extra space. Think of it like deciding whether items should be packed together at the top, spread out evenly, or centered vertically in their container. Introduced in: |
| align-items | Aligns items along the cross axis (usually vertical) within a single row or column in a flex or grid container. For example, align-items: center; vertically centers all items in a row. Introduced in: |
| align-self | Overrides the align-items value for a specific individual item, letting one item align differently from its siblings. For example, one item can be centered while others are aligned to the top. Introduced in: |
| all | Resets all CSS properties on an element to their initial, inherited, or unset values in one go. Using all: initial; removes all styling from an element. It's like a master reset button. Introduced in: |
| animation | A shorthand property that combines all animation settings in one line, including name, duration, timing, delay, iteration count, direction, fill mode, and play state. For example, animation: slide 2s ease-in 0.5s infinite;Introduced in: |
| animation-delay | Sets how long to wait before an animation starts. For example, animation-delay: 2s; means the animation waits 2 seconds before beginning. Negative values make the animation start partway through. Introduced in: |
| animation-direction | Controls whether an animation plays forward, backward, or alternates. Values like normal (forward), reverse (backward), or alternate (forward then backward) let you create different motion patterns. Introduced in: |
| animation-duration | Specifies how long an animation takes to complete one cycle. For example, animation-duration: 3s; means the animation takes 3 seconds from start to finish. Introduced in: |
| animation-fill-mode | Determines what styles apply to an element before and after the animation runs. For example, forwards keeps the final animation styles, while backwards applies the starting styles during any delay. Introduced in: |
| animation-iteration-count | Sets how many times an animation repeats. You can use a number like 3 for three times, or infinite to make it loop forever. Introduced in: |
| animation-name | Links an element to a specific @keyframes animation by name. For example, animation-name: slideIn; connects to @keyframes slideIn { ... }. Introduced in: |
| animation-play-state | Controls whether an animation is currently playing or paused. Setting animation-play-state: paused; freezes the animation wherever it currently is, like pausing a video. Introduced in: |
| animation-timing-function | Defines the speed curve of an animation, controlling how it accelerates and decelerates. Values like ease (starts slow, speeds up, then slows down), linear (constant speed), or ease-in (starts slow) create different motion feels. Introduced in: |
| aspect-ratio | Forces an element to maintain a specific width-to-height ratio. For example, aspect-ratio: 16/9; keeps the element in a widescreen format, automatically adjusting height when width changes, or vice versa. Introduced in: |
| backdrop-filter | Applies visual effects (like blur or brightness) to the area behind an element. For example, backdrop-filter: blur(10px); blurs whatever is behind a semi-transparent element, creating a frosted glass effect. Introduced in: |
| backface-visibility | Controls whether the back side of a 3D-rotated element is visible. When set to hidden, the element becomes invisible when rotated to show its back, useful for flip card effects. Introduced in: |
| background | A shorthand property that sets all background properties at once: color, image, position, size, repeat, attachment, origin, and clip. For example, background: blue url(image.jpg) center/cover no-repeat;Introduced in: |
| background-attachment | Determines whether a background image scrolls with the page or stays fixed in place. fixed creates a parallax effect where the background doesn't move as you scroll. Introduced in: |
| background-blend-mode | Controls how a background image blends with the background color or other background images beneath it. Options like multiply, screen, or overlay create different visual mixing effects, similar to Photoshop layers. Introduced in: |
| background-clip | Defines the area where the background (color or image) is painted. For example, background-clip: padding-box; stops the background from showing under the border area, or text makes the background only show through text. Introduced in: |
| background-color | Sets the background color of an element. You can use color names like red, hex codes like #ff0000, or RGB values like rgb(255, 0, 0). Introduced in: |
| background-image | Places an image (or multiple images) behind an element's content. For example, background-image: url('photo.jpg'); uses a file as the background. You can also use gradients like linear-gradient(red, blue). Introduced in: |
| background-origin | Determines where the background image positioning starts from: the border edge, padding edge, or content edge. This affects where the image is placed when using background-position. Introduced in: |
| background-position | Sets where a background image is located within its container. Values like center, top right, or 50% 25% position the image horizontally and vertically. Introduced in: |
| background-position-x | Controls only the horizontal (left-right) position of a background image. For example, background-position-x: 75%; positions the image 75% from the left edge. Introduced in: |
| background-position-y | Controls only the vertical (top-bottom) position of a background image. For example, background-position-y: 100px; positions the image 100 pixels from the top. Introduced in: |
| background-repeat | Determines if and how a background image repeats. Options include repeat (tiles in all directions), no-repeat (shows once), repeat-x (tiles horizontally only), or repeat-y (tiles vertically only). Introduced in: |
| background-size | Controls the size of a background image. Common values are cover (scales to fill the entire container), contain (scales to fit completely inside), or specific dimensions like 100px 200px. Introduced in: |
| block-size | Sets the size of an element in the block direction, which is usually height in horizontal writing modes. This property adapts automatically for different writing directions (like vertical text). Introduced in: |
| border | A shorthand property that sets the width, style, and color of all four borders at once. For example, border: 2px solid red; creates a 2-pixel-wide solid red border around the entire element. Introduced in: |
| border-block | Sets the border for both the block-start and block-end sides (usually top and bottom) in one declaration. This property adapts to different writing modes automatically. Introduced in: |
| border-block-color | Sets the color of borders on the block-start and block-end sides (usually top and bottom) of an element, adapting to the writing direction. Introduced in: |
| border-block-end | Sets the width, style, and color of the border at the block-end (usually bottom) of an element. This adapts to different writing modes like vertical text. Introduced in: |
| border-block-end-color | Sets just the color of the border at the block-end (usually bottom) of an element, respecting the writing direction. Introduced in: |
| border-block-end-style | Sets just the style (like solid, dashed, or dotted) of the border at the block-end (usually bottom) of an element. Introduced in: |
| border-block-end-width | Sets just the thickness of the border at the block-end (usually bottom) of an element. Introduced in: |
| border-block-start | Sets the width, style, and color of the border at the block-start (usually top) of an element, adapting to writing direction. Introduced in: |
| border-block-start-color | Sets just the color of the border at the block-start (usually top) of an element. Introduced in: |
| border-block-start-style | Sets just the style of the border at the block-start (usually top) of an element. Introduced in: |
| border-block-start-width | Sets just the thickness of the border at the block-start (usually top) of an element. Introduced in: |
| border-block-style | Sets the style (solid, dashed, dotted, etc.) for both the block-start and block-end borders (usually top and bottom) at once. Introduced in: |
| border-block-width | Sets the thickness for both the block-start and block-end borders (usually top and bottom) at once. Introduced in: |
| border-bottom | A shorthand that sets the width, style, and color of the bottom border only. For example, border-bottom: 3px dashed green;Introduced in: |
| border-bottom-color | Sets just the color of the bottom border. For example, border-bottom-color: purple;Introduced in: |
| border-bottom-left-radius | Rounds the bottom-left corner of an element. For example, border-bottom-left-radius: 10px; creates a 10-pixel curve on that corner. Introduced in: |
| border-bottom-right-radius | Rounds the bottom-right corner of an element. Larger values create more pronounced curves. Introduced in: |
| border-bottom-style | Sets just the style of the bottom border: solid, dashed, dotted, double, groove, ridge, inset, outset, or none. Introduced in: |
| border-bottom-width | Sets just the thickness of the bottom border. You can use values like thin, medium, thick, or specific measurements like 5px. Introduced in: |
| border-collapse | Controls whether table borders are separated or merged together. collapse makes adjacent cells share borders (cleaner look), while separate gives each cell its own distinct borders. Introduced in: |
| border-color | Sets the color of all four borders at once. You can specify one color for all sides, or up to four colors for top, right, bottom, and left respectively. Introduced in: |
| border-end-end-radius | Rounds the corner at the end of both the inline and block directions (usually bottom-right in left-to-right languages). This property adapts to different writing modes. Introduced in: |
| border-end-start-radius | Rounds the corner at the block-end and inline-start (usually bottom-left in left-to-right languages), adapting to writing direction. Introduced in: |
| border-image | A shorthand that uses an image as the border instead of a solid color or style. The image is sliced and stretched or repeated around the element's edges. Introduced in: |
| border-image-outset | Extends the border image area beyond the element's border box. For example, border-image-outset: 10px; makes the border image start 10 pixels outside the normal border area. Introduced in: |
| border-image-repeat | Controls how the middle sections of the border image are repeated or stretched to fill the space along each edge. Options include stretch, repeat, round, or space. Introduced in: |
| border-image-slice | Defines how to slice the border image into 9 sections (corners, edges, and middle). These slices determine which parts of the image are used for which parts of the border. Introduced in: |
| border-image-source | Specifies the image file to use as the border. For example, border-image-source: url('border.png');Introduced in: |
| border-image-width | Sets the width of the border image, which can be different from the border-width. This controls how much space the border image takes up. Introduced in: |
| border-inline | Sets the border for both the inline-start and inline-end sides (usually left and right) in one declaration, adapting to writing direction. Introduced in: |
| border-inline-color | Sets the color of borders on the inline-start and inline-end sides (usually left and right), respecting writing mode. Introduced in: |
| border-inline-end | Sets the width, style, and color of the border at the inline-end (usually right in left-to-right languages), adapting to writing direction. Introduced in: |
| border-inline-end-color | Sets just the color of the border at the inline-end (usually right side). Introduced in: |
| border-inline-end-style | Sets just the style of the border at the inline-end (usually right side). Introduced in: |
| border-inline-end-width | Sets just the thickness of the border at the inline-end (usually right side). Introduced in: |
| border-inline-start | Sets the width, style, and color of the border at the inline-start (usually left in left-to-right languages). Introduced in: |
| border-inline-start-color | Sets just the color of the border at the inline-start (usually left side). Introduced in: |
| border-inline-start-style | Sets just the style of the border at the inline-start (usually left side). Introduced in: |
| border-inline-start-width | Sets just the thickness of the border at the inline-start (usually left side). Introduced in: |
| border-inline-style | Sets the style for both the inline-start and inline-end borders (usually left and right) at once. Introduced in: |
| border-inline-width | Sets the thickness for both the inline-start and inline-end borders (usually left and right) at once. Introduced in: |
| border-left | A shorthand that sets the width, style, and color of the left border only. For example, border-left: 5px solid blue;Introduced in: |
| border-left-color | Sets just the color of the left border. Introduced in: |
| border-left-style | Sets just the style of the left border: solid, dashed, dotted, etc. Introduced in: |
| border-left-width | Sets just the thickness of the left border. Introduced in: |
| border-radius | Rounds the corners of an element. For example, border-radius: 10px; curves all four corners, while border-radius: 50%; creates a circle (if the element is square). Introduced in: |
| border-right | A shorthand that sets the width, style, and color of the right border only. Introduced in: |
| border-right-color | Sets just the color of the right border. Introduced in: |
| border-right-style | Sets just the style of the right border. Introduced in: |
| border-right-width | Sets just the thickness of the right border. Introduced in: |
| border-spacing | Controls the distance between borders of adjacent table cells when border-collapse is set to separate. For example, border-spacing: 10px; adds 10 pixels of space between cells. Introduced in: |
| border-start-end-radius | Rounds the corner at the block-start and inline-end (usually top-right in left-to-right languages), adapting to writing direction. Introduced in: |
| border-start-start-radius | Rounds the corner at the start of both the inline and block directions (usually top-left in left-to-right languages). Introduced in: |
| border-style | Sets the style of all four borders at once: solid, dashed, dotted, double, groove, ridge, inset, outset, or none. You can specify different styles for each side. Introduced in: |
| border-top | A shorthand that sets the width, style, and color of the top border only. Introduced in: |
| border-top-color | Sets just the color of the top border. Introduced in: |
| border-top-left-radius | Rounds the top-left corner of an element. Introduced in: |
| border-top-right-radius | Rounds the top-right corner of an element. |
| border-top-style | Sets just the style of the top border. |
| border-top-width | Sets just the thickness of the top border. |
| border-width | Sets the thickness of all four borders at once. You can use one value for all sides, or specify different widths for top, right, bottom, and left. Introduced in: |
| bottom | Positions an element a specific distance from the bottom edge of its positioned ancestor. Works with position: absolute, relative, or fixed. For example, bottom: 20px; places it 20 pixels up from the bottom. Introduced in: |
| box-decoration-break | Controls how an element's decoration (background, border, padding, etc.) is rendered when the element is broken across multiple lines or pages. clone repeats decorations on each fragment, while slice treats it as one continuous box. Introduced in: |
| box-reflect | Creates a reflection of an element below, above, to the left, or to the right of it, like a mirror effect. You can specify direction, offset, and add a gradient mask. Note: This is a non-standard property primarily supported in WebKit browsers. |
| box-shadow | Adds one or more shadow effects around an element. For example, box-shadow: 5px 5px 10px gray; creates a shadow 5 pixels right, 5 pixels down, with 10-pixel blur, colored gray. You can also create inset shadows that appear inside the element. Introduced in: |
| box-sizing | Changes how the width and height of an element are calculated. content-box (default) adds padding and border to the specified width, while border-box includes padding and border in the width, making sizing more predictable. Introduced in: |
| break-after | Controls whether a page break, column break, or region break should occur after an element. Values like page, column, avoid, or always control breaking behavior in print or multi-column layouts. Introduced in: |
| break-before | Controls whether a page break, column break, or region break should occur before an element, useful for controlling where content splits in print or columns. Introduced in: |
| break-inside | Controls whether a page break, column break, or region break is allowed to occur inside an element. avoid keeps the content together without breaking in the middle. Introduced in: |
| caption-side | Determines whether a table caption appears above or below the table. For example, caption-side: bottom; places the caption underneath. Introduced in: |
| caret-color | Changes the color of the text cursor (the blinking line) in text input fields. For example, caret-color: red; makes the cursor red instead of the default black. Introduced in: |
| @charset | Specifies the character encoding used in the stylesheet, usually placed at the very top. For example, @charset "UTF-8"; declares that the file uses UTF-8 encoding, ensuring special characters display correctly. Introduced in: |
| clear | Prevents an element from appearing next to floated elements. For example, clear: left; makes the element drop below any left-floated elements instead of wrapping beside them. Introduced in: |
| clip | Defines a clipping region that shows only part of an absolutely positioned element. Only the area inside the defined rectangle is visible. Note: This property is deprecated; use clip-path instead. |
| clip-path | Clips (hides) parts of an element by defining a shape. For example, clip-path: circle(50%); shows only a circular portion of the element, hiding everything outside. You can create circles, ellipses, polygons, or custom shapes. Introduced in: |
| color | Sets the text color of an element. You can use color names like blue, hex codes like #0000ff, RGB values like rgb(0, 0, 255), or other color formats. Introduced in: |
| color-scheme | Indicates which color schemes (light or dark mode) an element can be rendered with. For example, color-scheme: light dark; tells the browser the element works well in both modes, affecting default colors and form controls. Introduced in: |
| column-count | Divides an element's content into a specific number of columns, like a newspaper layout. For example, column-count: 3; splits the text into three vertical columns. Introduced in: |
| column-fill | Controls how content is distributed across columns. balance tries to equalize content height in all columns, while auto fills each column completely before moving to the next. |
| column-gap | Sets the spacing between columns in a multi-column layout or between items in a grid/flexbox. For example, column-gap: 20px; creates 20 pixels of space between columns. Introduced in: |
| column-rule | A shorthand that creates a vertical line between columns, setting its width, style, and color at once. For example, column-rule: 2px solid gray; draws a 2-pixel solid gray line between columns. Introduced in: |
| column-rule-color | Sets just the color of the line drawn between columns. |
| column-rule-style | Sets just the style (solid, dashed, dotted, etc.) of the line drawn between columns. |
| column-rule-width | Sets just the thickness of the line drawn between columns. |
| column-span | Allows an element to span across all columns, like a headline in a newspaper. For example, column-span: all; makes a heading stretch across all columns instead of staying in one. Introduced in: |
| column-width | Sets the ideal width for columns in a multi-column layout. The browser calculates how many columns fit. For example, column-width: 200px; creates as many 200-pixel-wide columns as will fit. |
| columns | A shorthand that sets both column-width and column-count at once. For example, columns: 200px 3; suggests 3 columns of 200px each, though the browser may adjust. |
| @container | Defines container queries that apply styles based on the size of a parent container rather than the viewport. This lets components adapt to their container's size, useful for responsive design. For example, styles might change when a sidebar is narrower than 400px. |
| content | Inserts generated content before or after an element when used with ::before or ::after pseudo-elements. For example, content: "★"; adds a star symbol. You can insert text, images, quotes, or counters. Introduced in: |
| counter-increment | Increases a CSS counter by a specified amount each time it's encountered. Counters are useful for automatic numbering. For example, counter-increment: section; increases the "section" counter by 1. Introduced in: |
| counter-reset | Creates or resets a CSS counter to a starting value (default is 0). For example, counter-reset: section; starts a counter named "section" that you can use for automatic numbering. Introduced in: |
| counter-set | Sets a CSS counter to a specific value without resetting other counters. Unlike counter-reset, this doesn't affect nested counters. |
| @counter-style | Defines a custom counter style with specific symbols, prefixes, or suffixes for lists or generated content. You can create unique numbering systems like custom bullet styles or non-standard numbering patterns. Introduced in: |
| cursor | Changes the mouse cursor's appearance when hovering over an element. Values include pointer (hand), text (I-beam), crosshair, move, wait, or you can specify a custom cursor image. Introduced in: |
| direction | Sets the text direction: ltr for left-to-right (like English) or rtl for right-to-left (like Arabic or Hebrew). This affects text flow and UI element positioning. Introduced in: |
| display | Defines how an element behaves in the page layout. Common values: block (takes full width, stacks vertically), inline (flows with text), flex (creates a flexbox container), grid (creates a grid container), none (hides the element completely). Introduced in: |
| empty-cells | Controls whether borders and backgrounds are shown in empty table cells. hide makes empty cells transparent, while show displays them normally. Introduced in: |
| filter | Applies visual effects to an element like blur, brightness, contrast, grayscale, or sepia. For example, filter: blur(5px); blurs the element, or filter: grayscale(100%); converts it to black and white. Multiple filters can be combined. Introduced in: |
| flex | A shorthand for flex-grow, flex-shrink, and flex-basis, controlling how a flex item grows or shrinks. For example, flex: 1; makes an item grow to fill available space equally with siblings. Introduced in: |
| flex-basis | Sets the initial size of a flex item before free space is distributed. For example, flex-basis: 200px; makes an item start at 200 pixels wide (or tall in vertical layouts) before flexing. |
| flex-direction | Sets the direction of flex items: row (horizontal, left to right), column (vertical, top to bottom), row-reverse (horizontal, right to left), or column-reverse (vertical, bottom to top). Introduced in: |
| flex-flow | A shorthand combining flex-direction and flex-wrap. For example, flex-flow: row wrap; arranges items horizontally and allows them to wrap to new lines. |
| flex-grow | Defines how much a flex item should grow relative to other items when there's extra space. For example, an item with flex-grow: 2; takes twice as much extra space as an item with flex-grow: 1;. |
| flex-shrink | Defines how much a flex item should shrink relative to others when space is tight. Higher values mean the item shrinks more. For example, flex-shrink: 0; prevents an item from shrinking at all. |
| flex-wrap | Controls whether flex items wrap to new lines when they don't fit. nowrap keeps everything on one line (default), wrap allows multiple lines, and wrap-reverse wraps in reverse order. Introduced in: |
| float | Pushes an element to the left or right side of its container, allowing text and inline elements to wrap around it. Common values are left, right, or none. Useful for text wrapping around images. Introduced in: |
| font | A shorthand property that sets multiple font properties at once: style, variant, weight, size, line-height, and family. For example, font: italic bold 16px/1.5 Arial, sans-serif;Introduced in: |
| @font-face | Defines custom fonts that can be downloaded and used on your website. You specify the font name and file location, allowing you to use fonts that aren't installed on users' computers. For example, linking to a Google Font or your own font files. Introduced in: |
| font-family | Specifies which font to use for text. You can list multiple fonts as fallbacks. For example, font-family: Arial, Helvetica, sans-serif; tries Arial first, then Helvetica, then any sans-serif font. Introduced in: |
| font-feature-settings | Enables or disables specific OpenType font features like ligatures, alternative characters, or special number styles. This gives fine control over advanced typography features available in certain fonts. Introduced in: |
| font-kerning | Controls whether kerning (adjusting space between specific letter pairs) is applied. auto lets the browser decide, normal applies kerning, and none disables it. Introduced in: |
| font-language-override | Overrides the language system used for font selection, useful when displaying text in languages that share scripts but have different typographic conventions. |
| @font-palette-values | Defines custom color palettes for color fonts (fonts with multiple color layers). You can create and customize different color schemes for the same color font. |
| font-size | Sets the size of text. You can use keywords like small, medium, large, relative units like em or rem, or absolute units like px or pt. For example, font-size: 16px; or font-size: 1.2em;Introduced in: |
| font-size-adjust | Preserves text readability when fallback fonts are used by adjusting the font size to maintain consistent x-height (the height of lowercase letters). Introduced in: |
| font-stretch | Selects a normal, condensed, or expanded face of a font. Values range from ultra-condensed to ultra-expanded. Not all fonts have these variations available. |
| font-style | Sets the font style to normal, italic (slanted cursive version), or oblique (slanted regular version). For example, font-style: italic; makes text italicized. |
| font-synthesis | Controls whether the browser should synthesize (artificially create) bold or italic versions when they're not available in the font. none prevents fake bold/italic, using only what the font provides. |
| font-variant | A shorthand for various font variant properties, allowing you to access alternate characters like small caps, different number styles, or ligatures. For example, font-variant: small-caps; |
| font-variant-alternates | Enables alternate glyphs (character designs) available in OpenType fonts, like swashes or stylistic sets. |
| font-variant-caps | Controls capitalization display styles like small caps, all small caps, petite caps, or unicase. For example, small-caps displays lowercase letters as smaller versions of capitals. Introduced in: |
| font-variant-east-asian | Controls variations specific to East Asian typography, including different number styles and character widths used in Chinese, Japanese, and Korean fonts. |
| font-variant-ligatures | Controls whether ligatures (combined letter pairs like "fi" or "fl") are used. You can enable or disable common ligatures, discretionary ligatures, and contextual alternatives. |
| font-variant-numeric | Controls the style of numbers, including old-style vs. lining figures, proportional vs. tabular spacing, diagonal vs. stacked fractions, and ordinal indicators. |
| font-variant-position | Enables typographic subscript or superscript glyphs, positioned properly for scientific or mathematical notation. |
| font-weight | Sets how thick or thin text appears. Values range from 100 (thinnest) to 900 (thickest), or keywords like normal (400), bold (700), lighter, or bolder. For example, font-weight: bold;Introduced in: |
| g ap | A shorthand that sets spacing between rows and columns in grid, flexbox, or multi-column layouts. For example, gap: 20px; adds 20 pixels of space between all items. You can specify different row and column gaps. Introduced in: |
| grid | A shorthand that sets all explicit grid properties at once: template rows, template columns, template areas, auto rows, auto columns, and auto flow. This can get complex but is useful for defining entire grid layouts. |
| grid-area | Assigns a grid item to a named grid area or specifies its placement using row and column lines. For example, grid-area: header; places an item in an area named "header". |
| grid-auto-columns | Sets the size of automatically created grid columns (columns not explicitly defined in grid-template-columns). For example, grid-auto-columns: 100px; makes auto-generated columns 100 pixels wide. |
| grid-auto-flow | Controls how auto-placed grid items flow into the grid: row (fills rows first), column (fills columns first), or with dense to fill gaps with smaller items. Introduced in: |
| grid-auto-rows | Sets the size of automatically created grid rows (rows not explicitly defined in grid-template-rows). |
| grid-column | A shorthand that specifies which grid columns an item spans across, using start and end line numbers. For example, grid-column: 1 / 3; makes an item span from column line 1 to line 3 (covering 2 columns). Introduced in: |
| grid-column-end | Specifies where an item ends in the grid column direction, using a line number or span value. |
| grid-column-start | Specifies where an item starts in the grid column direction, using a line number or name. |
| grid-row | A shorthand that specifies which grid rows an item spans across, using start and end line numbers. Introduced in: |
| grid-row-end | Specifies where an item ends in the grid row direction. |
| grid-row-start | Specifies where an item starts in the grid row direction. |
| grid-template | A shorthand that sets grid-template-rows, grid-template-columns, and grid-template-areas at once, defining the grid structure and named areas. Introduced in: |
| grid-template-areas | Defines named grid areas using a visual ASCII-art style syntax. For example, "header header" "sidebar content" "footer footer" creates a layout with named regions that items can be placed into. |
| grid-template-columns | Defines the size and number of columns in a grid. For example, grid-template-columns: 200px 1fr 1fr; creates three columns: one fixed at 200px and two flexible columns sharing remaining space equally. Introduced in: |
| grid-template-rows | Defines the size and number of rows in a grid, working like grid-template-columns but for vertical structure. |
| hanging-punctuation | Allows punctuation marks (like quotes or periods) to hang outside the text box boundary for better visual alignment, common in professional typography. Introduced in: |
| height | Sets the height of an element. You can use specific values like 200px, percentages like 50% (of parent height), or auto to let content determine height. Introduced in: |
| hyphens | Controls whether words are hyphenated when they break across lines. auto allows hyphenation based on language rules, manual only breaks at hard-coded hyphens or soft hyphens, and none prevents hyphenation. Introduced in: |
| hyphenate-character | Specifies which character to use as the hyphen when words break across lines. By default this is the hyphen character (-), but you can change it to any character. Introduced in: |
| image-rendering | Controls how images are scaled. auto uses the browser's default, crisp-edges maintains sharp edges (good for pixel art), and pixelated uses nearest-neighbor scaling for a retro pixelated look. Introduced in: |
| @import | Imports an external stylesheet into the current stylesheet. For example, @import url('styles.css'); brings in another CSS file. This must be placed at the top of the stylesheet before other rules. Introduced in: |
| initial-letter | Makes the first letter of a paragraph larger and drops it down, creating a drop cap effect like in traditional books and magazines. For example, initial-letter: 3; makes the first letter span 3 lines. Introduced in: |
| inline-size | Sets the size of an element in the inline direction, which is usually width in horizontal writing modes. This property adapts automatically for different writing directions. Introduced in: |
| inset | A shorthand that sets all four position properties (top, right, bottom, left) at once for positioned elements. For example, inset: 10px; sets all sides to 10 pixels from the edges. Introduced in: |
| inset-block | Sets both inset-block-start and inset-block-end (usually top and bottom positioning) at once, adapting to writing direction. Introduced in: |
| inset-block-end | Positions an element from the block-end edge (usually bottom) of its container, adapting to writing mode. Works like bottom but respects document direction. |
| inset-block-start | Positions an element from the block-start edge (usually top) of its container, adapting to writing mode. |
| inset-inline | Sets both inset-inline-start and inset-inline-end (usually left and right positioning) at once. Introduced in: |
| inset-inline-end | Positions an element from the inline-end edge (usually right in left-to-right languages) of its container. |
| inset-inline-start | Positions an element from the inline-start edge (usually left in left-to-right languages) of its container. |
| isolation | Creates a new stacking context for blending, isolating the element's blend modes and effects from the rest of the page. isolate creates isolation, while auto does not. Useful when using mix-blend-mode. Introduced in: |
| justify-content | Aligns items along the main axis (usually horizontal) in flex and grid containers. Values like flex-start, center, space-between, or space-around control how items are distributed horizontally. Introduced in: |
| justify-items | Aligns items along the inline axis (usually horizontal) within their grid areas. This is the default alignment for all items in a grid container. Introduced in: |
| justify-self | Overrides justify-items for a specific individual item, letting one item align differently from its siblings along the inline axis. Introduced in: |
| @keyframes | Defines the steps of an animation sequence by specifying styles at various points. For example, @keyframes slide { from { left: 0; } to { left: 100px; } } creates an animation that moves an element. You reference this with animation-name. |
| @layer | Organizes CSS into cascade layers, giving you control over specificity and the order that styles are applied. Layers let you group and prioritize different style sources, making large stylesheets more manageable. |
| left | Positions an element a specific distance from the left edge of its positioned ancestor. For example, left: 20px; moves it 20 pixels from the left. Works with position: absolute, relative, or fixed. Introduced in: |
| letter-spacing | Adjusts the space between characters (letters). Positive values spread letters apart, negative values squeeze them together. For example, letter-spacing: 2px; adds 2 pixels between each letter. Introduced in: |
| line-break | Controls how lines break in text, especially for Asian languages. Options include auto, loose, normal, strict, or anywhere, each with different rules for where line breaks are allowed. |
| line-height | Sets the height of each line of text, controlling vertical spacing between lines. For example, line-height: 1.5; makes each line 1.5 times the font size tall. Larger values create more spacious text. Introduced in: |
| list-style | A shorthand that sets the type, position, and image for list markers (bullets or numbers) all at once. For example, list-style: square inside; uses square bullets positioned inside the list. Introduced in: |
| list-style-image | Replaces the default list marker (bullet or number) with an image. For example, list-style-image: url('check.png'); uses a custom image as the bullet. |
| list-style-position | Controls whether list markers appear inside or outside the content flow. outside (default) keeps markers in the margin, while inside places them inline with the text. |
| list-style-type | Sets the style of list markers: disc (filled circle), circle (hollow circle), square, decimal (numbers), lower-alpha (a, b, c), upper-roman (I, II, III), or none (no marker). Introduced in: |
| margin | Sets the space outside an element's border on all four sides. This creates distance between elements. For example, margin: 20px; adds 20 pixels of space around all sides. You can specify different values for each side. Introduced in: |
| margin-block | Sets margins for both the block-start and block-end (usually top and bottom) at once, adapting to writing direction. Introduced in: |
| margin-block-end | Sets the margin at the block-end (usually bottom) of an element, respecting writing mode. |
| margin-block-start | Sets the margin at the block-start (usually top) of an element, respecting writing mode. |
| margin-bottom | Sets just the bottom margin (space below the element). Introduced in: |
| margin-inline | Sets margins for both the inline-start and inline-end (usually left and right) at once. Introduced in: |
| margin-inline-end | Sets the margin at the inline-end (usually right) of an element. |
| margin-inline-start | Sets the margin at the inline-start (usually left) of an element. |
| margin-left | Sets just the left margin (space to the left of the element). Introduced in: |
| margin-right | Sets just the right margin (space to the right of the element). Introduced in: |
| margin-top | Sets just the top margin (space above the element). Introduced in: |
| marker | A shorthand for SVG marker properties, setting the markers at the start, middle, and end of lines or paths. Used in SVG graphics for adding arrowheads or other symbols. Introduced in: |
| marker-end | Specifies the SVG marker to use at the end of a line or path, like an arrowhead. |
| marker-mid | Specifies the SVG marker to use at intermediate vertices along a path. |
| marker-start | Specifies the SVG marker to use at the start of a line or path. Introduced in: |
| mask | A shorthand that applies a masking image to partially or completely hide portions of an element. The mask image's transparency determines what shows through. Introduced in: |
| mask-clip | Defines the area that's affected by the mask, similar to background-clip. |
| mask-composite | Determines how multiple mask layers are combined together when you use more than one mask. |
| mask-image | Specifies the image to use as a mask. Transparent or semi-transparent areas of this image hide the corresponding areas of the element. |
| mask-mode | Sets whether the mask uses alpha channel (transparency) or luminance (brightness) to determine what's hidden. |
| mask-origin | Determines where the mask image positioning starts from, similar to background-origin. |
| mask-position | Sets where the mask image is positioned within the element. |
| mask-repeat | Controls how the mask image repeats (or doesn't), just like background-repeat. |
| mask-size | Controls the size of the mask image, similar to background-size. |
| mask-type | Specifies how an SVG mask element is processed: using luminance or alpha values. |
| max-height | Sets the maximum height an element can grow to. If content would make it taller, scrollbars appear or content overflows. For example, max-height: 500px; prevents the element from being taller than 500 pixels. |
| max-width | Sets the maximum width an element can grow to. For example, max-width: 800px; keeps the element from being wider than 800 pixels, even if there's more space available. Introduced in: |
| @media | Applies styles conditionally based on device characteristics like screen width, height, orientation, or color capabilities. For example, @media (max-width: 600px) { ... } applies styles only on screens 600 pixels wide or narrower, enabling responsive design. Introduced in: |
| max-block-size | Sets the maximum size in the block direction (usually max-height), adapting to writing mode. Introduced in: |
| max-inline-size | Sets the maximum size in the inline direction (usually max-width), adapting to writing mode. Introduced in: |
| min-block-size | Sets the minimum size in the block direction (usually min-height), adapting to writing mode. Introduced in: |
| min-inline-size | Sets the minimum size in the inline direction (usually min-width), adapting to writing mode. Introduced in: |
| min-height | Sets the minimum height an element must be. The element can grow taller but never shorter than this value. For example, min-height: 100px; ensures the element is at least 100 pixels tall. Introduced in: |
| min-width | Sets the minimum width an element must be. The element can grow wider but never narrower than this value. Introduced in: |
| mix-blend-mode | Controls how an element's content blends with the content behind it. Options like multiply, screen, overlay, or difference create various visual blending effects, similar to Photoshop layer blend modes. Introduced in: |
| @namespace | Declares XML namespaces to use in the stylesheet, primarily relevant when styling XML or SVG documents. This lets you distinguish between elements with the same name from different XML vocabularies. |
| object-fit | Controls how an image or video fits inside its container. cover fills the container (cropping if needed), contain fits completely inside (adding letterboxing if needed), fill stretches to fit, none uses original size. Introduced in: |
| object-position | Sets where an image or video is positioned within its container, working with object-fit. For example, object-position: top right; aligns the content to the top-right corner. Introduced in: |
| offset | A shorthand for motion path properties including position, path, distance, rotation, and anchor. This is used for animating elements along custom paths. Introduced in: |
| offset-anchor | Specifies which point of the element is positioned along the offset path. By default, it's the element's center. Introduced in: |
| offset-distance | Specifies how far an element has moved along its offset path. For example, offset-distance: 50%; positions the element halfway along the path. Introduced in: |
| offset-path | Defines a motion path that an element can follow. You can use SVG paths, shapes, or other path definitions to create custom movement trajectories. Introduced in: |
| offset-position | Sets the initial position of an offset path before any offset-distance is applied. |
| offset-rotate | Controls the orientation of an element as it moves along a path. auto rotates to follow the path direction, or you can specify a fixed angle. Introduced in: |
| opacity | Controls the transparency of an element. Values range from 0 (completely transparent/invisible) to 1 (completely opaque/solid). For example, opacity: 0.5; makes an element 50% transparent. Introduced in: |
| order | Changes the visual order of flex or grid items without changing HTML order. Lower numbers appear first. For example, order: -1; moves an item to the beginning. Default is 0. Introduced in: |
| orphans | Sets the minimum number of lines that must appear at the bottom of a page before a page break in printed documents. For example, orphans: 3; prevents single lines from being left orphaned. Introduced in: |
| outline | A shorthand that draws a line around an element outside its border, setting width, style, and color at once. Unlike borders, outlines don't take up space or affect layout. For example, outline: 2px solid red;Introduced in: |
| outline-color | Sets just the color of the outline. |
| outline-offset | Sets the space between an outline and the edge of the element. Positive values move the outline outward, negative values move it inward. For example, outline-offset: 5px; creates a 5-pixel gap. Introduced in: |
| outline-style | Sets just the style of the outline: solid, dashed, dotted, double, groove, ridge, inset, outset, or none. |
| outline-width | Sets just the thickness of the outline. |
| overflow | Controls what happens when content is too large for its container. visible (default) lets content overflow, hidden clips it, scroll adds scrollbars, auto adds scrollbars only when needed. Introduced in: |
| overflow-anchor | Controls scroll anchoring, a browser feature that prevents content jumps when elements load above the viewport. auto enables it, none disables it. Introduced in: |
| overflow-wrap | Controls whether words can break in the middle if they're too long to fit on one line. break-word allows breaking anywhere to prevent overflow. Previously known as word-wrap. |
| overflow-x | Controls horizontal overflow behavior only (what happens when content is too wide). Uses same values as overflow. Introduced in: |
| overflow-y | Controls vertical overflow behavior only (what happens when content is too tall). Uses same values as overflow. Introduced in: |
| overscroll-behavior | Controls what happens when you reach the edge of a scroll area and keep scrolling. contain prevents scroll chaining to parent containers, none disables bounce effects, auto uses default behavior. Introduced in: |
| overscroll-behavior-block | Controls overscroll behavior in the block direction (usually vertical), respecting writing mode. |
| overscroll-behavior-inline | Controls overscroll behavior in the inline direction (usually horizontal), respecting writing mode. |
| overscroll-behavior-x | Controls horizontal overscroll behavior only. |
| overscroll-behavior-y | Controls vertical overscroll behavior only. |
| padding | Sets the space inside an element between its content and its border on all four sides. For example, padding: 20px; adds 20 pixels of space inside the element around its content. You can specify different values for each side. Introduced in: |
| padding-block | Sets padding for both the block-start and block-end (usually top and bottom) at once, adapting to writing direction. Introduced in: |
| padding-block-end | Sets padding at the block-end (usually bottom) of an element, respecting writing mode. |
| padding-block-start | Sets padding at the block-start (usually top) of an element, respecting writing mode. |
| padding-bottom | Sets just the bottom padding (space inside the element at the bottom). Introduced in: |
| padding-inline | Sets padding for both the inline-start and inline-end (usually left and right) at once. Introduced in: |
| padding-inline-end | Sets padding at the inline-end (usually right) of an element. |
| padding-inline-start | Sets padding at the inline-start (usually left) of an element. |
| padding-left | Sets just the left padding (space inside the element on the left). Introduced in: |
| padding-right | Sets just the right padding (space inside the element on the right). Introduced in: |
| padding-top | Sets just the top padding (space inside the element at the top). Introduced in: |
| @page | Defines styles for printed pages, including margins, size, and page breaks. For example, you can set different headers/footers for left and right pages or control page dimensions for print layouts. Introduced in: |
| page-break-after | Controls page breaks after an element when printing. Values like always, avoid, left, or right control where new pages start. Note: break-after is the newer standard replacement. Introduced in: |
| page-break-before | Controls page breaks before an element when printing. Note: break-before is the newer standard replacement. Introduced in: |
| page-break-inside | Controls whether page breaks are allowed inside an element when printing. avoid keeps the content together on one page. Note: break-inside is the newer standard replacement. Introduced in: |
| paint-order | Changes the order that SVG element parts are painted: fill, stroke, and markers. For example, paint-order: stroke fill; draws the stroke on top of the fill. Introduced in: |
| perspective | Creates 3D depth by defining how far the viewer is from the 3D space. Lower values create more dramatic 3D effects. For example, perspective: 500px; sets the viewing distance to 500 pixels. Introduced in: |
| perspective-origin | Sets the position from which you view 3D transformed elements, like where your eyes are positioned. Values like center, top left, or percentage values change the viewing angle. Introduced in: |
| place-content | A shorthand combining align-content and justify-content, setting both the vertical and horizontal alignment of multiple rows/columns at once. Introduced in: |
| place-items | A shorthand combining align-items and justify-items, setting both vertical and horizontal alignment for items within their areas. Introduced in: |
| place-self | A shorthand combining align-self and justify-self, setting both vertical and horizontal alignment for a single item. Introduced in: |
| pointer-events | Controls whether an element responds to mouse/touch events. none makes an element unclickable and lets clicks pass through to elements behind it. auto enables normal interaction. Introduced in: |
| position | Determines how an element is positioned in the document. static (default) follows normal flow, relative offsets from normal position, absolute positions relative to nearest positioned ancestor, fixed positions relative to viewport, sticky toggles between relative and fixed. Introduced in: |
| @property | Registers a custom CSS property (CSS variable) with specific syntax, inheritance behavior, and initial values. This enables animation of custom properties and type checking. |
| quotes | Specifies which quotation marks to use for the element or generated quotes. For example, |
| resize | Controls whether users can manually resize an element by dragging. Values include none (can't resize), both (resize width and height), horizontal, or vertical. Often used with textareas. Introduced in: |
| right | Positions an element a specific distance from the right edge of its positioned ancestor. For example, right: 20px; places it 20 pixels from the right. Works with position: absolute, relative, or fixed. Introduced in: |
| rotate | Rotates an element by a specified angle. For example, rotate: 45deg; tilts the element 45 degrees clockwise. Unlike transform: rotate(), this is a separate property that can be animated independently. Introduced in: |
| row-gap | Sets the spacing between rows in grid, flexbox, or multi-column layouts. For example, row-gap: 15px; creates 15 pixels of vertical space between rows. |
| scale | Resizes an element larger or smaller. For example, scale: 1.5; makes it 50% bigger, while scale: 0.5; makes it half size. Unlike transform: scale(), this is a separate animatable property. Introduced in: |
| @scope | Defines a scope for CSS rules, limiting where they apply in the DOM tree. Rules inside @scope only affect elements within the specified scope boundary, helping prevent style conflicts. |
| scroll-behavior | Controls scrolling animation when clicking links or using JavaScript to scroll. smooth enables smooth animated scrolling, while auto uses instant jumps (browser default). Introduced in: |
| scroll-margin | Adds offset space around an element when it becomes a scroll target (like when clicking an anchor link). This prevents the element from being positioned right at the viewport edge. Introduced in: |
| scroll-margin-block | Sets scroll margin for both block-start and block-end (usually top and bottom), adapting to writing mode. |
| scroll-margin-block-end | Sets scroll margin at the block-end (usually bottom). |
| scroll-margin-block-start | Sets scroll margin at the block-start (usually top). |
| scroll-margin-bottom | Sets just the bottom scroll margin. |
| scroll-margin-inline | Sets scroll margin for both inline-start and inline-end (usually left and right). |
| scroll-margin-inline-end | Sets scroll margin at the inline-end (usually right). |
| scroll-margin-inline-start | Sets scroll margin at the inline-start (usually left). |
| scroll-margin-left | Sets just the left scroll margin. |
| scroll-margin-right | Sets just the right scroll margin. |
| scroll-margin-top | Sets just the top scroll margin. Introduced in: |
| scroll-padding | Adds padding inside a scroll container's viewport, creating an offset for scroll snap positions. This ensures content doesn't snap right to the container's edge. Introduced in: |
| scroll-padding-block | Sets scroll padding for both block-start and block-end (usually top and bottom). |
| scroll-padding-block-end | Sets scroll padding at the block-end (usually bottom). |
| scroll-padding-block-start | Sets scroll padding at the block-start (usually top). |
| scroll-padding-bottom | Sets just the bottom scroll padding. |
| scroll-padding-inline | Sets scroll padding for both inline-start and inline-end (usually left and right). |
| scroll-padding-inline-end | Sets scroll padding at the inline-end (usually right). |
| scroll-padding-inline-start | Sets scroll padding at the inline-start (usually left). |
| scroll-padding-left | Sets just the left scroll padding. |
| scroll-padding-right | Sets just the right scroll padding. |
| scroll-padding-top | Sets just the top scroll padding. Introduced in: |
| scroll-snap-align | Specifies where an element should snap to when scrolling stops in a scroll snap container. Values like start, center, or end determine the snap alignment point. Introduced in: |
| scroll-snap-stop | Controls whether scrolling must stop at snap points or can skip past them. always forces stopping at each snap point, preventing fast swipes from skipping items. Introduced in: |
| scroll-snap-type | Enables scroll snapping on a container and defines the strictness and direction. For example, scroll-snap-type: x mandatory; makes horizontal scrolling snap strictly to defined points. Introduced in: |
| scrollbar-color | Sets the colors of the scrollbar thumb (the draggable part) and track (the background). For example, scrollbar-color: blue lightgray; makes the thumb blue and track light gray. Introduced in: |
| shape-outside | Defines a shape that text and inline content can wrap around, instead of wrapping around the element's rectangular box. You can create circular, polygonal, or custom-shaped text wrapping. Introduced in: |
| @starting-style | Defines initial styles for elements before animations or transitions begin, particularly useful for animating elements entering the DOM. This enables smooth transitions from an initial state. |
| @supports | Applies styles conditionally based on whether the browser supports specific CSS features. For example, @supports (display: grid) { ... } only applies styles if the browser understands CSS Grid, enabling progressive enhancement. Introduced in: |
| tab-size | Sets the width of tab characters in preformatted text. For example, tab-size: 4; makes each tab equal to 4 spaces. Useful for displaying code. Introduced in: |
| table-layout | Controls the algorithm used to lay out table cells. auto sizes columns based on content, while fixed uses the first row to determine widths, rendering faster for large tables. Introduced in: |
| text-align | Aligns text horizontally within its container: left, right, center, or justify (aligns to both edges with adjusted spacing). Introduced in: |
| text-align-last | Controls alignment of the last line of text or a line right before a forced line break, which can be different from other lines. For example, center centers just the last line. |
| text-combine-upright | Combines multiple characters into a single character space in vertical writing modes, useful for numbers or abbreviations in vertical Asian text. |
| text-decoration | A shorthand that adds decorative lines to text, setting line type, color, style, and thickness at once. For example, text-decoration: underline wavy red; creates a wavy red underline. Introduced in: |
| text-decoration-color | Sets just the color of text decoration lines (underline, overline, or line-through). |
| text-decoration-line | Specifies the type of line: underline, overline (above text), line-through (strikethrough), or combinations like underline overline. |
| text-decoration-style | Sets the style of the decoration line: solid, double, dotted, dashed, or wavy. |
| text-decoration-thickness | Controls the thickness of the decoration line. You can use auto, specific measurements like 2px, or relative values. Introduced in: |
| text-emphasis | A shorthand that adds emphasis marks above or below text (common in East Asian typography), setting both the style and color. Introduced in: |
| text-emphasis-color | Sets just the color of text emphasis marks. Introduced in: |
| text-emphasis-position | Determines where emphasis marks appear: above or below the text, and whether they appear before or after Ruby text. Introduced in: |
| text-emphasis-style | Defines the style of emphasis marks: filled or open circles, dots, triangles, or custom strings. |
| text-indent | Indents the first line of text in a block. For example, text-indent: 30px; moves the first line 30 pixels to the right, like a paragraph indent in a book. Negative values create hanging indents. Introduced in: |
| text-justify | Controls the justification method used when text-align: justify; is applied, defining how spacing is distributed. Options include auto, inter-word, inter-character, or none. |
| text-orientation | Sets the orientation of characters in vertical writing modes: mixed (default), upright (all characters upright), or sideways (all characters rotated 90 degrees). Introduced in: |
| text-overflow | Controls what happens when text overflows its container. clip cuts it off, while ellipsis shows "..." to indicate hidden content. Only works with overflow: hidden. Introduced in: |
| text-shadow | Adds shadow effects to text. For example, text-shadow: 2px 2px 5px gray; creates a shadow 2 pixels right, 2 pixels down, with 5-pixel blur, colored gray. Multiple shadows can be applied. Introduced in: |
| text-transform | Changes text capitalization: uppercase (ALL CAPS), lowercase (all lowercase), capitalize (First Letter Of Each Word), or none (leaves text as-is). |
| text-underline-offset | Controls the distance between text and its underline. For example, text-underline-offset: 5px; moves the underline 5 pixels below the text. Introduced in: |
| text-underline-position | Sets where underlines appear: auto, under (below all descenders), left/right (for vertical text), or combinations. Introduced in: |
| top | Positions an element a specific distance from the top edge of its positioned ancestor. For example, top: 20px; moves it 20 pixels down from the top. Works with position: absolute, relative, or fixed. Introduced in: |
| transform | Applies 2D or 3D transformations to an element like rotating, scaling, skewing, or translating (moving). For example, transform: rotate(45deg) scale(1.2); rotates and enlarges an element. Multiple transformations can be combined. Introduced in: |
| transform-origin | Sets the point around which transformations occur. By default it's the center (50% 50%), but you can change it to corners or any point. For example, transform-origin: top left; makes rotations pivot from the top-left corner. |
| transform-style | Controls whether child elements are positioned in 3D space or flattened. preserve-3d creates a true 3D scene where children can be at different depths, while flat collapses everything to 2D. Introduced in: |
| transition | A shorthand that creates smooth animations when properties change, setting property, duration, timing function, and delay. For example, transition: all 0.3s ease-in-out; animates all property changes over 0.3 seconds. Introduced in: |
| transition-delay | Sets how long to wait before a transition starts after a property changes. For example, transition-delay: 1s; waits 1 second before beginning the animation. Introduced in: |
| transition-duration | Sets how long a transition animation takes to complete. For example, transition-duration: 0.5s; makes the animation last half a second. Introduced in: |
| transition-property | Specifies which CSS properties should animate when they change. For example, transition-property: width, height; only animates width and height changes, or all animates everything. Introduced in: |
| transition-timing-function | Defines the speed curve of a transition, controlling acceleration and deceleration. Values like ease, linear, ease-in, ease-out, or custom cubic-bezier curves create different animation feels. Introduced in: |
| translate | Moves an element from its current position. For example, translate: 50px 100px; moves it 50 pixels right and 100 pixels down. Unlike transform: translate(), this is a separate animatable property. Introduced in: |
| unicode-bidi | Controls how bidirectional text (mixing left-to-right and right-to-left languages) is handled. Values like normal, embed, bidi-override, or isolate affect how text direction is processed. Introduced in: |
| user-select | Controls whether users can select (highlight) text. none prevents text selection, text allows it, and all selects the entire element with one click. Useful for buttons or UI elements that shouldn't be highlighted. Introduced in: |
| vertical-align | Aligns inline or table-cell elements vertically. Values include baseline, top, middle, bottom, text-top, text-bottom, or specific lengths. For example, vertical-align: middle; centers content vertically in a table cell. Introduced in: |
| visibility | Controls whether an element is visible. visible shows it, hidden hides it but still takes up space (unlike display: none), and collapse is for table rows/columns. Introduced in: |
| white-space | Controls how whitespace (spaces, tabs, line breaks) inside an element is handled. normal collapses whitespace, nowrap prevents line breaks, pre preserves all whitespace like the <pre> tag, pre-wrap preserves whitespace but allows wrapping. Introduced in: |
| widows | Sets the minimum number of lines that must appear at the top of a page after a page break in printed documents. For example, widows: 3; prevents fewer than 3 lines from being separated at the top of a new page. Introduced in: |
| width | Sets the width of an element. You can use specific values like 300px, percentages like 50% (of parent width), or auto to let content or other factors determine width. Introduced in: |
| word-break | Controls how words break when they reach the end of a line. normal uses standard rules, break-all allows breaks anywhere in a word (prevents overflow), keep-all prevents breaks in CJK (Chinese/Japanese/Korean) text. Introduced in: |
| word-spacing | Adjusts the space between words. Positive values increase spacing, negative values decrease it. For example, word-spacing: 5px; adds 5 extra pixels between each word. Introduced in: |
| word-wrap | An older name for overflow-wrap. Controls whether long words can break in the middle to prevent overflow. break-word allows breaking anywhere necessary. |
| writing-mode | Changes the text flow direction. horizontal-tb is the default (left-to-right, top-to-bottom like English), vertical-rl flows top-to-bottom with columns right-to-left (like traditional Chinese), vertical-lr flows top-to-bottom with columns left-to-right. Introduced in: |
| z-index | Controls the stacking order of positioned elements (which ones appear on top of others). Higher numbers appear in front. For example, an element with z-index: 10; appears above one with z-index: 5;. Only works with positioned elements (not position: static). Introduced in: |
| zoom | Scales an element and its contents larger or smaller. For example, zoom: 1.5; makes everything 150% of original size, while zoom: 0.75; makes it 75%. Note: This is a non-standard property; use transform: scale() for better cross-browser support. Introduced in: |
CSS Dictionary
A beginner-friendly CSS reference that clearly explains each property, includes an alphabetical filter for easy lookup, and shows browser support to help learners confidently style for the web.
Learn CSS
or