CSS Property Reference

Last updated: 2026-09-13

CSS Property Reference

Alphabetical list of 153 CSS properties with descriptions.

A
aspect-ratio	The aspect-ratio property forces an element to keep a fixed width-to-height ratio, eliminating the need for the old padding-percentage hack. Its default value, auto, uses the element's intrinsic ratio, as with images. It is a relatively new CSS feature that greatly simplifies responsive containers for video and cards.
align-items	The align-items property sets the alignment of all flex items on the cross axis, controlling their position in the direction perpendicular to the main axis. Its default value is stretch, which makes the items stretch to fill the container height along the cross axis. The property is commonly used for vertical centering, top alignment, bottom alignment and baseline alignment.
animation	The animation property is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. Combined with @keyframes, it defines multi-stage, looping, pausable animation sequences. Unlike transition, animation plays automatically with no trigger, making it ideal for loaders, carousels, breathing effects, and other continuous visuals.
align-self	The align-self property sets the cross-axis alignment of a single flex item, overriding the container’s align-items default. Its default value is auto, which inherits the container’s align-items value. With it, one item can align differently from the others - for example one item centered while the rest are top-aligned - which is very useful in navigation bars and card layouts.
align-content	The align-content property sets how multiple lines of flex items are aligned and spaced on the cross axis. It only takes effect when wrapping (flex-wrap: wrap) produces more than one line. It works like justify-content but acts on the cross axis and distributes the space between the lines. On a single line the property does nothing; use align-items instead.
animation-duration	The animation-duration property sets how long an animation takes to complete one full cycle. Shorter values make the animation faster; longer values make it slower. It is part of the animation shorthand and, when used on its own, overrides the duration set by the shorthand.
animation-timing-function	The animation-timing-function property defines how the speed of an animation changes over time — whether it runs at a constant rate, starts fast and slows down, or feels bouncy. By controlling the time distribution of intermediate frames, it makes motion feel more physical or more stylized, and is a key property for polished animation quality.
appearance	The appearance property controls whether an element uses the browser's native appearance — the default rendering of form controls. When set to none, the element drops its native look and its styling is fully controlled by CSS, making it a key property for customizing form controls.
B
box-sizing	The box-sizing property determines how width and height are calculated and is the key to understanding the CSS box model. The default value, content-box, sizes only the content area, with padding and border added on top; border-box includes padding and border within the specified width and height, which is more intuitive. Modern projects commonly set border-box globally.
border	The border shorthand property is one of the most commonly used in CSS, letting you set an element's border width, style, and color in a single declaration. The border wraps around the element's content, just inside the padding, and is a key part of the box model. With border you can quickly give any element a visible outline.
border-width	border-width sets the thickness of an element's border. You can use the predefined keywords thin, medium, and thick, or explicit length values such as px or em. Used on its own, it controls only the width, leaving the style and color untouched.
border-style	border-style defines the appearance of the border line, such as solid, dashed, or dotted. It is the key to whether a border is visible at all — even with border-width and border-color set, a border stays invisible when border-style is none. CSS provides 10 different line styles to choose from.
border-color	border-color sets the color of an element's border. It accepts every CSS color format, including color names, hex values, rgb(), rgba(), hsl(), and more. Used on its own, it only affects the border color, not the width or style.
border-radius	border-radius rounds the sharp corners of an element, making it one of the most used decorative properties in modern UI design. It accepts length or percentage values, and the larger the value, the more pronounced the rounding. When the radius reaches half the side length or beyond, the corner becomes a semicircle or a full circle.
background-color	background-color sets the background color of an element and is one of the most fundamental properties in page design. It accepts every CSS color value, and the transparent keyword gives a see-through background. The property is not inherited, and every element's background is transparent by default.
background	background is the shorthand for the background properties, letting you set the background color, image, position, size, repetition, and more in a single declaration. The shorthand keeps code concise, and any sub-property you omit is reset to its default value. It is one of the most widely used shorthands in CSS.
background-image	background-image sets one or more background images on an element, supporting url() paths and gradient functions. Multiple backgrounds are comma-separated, with earlier images layered on top. It is usually used together with background-size and background-position.
background-position	background-position sets the starting position of a background image within its element, which defaults to the top-left corner (0% 0%). It accepts keywords (left, center, right, top, bottom), length values, and percentages. It is usually combined with background-image to place a background precisely.
background-size	background-size controls the dimensions of a background image and was introduced in CSS3. It supports auto (the image's intrinsic size), cover (cover the entire container), contain (show the whole image inside the container), as well as explicit length and percentage values. The property is very useful in responsive design.
box-shadow	The box-shadow property adds one or more shadow layers around or inside an element's border box, giving the element depth and hierarchy on the page. It is a core property for modern UI effects such as floating cards and pressed buttons, and supports offset, blur radius, spread radius, and color.
border-image	border-image lets you use an image to draw an element's border instead of a solid or dashed line. The image is sliced into a nine-part grid (four corners, four edges, and a center area) and each part is mapped to the corresponding border area. It is a powerful tool for complex decorative borders.
background-attachment	background-attachment decides whether a background image scrolls with the page. The default scroll means the background scrolls with the element's content; fixed pins the background to the viewport, producing a parallax effect; local makes the background scroll with the element's internal content. It is often used for visual effects.
background-clip	background-clip controls the painting area of a background, deciding within which box-model region the background (color or image) is shown. The default border-box extends the background under the border, padding-box clips it to the padding area, and content-box shows it only in the content area. CSS3 also added the text value for text clipping effects.
background-origin	background-origin sets the reference area for background image positioning, determining the baseline of background-position. The default padding-box positions the background relative to the padding area, border-box relative to the border area, and content-box relative to the content area. It is often used together with background-clip.
background-blend-mode	background-blend-mode sets the blending mode between an element's background images, and between background images and the background color. It supports modes such as multiply, screen, and overlay, similar to Photoshop layer blending. Added in CSS3, it is great for rich visual effects.
backdrop-filter	backdrop-filter applies filter effects (such as blur or brightness) to the area behind an element, and is the standard way to build frosted-glass effects. Unlike filter, it affects the content below the element rather than the element itself. Support in modern browsers is good, but the element's background must be at least partially transparent for the effect to be visible.
bottom	The bottom property defines the offset of a positioned element from the bottom edge of its containing block, measured upward. It only applies to non-static positioned elements and is typically used with absolute or fixed positioning to align elements to the bottom or stretch their height.
backface-visibility	The backface-visibility property controls whether an element is visible when, after a 3D rotation, its back faces the viewer. The default value visible shows the front content mirrored on the back; with hidden, the element is invisible when its back faces the viewer. This is commonly used for card flips, cubes, and other 3D effects that distinguish the front from the back.
box-decoration-break	The box-decoration-break property controls how an element's decorations, such as background, border, and padding, render at a break point like a line wrap or page break. The default value, slice, renders the decoration as if it were cut; clone renders a complete decoration for each fragment. It mainly affects how inline elements look across line breaks and print pagination.
C
color	The color property sets the foreground color of an element's text and is one of the most frequently used CSS properties. It accepts color keywords, hex values, RGB, HSL, and many other color formats. The property is inherited by child elements, so it is usually set on a parent to unify the color of a whole block of text.
cursor	The cursor property controls the cursor shape shown when the mouse pointer hovers over an element, and it is an important visual cue for interactivity. By choosing different cursor types — such as pointer, text, or not-allowed — you can tell users at a glance whether an element is clickable, draggable, or disabled.
clear	The clear property controls whether an element is allowed to sit next to floated elements on its left, right, or both sides. When set to left, right, or both, the element moves below the relevant floats. It is an important tool for preventing layout breakage in float-based layouts.
columns	The columns property is the shorthand for column-count and column-width, splitting an element's content into multiple columns automatically, similar to newspaper typography. It is often used to present long text in several columns for better readability.
column-count	The column-count property specifies the number of columns an element's content is split into. Part of CSS Multi-column Layout, it is typically combined with column-gap and column-rule to produce newspaper-style multi-column typesetting.
column-gap	The column-gap property sets the gap between columns in a multi-column layout. As a key part of CSS Multi-column Layout, a well-chosen gap noticeably improves the readability and appearance of multi-column text.
column-rule	The column-rule property is the shorthand for column-rule-width, column-rule-style, and column-rule-color, drawing a rule between columns in a multi-column layout. Similar to border, it renders only within the column gap, enhancing the visual separation of multi-column text.
column-span	The column-span property specifies whether an element spans multiple columns. Set to all, the element spans every column; it is commonly used for headings or subheadings in a multi-column layout so they stand apart visually from the columned content.
column-width	The column-width property specifies the ideal width of each column in a multi-column layout. The browser derives the actual column count from the container's width and this value, with content flowing into the columns adaptively; it is a good fit for flexible multi-column typesetting.
clip-path	The clip-path property clips an element into a specified geometric shape — such as a circle, polygon, or ellipse — showing only the part inside the shape and hiding everything outside. Unlike the traditional rectangular clipping of overflow: hidden, clip-path creates visible areas of any shape, making it a powerful tool for creative layouts and visual effects.
content	The content property inserts generated content before or after an element and is required by the ::before and ::after pseudo-elements. It can insert strings, images, counter values, or attribute values, and is often used to add decorative content, clear floats, or show link URLs without changing the HTML.
counter-increment	counter-increment increases the value of one or more CSS counters and is one of the core mechanisms behind automatic numbering. Each time an element matches the selector, the specified counter is increased by the given step (1 by default). It needs counter-reset and content's counter() function to produce complete automatic numbering.
counter-reset	counter-reset creates a new CSS counter and initializes it to the given value (0 by default). It is the first step of automatic numbering and is usually set on a parent element. Combined with counter-increment and content's counter() function, it can produce complex multi-level numbering systems.
caret-color	The caret-color property sets the color of the caret — the blinking vertical bar — in editable elements such as inputs and text areas. Customizing the caret color lets form elements match the page palette or highlights the current input position.
color-scheme	The color-scheme property tells the browser which color schemes (light/dark) an element supports, letting the browser pick suitable default colors for rendering the element's native controls such as scrollbars and form elements. It is an important property for dark-mode adaptation.
D
display	The display property defines how an element is presented in the page, whether it behaves as a block-level element, an inline element, or uses modern layout models such as Flex or Grid. It is one of the most fundamental and powerful properties in CSS layout, capable of changing almost any element's behavior in the document flow.
direction	The direction CSS property sets the text writing direction — left-to-right (ltr) or right-to-left (rtl). It mainly affects right-to-left languages such as Arabic and Hebrew and also changes text alignment, scrollbar position, and layout flow. For multilingual sites, prefer the dir attribute on the HTML element over the CSS property.
E
empty-cells	empty-cells controls whether empty cells (cells with no content or only whitespace) show their borders and background. The default show renders them normally; hide hides them for a cleaner look. The property only applies to tables with border-collapse: separate.
F
font	The font CSS shorthand property sets all font-related sub-properties in a single declaration: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. It keeps stylesheets concise, but font-size and font-family are mandatory and the sub-properties must follow a fixed order.
font-family	The font-family CSS property specifies a prioritized list of font family names and/or generic family names for an element. The browser uses the first available font in the list, walking down the chain when a font is missing.
font-size	The font-size CSS property sets the size of the text. It accepts absolute keywords, fixed lengths, or relative units such as em and rem, and is one of the most frequently used text styling properties.
font-weight	The font-weight CSS property sets the thickness of the text. It accepts named keywords as well as numeric values from 1 to 1000, and bold text is commonly used for headings and emphasis.
font-style	The font-style CSS property sets whether text is rendered in an italic or oblique style. It accepts three values — normal, italic, and oblique — and is often used for quotations, emphasis, and special typography.
float	The float property takes an element out of the normal flow and floats it left or right until its edge touches the containing block or another floated element. Originally designed for wrapping text around images, it was later used heavily for multi-column layouts; now that Flexbox and Grid are widespread, it has returned to its original purpose.
flex	The flex property is the core shorthand of the CSS Flexible Box Layout module. It sets how a flex item grows, shrinks, and how much space it occupies relative to the remaining space in the container. It is a shorthand for flex-grow, flex-shrink and flex-basis, which control the item’s growth factor, shrink factor and initial main size. With flex, common layouts such as equal-width columns, fluid widths and flowing arrangements are easy to build.
flex-direction	The flex-direction property defines the direction of the main axis in a flex container, that is, the direction in which flex items are laid out. By default, items are arranged horizontally from left to right (row). The property can switch the layout to vertical or to a reversed order. It is the most fundamental direction control in flexbox and determines which axis justify-content and align-items act upon.
flex-grow	The flex-grow property sets the growth factor of a flex item. It decides how much of the remaining space in the container the item is allowed to take. The default value is 0, which means the item does not grow and keeps its original size. Larger values give the item a bigger share: the remaining space is distributed among all items in proportion to their flex-grow values.
font-variant	The font-variant CSS property applies font variant effects such as small-caps, which renders lowercase letters as reduced-size capital letters. The small-caps value is the most widely supported feature.
font-size-adjust	The font-size-adjust CSS property keeps the x-height (the height of a lowercase x) consistent when fonts fall back, preventing a large visual size jump when different fonts mix. It is a CSS3 property.
font-stretch	The font-stretch CSS property selects a condensed or expanded variant of a font, from ultra-condensed to ultra-expanded across nine levels. It only takes effect if the font actually provides a matching width variant.
flex-wrap	The flex-wrap property controls whether flex items are forced onto a single line or wrapped onto multiple lines. Its default value is nowrap, which keeps all items on one line even if they get compressed or overflow the container. Setting wrap lets the items flow onto the next line, which is very useful for responsive layouts and multi-column card arrangements.
flex-flow	flex-flow is a shorthand for the flex-direction and flex-wrap properties. It defines the direction of the main axis and whether the items wrap, in a single declaration. Since the two properties are almost always used together, flex-flow keeps the code more concise. Its default value is row nowrap, that is, horizontal arrangement without wrapping.
flex-shrink	The flex-shrink property sets the shrink factor of a flex item, deciding how much the item shrinks when the container does not have enough space. Its default value is 1, meaning items shrink as needed. A value of 0 keeps the item at its original size even when space runs out. Larger values make the item shrink more when space is tight.
flex-basis	The flex-basis property sets the initial main size of a flex item before the remaining space is distributed - the item’s “ideal size”. Its default value is auto, which sizes the item from its content or from a set width/height. When a specific length is used, the item starts from that size and then grows or shrinks according to flex-grow and flex-shrink.
filter	The filter property applies graphic effects to an element — such as blur, brightness, contrast, and grayscale — like Photoshop filters. It acts on the element's rendered output and affects both the element and all of its children, making it a common tool for image processing and visual effects.
G
grid-template-columns	The grid-template-columns property defines the number and width of the column tracks in a grid container. By specifying the size of each column track you control the column structure precisely, which makes it one of the most central settings of CSS Grid. It supports fixed lengths, percentages, the fr unit, and powerful functions such as repeat() and minmax().
grid	The grid property is the CSS Grid shorthand. In one declaration it sets the explicit tracks, the auto tracks and the auto-flow direction of a grid container. It is the sum of the grid-template and grid-auto series and the most complete grid shorthand when you want to describe the whole grid structure.
gap	The gap property sets the spacing between rows and columns in flex and grid layouts. It is a shorthand for row-gap and column-gap. Gap only adds space between items and never at the container edges, which makes it cleaner and more predictable than margins. It removes the usual hassle of clearing the first and last margins in traditional margin-based spacing.
grid-template-rows	The grid-template-rows property defines the number and height of the row tracks in a grid container. By specifying the size of each row track you control the row structure precisely. Used together with grid-template-columns, it forms the basic skeleton of the grid. It supports fixed lengths, percentages, the fr unit, and functions such as minmax().
grid-template-areas	The grid-template-areas property lets you define the grid layout structure visually with named areas. Each string represents one row, and each identifier in the string represents the area a cell belongs to; adjacent cells with the same name merge into one area automatically. It greatly improves the readability of grid layouts and is especially suited to whole-page designs.
grid-column	grid-column is the shorthand for grid-column-start and grid-column-end. It positions a grid item along the horizontal direction. By specifying the start and end grid-line numbers, you control how many columns the item spans. It is a key property for building flexible grid layouts.
grid-row	grid-row is the shorthand for grid-row-start and grid-row-end. It positions a grid item along the vertical direction. By specifying the start and end grid-line numbers, you control how many rows the item spans. Together with grid-column, it gives precise control over an item’s position and size.
grid-area	grid-area is a shorthand that places a grid item by setting all four values at once: grid-row-start, grid-column-start, grid-row-end and grid-column-end. It works with grid-line numbers for precise placement, or with a named area defined in grid-template-areas. It is the most flexible property for grid placement.
grid-auto-columns	The grid-auto-columns property controls the width of the implicitly created column tracks in a grid container. When a grid item is placed into a column that grid-template-columns did not define, the browser creates an implicit column automatically; this property sets the size of those auto-created columns. It is very useful when dealing with dynamic content or an unknown number of grid items.
grid-auto-rows	The grid-auto-rows property controls the height of the implicitly created row tracks in a grid container. When a grid item is placed into a row that grid-template-rows did not define, the browser creates an implicit row automatically; this property sets the size of those auto-created rows. It ensures that rows which were not explicitly defined still have a consistent height.
grid-auto-flow	The grid-auto-flow property controls how grid items that are not explicitly positioned are placed automatically. It decides whether the items fill by row or by column, and whether the dense packing mode is enabled to fill the gaps in the layout. The property has a direct impact on the overall ordering of the grid.
H
height	The height property sets the height of an element's content area and, along with width, is a core sizing property of the CSS box model. Its default value, auto, lets the browser compute the height from the content, which is the most common and recommended approach. Percentage heights only take effect when the parent has an explicit height; otherwise they resolve to 0.
hyphens	The hyphens CSS property controls whether the browser uses hyphens (-) to break words inside lines, commonly used in multi-syllable languages like English. With automatic hyphenation enabled, the browser inserts hyphens at suitable positions based on a language dictionary so text wraps more naturally at the container edge and ragged gaps are reduced.
I
isolation	The isolation property controls whether an element creates a new stacking context. When set to isolate, the element forms an independent blending environment so that its children's mix-blend-mode blends only with content inside the element, never leaking to elements outside. It is a key property for precisely controlling the scope of blend modes.
inset	The inset property is the shorthand for the four offset properties top, right, bottom, and left, setting a positioned element's offsets on all sides at once. Its default value, auto, means no offset. It only applies to elements with a non-static position, and its syntax mirrors margin, supporting 1 to 4 values.
J
justify-content	The justify-content property sets how flex items are aligned along the main axis and how the space between items and between items and the container edges is distributed. It is the most frequently used alignment property in flexbox and supports left, right, center, space-between, space-around and space-evenly arrangements. The main axis is determined by flex-direction.
justify-items	The justify-items property sets the default alignment of all items in the inline (row) axis inside the container. It applies mainly to grid layouts and has no effect in flexbox. It is the per-item counterpart of justify-content: it aligns each item within its own grid cell rather than the items as a group. Its default value is stretch, which stretches the items to fill the cell.
justify-self	The justify-self property sets the inline axis alignment of a single item, overriding the container’s justify-items default. It applies mainly to grid layouts and has no effect in flexbox. With it, one item can align independently inside its cell without affecting how the other items align.
L
line-height	The line-height CSS property sets the vertical space between lines of text. A well-chosen line height significantly improves readability of long-form text, typically around 1.5 times the font size.
letter-spacing	The letter-spacing CSS property sets the spacing between characters in text. Positive values increase the gap and negative values tighten it. It is often used in headings or to improve readability of uppercase English text.
left	The left property defines the offset of a positioned element from the left edge of its containing block, measured rightward. It only applies to non-static positioned elements and is among the most commonly used offset properties, typically paired with absolute or fixed positioning for precise left-side placement.
list-style	list-style is the shorthand for list-style-type, list-style-position, and list-style-image, setting every aspect of list item markers at once. The default is disc outside none. It is the most efficient way to control list appearance, commonly used to quickly customize or reset list styles.
list-style-type	list-style-type sets the marker in front of list items, such as a filled dot, hollow circle, number, or Roman numeral. The default is disc. It supports many predefined markers and custom strings, making it the most commonly used property for controlling a list's visual appearance.
list-style-position	list-style-position controls whether the list marker sits inside or outside the list item's content block. The default outside places the marker outside the content block so the first line of text aligns cleanly; inside pulls the marker into the content block so text wraps around it. It affects the list's flow and indentation.
list-style-image	list-style-image replaces the default marker (dot, number, etc.) with a custom image on list items. The default value none means no image is used. It is often used to give lists branded small icons or decorative arrows for a richer look.
M
min-width	The min-width property sets the minimum width of an element, preventing it from being compressed too small when the container narrows. Its default value, 0, means there is no lower limit. It is often used together with width and max-width and is an important tool for protecting readability in responsive layouts.
max-width	The max-width property sets the maximum width of an element, preventing it from becoming too wide on large screens and hurting readability. Its default value, none, means there is no upper limit. It is a core tool for responsive design, often paired with width:100% so media elements adapt without exceeding their intrinsic size.
min-height	The min-height property sets the minimum height of an element, ensuring it keeps a certain height even when its content is short. Its default value, 0, means there is no lower limit. It is often used to keep page sections visually consistent or to pin a footer to the bottom of the page.
max-height	The max-height property sets the maximum height of an element, preventing it from growing too tall and breaking the layout. Its default value, none, means there is no upper limit. It is often combined with overflow:auto so content taller than the limit shows a scrollbar, a common pattern for fixed-height scrollable regions.
margin	The margin property sets the space around an element, that is, the distance between its border and neighboring elements. It is one of the most widely used box-model properties, serving to control spacing between elements, center elements horizontally, and add breathing room. Margins can be fixed lengths, percentages, or auto for browser-computed values.
mix-blend-mode	The mix-blend-mode property controls how an element's content blends its colors with the content beneath it (a background or adjacent elements), similar to layer blend modes in Photoshop. It lets text and images produce rich color compositing against a background, and is often used in posters, banners, and artistic page design.
O
overflow	The overflow property controls what happens when content exceeds its container's bounds and is the core tool for dealing with overflowing content. The default value, visible, lets overflowing content show; hidden clips it; scroll always displays scrollbars; and auto shows scrollbars only when needed, which is the most commonly used value.
outline	outline draws a line around an element, outside its border, and is mainly used to indicate the focused state. Unlike border, outline takes up no space and does not affect the element's size or the page layout. It is a shorthand that sets the outline color, style, and width at once.
opacity	The opacity property sets the overall transparency of an element, with values ranging from 0 to 1. 0 is fully transparent and 1 is fully opaque. Unlike a transparent background, opacity affects the element and all of its content, making it common for fade-in/out effects and visual hierarchy.
overflow-x	The overflow-x property controls specifically how content overflowing a container horizontally is handled and accepts the same values as overflow. The default value, visible, lets the overflow show. It is commonly used to disable horizontal page scrolling or to make a region scrollable only horizontally.
overflow-y	The overflow-y property controls specifically how content overflowing a container vertically is handled and accepts the same values as overflow. The default value, visible, lets the overflow show. It is the most commonly used overflow control and is often paired with max-height for scrollable regions of a fixed height.
outline-offset	outline-offset controls the distance between the outline and the element's border edge. A positive value pushes the outline outward, away from the element; a negative value pulls it inward, closer to or even inside the element. It is usually paired with outline to refine the visual effect.
order	The order property sets the display order of flex items inside a container. Its default value is 0. Items with smaller values appear first; items with equal values are ordered by their DOM position. The property changes the visual order only, never the DOM structure, so it also affects the reading order of screen readers and the Tab-key focus order. Use it carefully.
object-fit	The object-fit property controls how the content of a replaced element such as an <img> or <video> fits into its specified width and height. When the element's aspect ratio differs from its content, object-fit decides whether to stretch, crop while keeping the ratio, or show everything — an indispensable tool for responsive image layouts.
object-position	The object-position property controls where the content of a replaced element such as an <img> or <video> is shown inside its container. When object-fit leaves space or crops the content, object-position adjusts the alignment focus so key parts stay inside the visible area.
overscroll-behavior	The overscroll-behavior property controls what happens when a scrolling container reaches its boundary — for example, whether the scroll event passes to the parent container (scroll chaining) or triggers a browser default like page refresh or history navigation. It is a key property for solving the scroll-penetration problem in nested scrolling containers.
orphans	orphans controls the minimum number of lines from the end of a paragraph that must remain at the top of a new page when printing, defaulting to 2. It is a CSS paged-media property that prevents a paragraph's last line from appearing alone at the bottom of the previous page (an 'orphan'), improving printed readability.
P
padding	The padding property sets the space between an element's content and its border. A core part of the CSS box model, it is commonly used to give content breathing room inside a container, enlarge click targets, and make content stand out against a background. Padding values can only be lengths or percentages, never negative, and padding never collapses.
position	The position property specifies how an element is positioned, whether it stays in the document flow or is offset relative to some reference point. Combined with the top, right, bottom, and left properties, it enables relative, absolute, fixed, and sticky positioning for common layout effects.
pointer-events	The pointer-events property controls whether an element can become the target of pointer events such as clicks and hovers. When set to none, the element completely ignores pointer events and they pass through to elements below it. It is a common tool for click-through, disabling interaction, and complex layered UI interactions.
place-items	place-items is a shorthand for align-items and justify-items. On a grid container it sets how every grid item aligns inside its own cell, in one declaration. It controls both the vertical (align) and horizontal (justify) alignment at the same time, which makes it a convenient tool for centering or aligning grid content.
place-content	place-content is a shorthand for align-content and justify-content. On a grid container it controls how the entire grid content area aligns relative to the container. When the total size of the grid tracks is smaller than the container, this property decides how the leftover space is distributed. It is key for centering and distributing the whole grid.
place-self	place-self is a shorthand for align-self and justify-self. It controls the alignment of a single grid item inside its cell. Unlike place-items, place-self is set on the individual grid item and overrides the container-level place-items setting, which handles special alignment needs for one item.
perspective	The perspective property defines the strength of the perspective in 3D transforms — the distance from the viewer's eye to the z=0 plane. Smaller values produce a stronger effect (more exaggerated near-large-far-small), while larger values flatten the perspective. The property must be set on the parent of the element applying the 3D transform, and is the foundation of realistic 3D scenes.
perspective-origin	The perspective-origin property defines the viewer's position for 3D perspective — where the vanishing point projects onto the element. The default is the center of the element (50% 50%). Adjusting it changes the angle from which the 3D scene is viewed — from above, from the side, and so on — and it works together with perspective.
Q
quotes	The quotes property customizes the quotation marks used by q elements and by content's open-quote/close-quote keywords. By default, the browser chooses them based on the language. It supports multiple pairs of quotes so nested quotations automatically switch styles — an important tool for international typography.
R
right	The right property defines the offset of a positioned element from the right edge of its containing block, measured leftward. It only applies to non-static positioned elements and is typically used with absolute or fixed positioning to align elements to the right.
rotate	The rotate property is an individual transform property that rotates an element around a specified axis in 2D or 3D space. As a standalone property it can be controlled separately from other transforms such as translate and scale, which is especially useful when you want to animate the rotation angle on its own.
resize	The resize property controls whether the user can resize an element by dragging, and in which directions. It is commonly used on elements like <textarea> so users can freely change the size as needed, improving form usability.
S
scale	The scale property is an individual transform property that scales an element up or down in 2D or 3D space. As a standalone property it can be controlled separately from other transforms such as translate and rotate, which is especially useful when you want to animate scaling on its own — for button press feedback, image zoom previews, and similar interactions.
scroll-behavior	The scroll-behavior property controls whether scrolling jumps to a destination instantly or animates smoothly. With smooth, clicking an anchor link or scrolling from JavaScript glides to the target position instead of jumping, noticeably improving the user experience.
scroll-snap-type	The scroll-snap-type property enables a snapping effect when scrolling, making the scroll container align specified elements to its edge or center when it stops. It is commonly used for carousels, full-screen scrolling pages, and horizontal swipe lists, making the scroll experience more precise and controlled.
scrollbar-color	The scrollbar-color property customizes the color of the browser scrollbar, covering both the thumb and the track. It is part of the CSS Scrollbars specification and provides a simple way to match the scrollbar to the page's overall palette without JavaScript plugins.
T
text-align	The text-align CSS property sets the horizontal alignment of text inside a block-level element. It supports left, right, center, and justify values and applies to paragraphs, headings, table cells, and any other block container. Note that text-align aligns content inside the element, not the element itself.
text-decoration	The text-decoration CSS property adds decorative lines to text, most commonly underlines, overlines, and line-through. It is the shorthand for four sub-properties: text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness. By default, links (a elements) are underlined; reset styles usually remove that underline.
text-transform	The text-transform CSS property changes how text is displayed in terms of case — uppercase, lowercase, or capitalized — without modifying the underlying content. The original text in the HTML remains untouched, so screen readers and copied text are unaffected; the conversion is purely visual.
text-indent	The text-indent CSS property sets the horizontal indentation of the first line of a block-level element, commonly used for paragraph first-line indentation. It only affects the first line. Values can be a fixed length (such as 2em) or a percentage of the containing block's width, and negative values create a hanging indent.
text-shadow	The text-shadow CSS property adds shadows to text to give it depth and visual hierarchy against its background. Each shadow takes a horizontal offset, vertical offset, blur radius, and color; multiple shadows can be stacked, separated by commas, to create glow, embossed, or outlined effects.
top	The top property defines the offset of a positioned element from the top edge of its containing block. It only applies to elements whose position is relative, absolute, fixed, or sticky, and is used to control an element's vertical position precisely.
transition	The transition property is a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables smooth, animated changes between property values when an element changes state — for example on :hover or :focus — instead of abrupt jumps. By specifying the target property, duration, easing curve, and delay, you can easily create fluid interaction effects. It is a fundamental tool for building modern web micro-interactions.
transform	The transform property applies 2D or 3D geometric transformations to an element, including translation, rotation, scaling, and skewing. Transformations happen at the rendering stage and do not affect document flow layout, which makes them a common tool for high-performance visual effects. transform is one of the core properties of CSS animation and interaction design.
tab-size	The tab-size CSS property sets the width of a tab character (\t) as it is displayed on the page, typically used to control indentation in code blocks and pre elements. The default is 8.
text-align-last	The text-align-last CSS property sets the alignment of the last line inside a block-level element, most often paired with text-align: justify. By default the alignment rules of text-align do not apply to a paragraph's last line; text-align-last lets you control that last line separately for more flexible, attractive justified layouts.
text-justify	The text-justify CSS property specifies how the browser adjusts spacing when text-align is set to justify. It controls whether justification is achieved by adjusting word spacing, character spacing, or a combination of both, and mainly affects typographic details when the justify value is in use.
text-overflow	The text-overflow CSS property controls how text is displayed when it overflows its container. Its most common use, combined with overflow: hidden and white-space: nowrap, is to render overflowing single-line text with an ellipsis. It supports two modes: clip (truncate) and ellipsis (…), making it a standard tool for handling long text in UI design.
text-underline-offset	The text-underline-offset CSS property sets the distance between an underline and the text baseline, making the underline position more flexible and polished. By default the underline hugs the bottom of the text; an offset leaves a gap so the line does not collide with descenders such as g and y.
transition-property	The transition-property property specifies which CSS properties apply a transition effect when their values change. Its default value is all, meaning every animatable property takes part in the transition; you can also list specific property names explicitly to avoid unnecessary performance cost and unexpected animation behavior.
transform-origin	The transform-origin property sets the point — the origin — around which an element is transformed. The default is the center of the element (50% 50%), and rotations, scalings, and skews are all performed around this point. By adjusting the origin you can create very different effects, such as rotating around an edge or scaling from a corner.
transform-style	The transform-style property decides whether an element's children keep their 3D positions in space. The default value flat flattens the children into the parent's 2D plane; with preserve-3d the children can be positioned in independent 3D space, and combined with perspective it builds genuinely three-dimensional scenes.
translate	The translate property is an individual transform property that moves an element in 2D or 3D space. It has the same effect as transform: translate(), but as a standalone property it can control translation separately without affecting other transforms such as rotation and scaling — very useful when you want to animate each transform independently.
table-layout	table-layout determines the algorithm used to compute table column widths. The default auto sizes columns based on content, so columns widen to fit large amounts of content. fixed sizes columns from the first row or from explicit widths, ignoring content, and renders faster — a good fit for large data tables.
U
unicode-bidi	The unicode-bidi CSS property controls the Unicode Bidirectional Algorithm for text, handling cases where text of different directions (such as English and Arabic) is mixed. It can change the embedding level of text, override direction, or detach an element from its parent's direction context, making it a key property for complex text direction on internationalized sites.
user-select	The user-select property controls whether users can select text with the mouse. When set to none, text inside the element cannot be selected — commonly used for buttons, labels, and icons where copying is unnecessary, preventing accidental selection of unrelated content.
V
visibility	The visibility property controls whether an element is visible. Its key difference from display:none is that hidden still occupies layout space; the element is just not rendered visually. The default value, visible, shows the element normally. The property is inherited and is often used for hiding elements while keeping their space.
vertical-align	The vertical-align CSS property controls the vertical alignment of inline elements or the content inside table cells. It supports keywords such as top, middle, and baseline as well as length and percentage values, and is commonly used to align icons with text, nudge inline elements, or position table cell content. Note that vertical-align has no effect on block-level elements.
W
width	The width property sets the width of an element's content area and is one of the most commonly used sizing properties in the CSS box model. It only affects non-replaced elements, and its default value, auto, lets the browser compute the width automatically based on the containing block. In real-world layouts, width is often combined with max-width and min-width to build responsive designs.
white-space	The white-space CSS property controls how whitespace (spaces, tabs, and newlines) inside an element is handled and whether the text wraps automatically. It decides whether the browser collapses consecutive spaces, preserves the original formatting, or breaks lines when text overflows. It is essential for displaying code, preserving layout, and single-line ellipsis effects.
word-spacing	The word-spacing CSS property sets the spacing between words in text. It is most visible in languages like English that separate words with spaces; since Chinese has no space-delimited words, the property generally has no effect on it.
word-break	The word-break CSS property controls how words break at the container edge, mainly solving the problem of long words or URLs overflowing the container. It decides whether breaks are allowed inside words and how CJK text wraps. It is especially useful for long user-generated strings.
word-wrap	The word-wrap CSS property is an alias for overflow-wrap. It controls whether a long word or URL may break inside when it exceeds the container width. It was designed to prevent unbreakable long strings from overflowing the container and remains a common tool for text overflow; modern specs recommend overflow-wrap instead.
writing-mode	The writing-mode CSS property sets the overall layout direction of the text, supporting horizontal (horizontal-tb) and vertical (vertical-rl, vertical-lr) modes. It is used to create vertical text like traditional Chinese or Japanese books and also changes how block and inline elements arrange themselves, making it an important tool for East Asian typography.
widows	widows controls the minimum number of lines from the start of a paragraph that must remain at the bottom of the previous page when printing, defaulting to 2. Paired with orphans, it prevents a paragraph's first line from being left alone at the bottom of a page (a 'widow'), keeping printed paragraphs intact.
Z
z-index	The z-index property controls the stacking order of positioned elements along the z-axis, perpendicular to the screen; elements with a higher value are rendered above those with lower values. It is typically used with position for layered UI such as modals, dropdowns, and overlays.
zoom	The zoom property applies a non-standard scaling transform, enlarging or shrinking an element and all of its children proportionally. Unlike transform: scale(), zoom affects the element's layout space — it occupies the scaled actual space — and triggers a full reflow. Although it is not standard CSS, browser support is widespread.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

CSS Property Reference

CSS Property Reference

🙏 帮我们做得更好