CSS Reference

Sets the color for the inside of text characters. It's almost always used alongside 'background-clip: text' and a transparent 'color' to create text with image backgrounds or gradients.

A shorthand for setting both the thickness and the color of text outlines in one line. Great for creating 'hollow' or 'ghost' text effects.

Sets the color of the outline (stroke) around text characters. Best used with a large font size to ensure the text remains readable.

Defines how thick the outline (stroke) around text characters should be. Keep it subtle (1-2px) to prevent the text from looking distorted.

Sets the accent color for user-interface controls like checkboxes, radio buttons, and range sliders. It allows you to style native forms with your brand color with a single line of CSS.

Aligns a flex container's lines within it when there is extra space in the cross axis, similar to how justify-content aligns individual items within the main axis.

Defines the default behavior for how items are aligned along the cross axis (perpendicular to the main axis) in a flex or grid container.

Allows you to override the default alignment for a single item inside a Flex or Grid container. While 'align-items' sets the default for everyone, 'align-self' lets one item 'do its own thing'.

Controls how an inline-level element (usually SVG text) aligns itself with the vertical baseline of its parent. It's essentially the 'vertical-align' for SVG text.

A 'big reset' property that forces every single CSS property on an element (except direction and language) back to its starting state. Useful for clearing out unwanted styles from themes or parent elements.

Defines a unique name for an element so it can be used as an anchor for other positioned elements. This creates the relationship needed for anchor positioning to work.

Limits where an anchor name can be 'seen.' This prevents anchor names from leaking into other parts of the page, allowing you to reuse the same anchor names in different components safely.

A shorthand property that applies an animation to an element. It links the element to a set of @keyframes and defines how that animation should behave.

Determines how the browser should mix multiple animations targeting the same property. You can either replace the previous value, add to it, or accumulate it (useful for stacking transforms).

Sets a timer before an animation starts playing. You can use positive values to wait, or negative values to make the animation look like it's already halfway through its first cycle.

Defines whether an animation should play forwards, backwards, or alternate back and forth on every other cycle. Useful for creating smooth 'yo-yo' effects.

Specifies how long it takes for an animation to complete one full cycle (from 0% to 100%). Use seconds (s) or milliseconds (ms).

Determines how an element should look before the animation starts and after it finishes. 'forwards' is the most common use, as it keeps the final frame of the animation visible.

Sets the number of times an animation should play before stopping. You can use whole numbers (1, 2, 3) or 'infinite' for a never-ending loop.

Specifies the name of one or more @keyframes at-rules that should be applied to the selected element.

Allows you to pause and resume a running animation. Typically used in combination with :hover or JavaScript to freeze an animation when a user interacts with it.

A shorthand property for setting both the start and end points of a scroll-driven animation. It's the most concise way to define the 'active window' for a scroll effect.

Defines where a scroll-driven animation should reach 100% completion. For example, you can stop the animation exactly when an element exits the top of the viewport.

Defines the exact point in a scroll timeline where the animation should begin (0%). This allows you to delay the start of an animation until an element is partially visible.

The 'brain' of modern scroll-driven animations. It links an animation to a timeline other than time—usually the scroll position of the page or the visibility of an element in the viewport.

Defines the speed curve of an animation, such as 'ease-in', 'ease-out', or 'linear'. It controls whether the animation feels organic and bouncy or robotic and steady.

An experimental property that allows you to define exactly when an animation should start playing based on conditions like visibility in the viewport. It's part of the effort to make scroll and view-driven effects more declarative.

Used to display an element using platform-native styling. Setting it to none is the first step in creating custom form controls like checkboxes or selects.

Sets a preferred ratio for an element's width and height, ensuring it maintains a specific shape (like square or widescreen) even as it resizes.

Applies graphical effects like blur or color shifts to the area *behind* an element, allowing you to create frosted-glass effects.

Determines if you can see the 'back' of an element when it's flipped in 3D space. Setting it to 'hidden' is essential for creating smooth card-flip animations where the back face shouldn't show through the front.

The ultimate shorthand for setting all background properties (color, image, repeat, etc.) in a single line. It's the most common way to style backgrounds efficiently.

Controls whether a background image stays fixed in place or scrolls along with the content. 'fixed' is often used to create a simple parallax-like effect where the page content slides over a static image.

Sets how an element's multiple background images and background color should blend with each other.

Specifies the 'boundary' for where the background should be visible. For example, you can clip the background to only show inside the element's text, or only within its padding area.

Sets the background color of an element. It fills the space behind the content, padding, and border of the element.

Sets one or more background images for an element. This can be a URL to an image file or a CSS gradient function.

Sets the starting point for where a background image is positioned. Unlike 'background-clip' which hides parts of the background, 'background-origin' actually shifts the starting (0,0) coordinate of the image.

Sets the initial position of a background image. You can use keywords (center, top), percentages, or length values to move the image within its container.

Specifically controls the horizontal (left-to-right) position of a background image. This is useful when you want to change only the horizontal position via hover or animation without touching the vertical position.

Specifically controls the vertical (top-to-bottom) position of a background image. It allows you to adjust the vertical alignment specifically, which is perfect for shifting backgrounds on scroll.

Sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

A non-standard (but widely supported) property that specifically controls whether a background image repeats horizontally. It is usually easier to use the standard 'background-repeat' property instead.

A non-standard (but widely supported) property that specifically controls whether a background image repeats vertically. It is usually easier to use the standard 'background-repeat' property instead.

Sets the size of the element's background image. Images can be left to their natural size, stretched, or constrained to fit the available space.

Used in SVG to move text vertically relative to its baseline. It's the primary way to create subscripts or superscripts within SVG text elements without changing font sizes.

Determines which line box's baseline is used as the reference for an element with multiple lines. For example, you can choose to align an inline-block based on its first line of text or its last line.

Defines the 'height' of an element in a way that respects the writing mode. If you switch from horizontal to vertical text, 'block-size' automatically switches from height to width so your layout remains consistent.

A shorthand property that sets an element's border width, style, and color in a single declaration.

The most powerful logical shorthand for borders. It sets the width, style, and color of both the 'start' and 'end' borders in the block dimension with a single line of CSS.

Sets the color of the borders in the block dimension (top and bottom in horizontal text). It's a logical way to style both 'vertical' ends of a box at once.

A shorthand for setting the width, style, and color of the 'end' side border in the block dimension. It's the logical equivalent of styling a bottom border.

Sets the color of the 'end' side of the block dimension (usually the bottom border). Using logical properties like this makes your CSS more readable for multi-language sites.

Specifies whether the 'end' block border is solid, dashed, dotted, etc. In standard horizontal English text, this corresponds to the bottom border style.

Defines the thickness of the logical 'end' border. This is a modern replacement for 'border-bottom-width' that adapts to different writing modes.

A shorthand for setting the width, style, and color of the 'start' side border in the block dimension. Effectively styles the top border in horizontal writing modes.

Sets the color of the 'start' side of the block dimension (usually the top border). Part of the logical properties set for more flexible layout systems.

Determines the line style (solid, dashed, etc.) for the 'start' side border. In standard western layouts, this is the top border.

Defines the thickness of the logical 'start' border. It replaces 'border-top-width' in modern CSS to better support different writing directions.

Sets the line style for both block-dimension borders (top and bottom) with one declaration. Using 'solid' is the most common way to define these boundaries.

Sets the thickness of the borders in the block dimension (usually top and bottom). It's a convenient way to adjust the vertical thickness of a box's borders simultaneously.

The shorthand to define width, style, and color for just the bottom edge of an element. It's the standard way to create underlines, dividers, and bottom-aligned accents.

Sets the color of the bottom border specifically. It's often used to create 'underline' effects on headings or nav links that are stylistically distinct from regular text underlines.

Specifically rounds the bottom-left corner of an element. This is useful for creating unique shapes like speech bubbles or tabbed interfaces where only certain corners should be rounded.

Specifically rounds the bottom-right corner of an element. It helps in building modern UI components like cards with soft corners or asymmetric decorative boxes.

Sets the line style for the bottom border. Beyond the standard 'solid', you can use 'dashed' or 'dotted' for separating content blocks without being too heavy.

Controls the thickness of the bottom border. It is frequently paired with a specific color to create focus indicators or status bars.

Determines whether table cells have shared or separate borders. 'Collapse' is the most common setting used to create clean, single-line borders between cells.

A shorthand property that sets the color for all four borders of an element. If you provide four values, it sets them in 'top right bottom left' order.

The logical way to round the 'bottom-right' corner (in standard English text). It automatically moves to the bottom-left if you switch to a right-to-left language, keeping your layout consistent.

Rounds the corner where the 'end' of the block dimension meets the 'start' of the inline dimension (bottom-left in LTR). Like all logical properties, it adapts to the text direction.

A massive shorthand for using an image (or gradient) to style an element's borders. It combines source, slice, width, outset, and repeat into one powerful line of CSS.

Controls how far outside the element's actual box the border image is drawn. It's useful for making a decorative border appear as if it's 'floating' around its container.

Defines how the border image is filled along the edges. 'Stretch' pulls the image thin, while 'repeat' or 'round' tiles it. 'Round' is often best because it scales tiles slightly to avoid cutting them off.

Determines how to 'cut' the border image into nine pieces (four corners, four edges, and a center). These pieces are then used to build the final border by resizing them to fit your element.

Specifies the image used as the border. You can use an actual image file (URL) or even a CSS gradient, which allows for advanced effects like gradient borders.

Sets the thickness of the border image. This can be different from the actual 'border-width', allowing you to scale the decorative image pieces independently of the box boundaries.

The logical shorthand for setting width, style, and color for both the 'start' and 'end' borders in the inline dimension (left and right in LTR).

Sets the color for both borders in the inline dimension (usually left and right). It's the logical way to style 'horizontal' edges at once, adapting perfectly for right-to-left text.

A shorthand for setting the width, style, and color of the 'end' side border in the inline dimension. It's the logical successor to 'border-right'.

Sets the color for the 'end' side of the inline dimension (usually the right border). It ensures the border stays on the 'exit' side of text even if the language direction changes.

Specifies the line style for the logical 'end' border. In standard western layouts, this is the right border style.

Defines the thickness of the logical 'end' border. Replaces 'border-right-width' to ensure the boundary stays on the correct side regardless of text direction.

A shorthand for setting the width, style, and color of the 'start' side border in the inline dimension. It's the logical equivalent of styling a left border.

Sets the color of the 'start' side of the inline dimension (usually the left border). It allows for easier localization without writing direction-specific overrides.

Determines the line style (solid, dashed, etc.) for the 'start' side border. Replaces 'border-left-style' for better international formatting.

Defines the thickness of the logical 'start' border. It's the modern way to set a left border that flips to the right in RTL languages.

Sets the line style for both inline-dimension borders (left and right) with one declaration. Using 'solid' is the standard for defining box boundaries.

Sets the thickness of both logical inline borders (left and right) simultaneously. A convenient logical shorthand for symmetrical horizontal borders.

A shorthand for setting the physical left border's width, style, and color in one line. Perfect for adding a simple vertical line to the side of an element.

Sets the color of the left border. While logical properties like 'border-inline-start-color' are often preferred for modern apps, this remains the standard way to target the physical left side specifically.

Determines the line style (solid, dashed, etc.) of the physical left border. Without a set style, the border won't appear even if you give it a width.

Controls the thickness of the physical left border. It can take keyword values like 'thin' or 'thick', but specific pixel values are most common.

Defines the radius of an element's corners, allowing you to create rounded corners or circular shapes.

A shorthand for setting the physical right border's width, style, and color. It's the standard physical counterpart to the modern 'border-inline-end' property.

Sets the color of the physical right border. Useful for specific side-styling where you don't want the side to flip automatically in RTL languages.

Determines the line style of the physical right border. Common values include 'solid', 'double', or 'dotted'.

Controls the thickness of the physical right border. Often used to create visual separation in navigation bars or lists.

Determines the distance between the borders of adjacent table cells. Note that this property only works if 'border-collapse' is set to 'separate'.

The logical way to round the corner where the 'start' of the block (top) meets the 'end' of the inline dimension (right in LTR). It adapts to writing mode changes automatically.

Rounds the corner where the 'start' of the block (top) and the 'start' of the inline dimension (left in LTR) meet. This is the logical successor to 'border-top-left-radius'.

A shorthand for setting the line style of all four borders at once. Without a style (like 'solid' or 'dashed'), borders are invisible by default.

A shorthand for setting the width, style, and color of the physical top border in a single declaration.

Sets the color of the physical top border. Often used to create distinct top-bar accents on cards or containers.

Defines the radius curve of the physical top-left corner. While logical alternatives exist, this remains the most common way to round specific corners in CSS.

Defines the curve of the physical top-right corner. It can take one or two values to create circular or elliptical curves.

Sets the line style for the physical top border. You must set a style other than 'none' for the border to be rendered.

Specifies the thickness of the physical top border. It's often used for decorative 'top-border' highlights on layout components.

A shorthand for setting the thickness of all four borders. You can provide 1, 2, 3, or 4 values to target different sides specifically.

Sets the vertical distance between the bottom edge of a positioned element and the bottom edge of its containing block.

Controls how an element's fragments (like when a line of text wraps or breaks across pages) are styled. 'Clone' repeats the padding and borders on every fragment, while 'slice' cuts them off.

Adds shadow effects around an element's frame. It can be used to create depth, elevation, or subtle glows.

Sets how the total width and height of an element is calculated. border-box includes padding and border in the size, while content-box does not.

Defines what kind of break (page, column, or region) should happen after an element. Commonly used in multi-column layouts or print CSS to force content onto a new page/column.

Specifies whether a page, column, or region break should occur before an element. Useful for ensuring headers always start a new column or page.

Determines if an element should be allowed to split across pages or columns. Setting it to 'avoid' is the standard way to prevent images or cards from getting cut in half.

Specifies whether the caption of a table (the <caption> element) should be placed above or below the table content.

An experimental property to control the blinking behavior of the text cursor (caret). Setting it to 'manual' allows you to disable the default blink.

Sets the color of the text cursor (caret) in inputs, textareas, or any editable element. This is a great way to maintain brand colors even in form fields.

Determines the visual shape of the text cursor. You can choose between the standard vertical bar, a block, or an underscore (terminal-style).

Specifies whether an element should be moved below any 'floating' elements that come before it. It's the classic way to 'break' out of a float layout and start fresh on a new line.

A legacy property used to define which portion of an absolutely positioned element is visible. It has been replaced by the more powerful and flexible 'clip-path' property.

Creates a clipping region that sets what part of an element should be shown. Parts inside the region are visible, while those outside are hidden.

An SVG-related property that determines how to calculate the 'insideness' of a point in a clipping path. 'Evenodd' is often used for complex shapes with holes.

A legacy property (deprecated in favor of 'print-color-adjust') that tells the browser whether it can override colors to save ink or improve readability when printing.

An SVG property that determines which color space should be used for gradient interpolations and color animations.

Specifies the color space for imaging operations performed via filter primitives. It's an internal SVG detail for how colors are calculated during complex filtering.

Tells the browser which color themes (light, dark) the element can be rendered in. This automatically adjusts UI elements like scrollbars and form controls to match the theme.

Splits the content of an element into a specified number of columns, similar to a newspaper layout.

Controls how content is distributed across columns. 'Balance' tries to make all columns equal in height, while 'auto' fills them one after another until they reach their height limit.

Sets the size of the gap (gutter) between columns in multi-column, flex, or grid layouts.

An experimental property that allows setting a specific height for columns in a multi-column layout.

A shorthand property that sets the width, style, and color of the vertical line (rule) drawn between columns in a multi-column layout.

Sets the color of the vertical line (rule) drawn between the columns of a multi-column layout.

Determines the line style (solid, dashed, dotted, etc.) of the vertical line drawn between columns.

Sets the thickness of the vertical line drawn between columns in a multi-column layout.

Allows an element (like a header) to stretch across all columns instead of being confined to a single column in a multi-column layout.

Sets the ideal width for columns in a multi-column layout. The browser will create as many columns of at least this width as it can fit in the container.

An experimental property to control whether content should wrap into new columns or overflow in a multi-column layout.

A shorthand property that allows you to easily create multi-column text layouts, similar to a newspaper or magazine.

Tells the browser that an element and its content are independent of the rest of the page. This allows the browser to optimize rendering because it knows changes inside won't affect anything outside.

Defines the 'placeholder' block-size (height) of an element when it is subject to size containment (e.g., when off-screen). This prevents layout shifts when content loads or scrolls into view.

Sets the placeholder height for an element under size containment. It ensures the element occupies space even if its content isn't being rendered yet.

Defines the placeholder inline-size (width) of an element when it is under size containment, preventing layout instability.

A shorthand property to set both the width and height an element should 'pretend' to have when it is under size containment. This is a game-changer for scroll performance.

Sets the placeholder width for an element under size containment, helping the browser calculate layout without rendering the full content.

Assigns a name to a container so that nested elements can style themselves based on that specific container's size or state.

Defines an element as a 'container' so its children can query its size or state. 'inline-size' is the most common value, allowing responsive styles based on the container's width.

Used with the ::before and ::after pseudo-elements to generate content on a page. It can be text, images, or even the value of an attribute.

Allows the browser to skip the rendering work for elements that are currently off-screen. Setting it to 'auto' can drastically improve the initial load speed and scroll performance of long pages.

An experimental shorthand for styling the shapes (round, angled, etc.) of the corners at the end of the block axis (usually bottom-left and bottom-right).

An experimental shorthand for styling the shapes of the corners at the start of the block axis (usually top-left and top-right).

An experimental property to define the specific shape of the bottom-left corner. You can choose from 'round', 'angle' (beveled), or other shapes.

An experimental property for the bottom-right corner shape. Part of the new efforts to give designers more control over corner aesthetics beyond simple rounding.

An experimental shorthand to set the physical shape of both bottom corners simultaneously.

An experimental property to set the shape of the corner at the end of both the block and inline axes (usually the bottom-right corner in LTR languages).

An experimental property to set the shape of the corner at the end of the block axis and start of the inline axis (usually the bottom-left corner).

An experimental shorthand to set the shape of both corners on the inline-end side of an element (usually the right side).

An experimental shorthand to set the shape of both corners on the inline-start side of an element (usually the left side).

An experimental physical shorthand to set the shape of both left corners (top-left and bottom-left) simultaneously.

An experimental physical shorthand to set the shape of both right corners (top-right and bottom-right) simultaneously.

A master shorthand property that allows you to set the shape of all four corners of an element. This is the cornerstone of the new 'CSS Borders 4' features for advanced corner styling.

An experimental property to set the shape of the corner at the start of the block axis and end of the inline axis (usually the top-right corner).

An experimental property to set the shape of the corner at the start of both the block and inline axes (usually the top-left corner).

An experimental property for the top-left corner shape. It gives designers more control, allowing for beveled or angled corners instead of just rounded ones.

An experimental property for the top-right corner shape. Part of the new efforts to provide advanced border styling in CSS.

An experimental shorthand to set the physical shape of both top corners (top-left and top-right) at once.

Advances a CSS counter by a specified value (default is 1). It's commonly used to number items like chapters, sections, or images in complex documents.

Resets a CSS counter to a specific value (default is 0). It's typically used on a parent element to start a new sequence for its children.

Sets a CSS counter to a specified value. Unlike 'counter-reset', which starts a new scope, 'counter-set' modifies the value of an existing counter within the current scope.

Sets the mouse cursor to show when the mouse pointer is over an element. Common values include pointer for links, wait for loading states, and help.

Commonly known as 'CSS Variables'. They allow you to store values (like colors or sizes) in a name starting with '--' and reuse them throughout your stylesheet using the 'var()' function.

Defines the x-coordinate of the center of an SVG element, like a <circle> or <ellipse>. You can now control this directly via CSS properties.

Defines the y-coordinate of the center of an SVG element, like a <circle> or <ellipse>. This works similarly to 'cx' but for the vertical axis.

A CSS property that allows you to define the shape of an SVG <path> element. This is powerful for animating paths or changing them purely with CSS (e.g., on hover).

Specifies the base text direction for an element. 'ltr' is for languages like English, and 'rtl' is for languages like Arabic or Hebrew.

Defines the internal and external display types of an element. It determines if an element behaves like a block or inline box and how its children are laid out.

An SVG property that determines which baseline is used to align text. It's crucial for vertical alignment of text and icons within SVG graphics.

A cutting-edge property that allows you to limit the maximum brightness of colors on HDR (High Dynamic Range) displays. This is useful for preventing eye strain when bright white elements are displayed on HDR screens.

A table property that determines if borders and backgrounds should be shown for cells that have no visible content.

A modern property that allows form fields (like textareas) to automatically grow or shrink based on the amount of text typed into them, without needing JavaScript.

Sets the color or pattern used to paint the inside of an SVG shape. It is the SVG equivalent of the 'background-color' property for regular HTML elements.

An SVG property that controls the transparency of the inner fill of a shape or text. A value of 0 is fully transparent, and 1 is fully opaque.

An SVG property that determines how the interior of a complex shape (with overlapping paths) is filled with color.

Applies graphical effects like blur, brightness, or color shifts to an element, similar to image editing software effects.

Defines the initial size of a flex item before the container distributes any remaining space. It works like width or height depending on the flex-direction.

Determines the orientation of flex items in a container, essentially choosing whether they form a horizontal row or a vertical column.

A shorthand property that combines 'flex-direction' and 'flex-wrap'. It lets you set the direction of items and whether they should wrap in one line of code.

Defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion; it dictates how much of the available space inside the flex container the item should take up.

Defines the ability for a flex item to shrink if necessary. It works as a proportion; if the container is too small, items with a higher shrink value will shrink more to fit.

Allows flex items to spill over into multiple lines when they run out of room, rather than squishing together on a single line.

An older layout property that pushes an element to the left or right, allowing text and other content to wrap around it. Often used for images within articles.

An SVG property that sets the color of an SVG filter's flood area. It's often used with 'feFlood' to fill a region with a solid color for lighting or shadow effects.

An SVG property that sets the transparency level of an SVG filter's flood color. 0 is invisible, 1 is fully solid.

An experimental property related to how text flows and its tolerance for line-breaking or overflows, currently mostly seen in Safari/WebKit.

A powerful shorthand property that lets you set many text-related properties (like size, weight, and family) all in one go. It's the most efficient way to define the overall look of your text.

Specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

A low-level property that gives you control over OpenType font features like ligatures, kerning, and advanced typographic alternates.

Controls how the spacing between specific pairs of letters is adjusted (e.g., pulling 'A' and 'V' closer together) to make text look more balanced.

A specialized property that forces a font to use typographic rules for a specific language, regardless of what the document's actual language is set to.

For variable fonts, this property automatically adjusts the shape of letters to be more readable at small sizes or more elegant at large sizes.

Allows you to select a specific color palette for a color font (font that has multiple colors built-in), often used for icon fonts or emojis.

Sets the size of the font. This is one of the most fundamental properties for defining the visual scale of text on a page.

Ensures that if your primary font fails to load, the fallback font is automatically resized to match the same visual height (x-height), preventing the layout from jumping or text becoming unreadable.

Allows you to choose a wider or narrower version of a font if the font family supports it (commonly used with variable fonts to squeeze or stretch text).

Sets whether text should be rendered in an upright (normal), slanted (italic), or skewed (oblique) style.

A shorthand property that controls whether the browser can 'fake' bold, italic, or small-caps styles if the font doesn't provide them.

Controls whether the browser is allowed to 'fake' subscript or superscript positions if the font doesn't have them built-in.

Controls whether the browser is allowed to 'fake' small-caps by shrinking capital letters if the font doesn't have a real small-caps version.

Controls whether the browser is allowed to 'fake' an italic style by slanting the text if a real italic font file isn't available.

Controls whether the browser is allowed to 'fake' a bold look by thickening the strokes if a real bold font file isn't available.

A shorthand property that lets you control advanced typographic features like small caps, old-style numerals, and special ligatures. It helps you make text look more professional and polished if the font supports it.

A property that lets you toggle stylistic alternates in a font (like different ways to draw the letter 'g' or 'a') if the font has multiple versions of those characters.

Allows you to use special 'all-caps' or 'small-caps' styles built into a font. Smaller caps are often used to make acronyms look more harmonious with lowercase text.

A property that controls specialized typographic features for East Asian writing systems, like Japanese and Chinese (e.g., Ruby characters).

Enables you to force a character to look like a colorful emoji or a simple black-and-white text symbol, assuming the font supports both.

Controls 'ligatures'—where two or more characters are merged into a single decorative shape (like 'fi' or 'fl' touching).

Controls how numbers are displayed. You can use it to create 'old-style' numbers, slashed zeros (to distinguish 0 from O), or fractions.

A property that lets you use real, typographically correct subscript and superscript characters built into a font, rather than having the browser 'fake' them with small offsets.

A low-level property used for controlling 'variable fonts'. It allows you to fine-tune axes like weight, width, slant, or custom axes with unprecedented precision.

Sets the thickness or boldness of the font. Values can be keywords like 'bold' or numbers (e.g., 400 for regular, 700 for bold).

A modern property (mostly in Safari/WebKit) that specifically controls the width axis of a variable font, similar to 'font-stretch' but with a more direct name.

Controls whether the browser is allowed to override an element's colors (like when 'High Contrast Mode' is active on Windows). It's handy for preserving specific brand colors that might otherwise be hidden.

Sets the distance between rows and columns in grid, flex, or multi-column layouts. It is a shorthand for row-gap and column-gap.

A deprecated property used in SVG to control the orientation of characters when text is written vertically. Use 'text-orientation' in modern CSS instead.

A shorthand property for setting all the explicit and implicit grid properties in a single declaration. It allows you to define rows, columns, and templates quickly.

A shorthand property that lets you assign an element to a specific named area or set of lines within a CSS Grid, defining its position and size in one line.

Sets the size of any columns that the browser creates automatically (implicit columns) when you place items outside of your explicitly defined grid columns.

Determines the algorithm used to automatically place grid items that aren't specifically positioned. It can fill row by row, column by column, or try to fill gaps 'densely'.

Sets the size of any rows that the browser creates automatically (implicit rows) when items spill over your explicitly defined grid rows.

A shorthand property for grid-column-start and grid-column-end. It defines an item's horizontal position and width within a grid in a single line.

Defines which vertical grid line a grid item should end at. You can specify a line number, a named line, or use 'span' to say how many columns it should cover.

Defines which vertical grid line a grid item should begin at. You can specify a line number or a named line.

A shorthand property for grid-row-start and grid-row-end. It defines an item's vertical position and height within a grid in one line.

Defines which horizontal grid line a grid item should end at. You can use line numbers, names, or 'span' keywords.

Defines which horizontal grid line a grid item should begin at. You can specify a line number or a named line.

A powerhouse shorthand that lets you define 'grid-template-rows', 'grid-template-columns', and 'grid-template-areas' all at once. Perfect for defining a full page layout in one property.

Allows you to design a grid layout using 'named areas'. You can draw a visual map of your page using strings, making complex layouts much easier to read.

Defines the number and widths of columns in a grid. You can set fixed sizes, percentages, or use the fr unit to fill available space.

Defines the height of each row in a grid. You can set fixed heights, use percentages, or the 'fr' unit to fill available vertical space.

Allows punctuation marks (like quotation marks or hyphens) to be placed outside the text box alignment, making the edges of a paragraph look cleaner and straighter.

Sets the height of an element. It defines the vertical space an element occupies.

Sets the character used when a word is broken at the end of a line. While usually a hyphen (-), you can change it to something else (like an arrow or a different symbol).

Sets rules for how and when a word should be hyphenated, such as the minimum word length or the minimum number of characters left at the start or end of a line.

Controls whether the browser is allowed to automatically break words with hyphens to prevent large gaps in text alignment.

Controls whether an image is automatically rotated based on its 'EXIF' metadata (data captured by cameras about how the photo was taken).

Determines how the browser should upscale or downscale an image. It's especially useful for making pixel art look sharp ('pixelated') rather than blurry when enlarged.

An old, mostly deprecated property used to control the 'Input Method Editor' (like character pickers for non-English languages). It's rarely used today and not supported in Chrome or Safari.

A modern way to create 'drop caps' (large first letters at the start of a paragraph). You can specify how many lines high the letter should be and how many lines it should sink into the text.

A logical property that sets the 'width' of an element relative to the direction of text. In horizontal languages (like English), it's exactly the same as 'width'.

A modern shorthand property that sets the distance between an element and its parent container. It's much faster than writing out 'top', 'right', 'bottom', and 'left' separately.

A logical shorthand for 'inset-block-start' and 'inset-block-end'. It defines an element's distance from the top and bottom of its container in one line.

A logical property that sets the distance from the 'end' of the block axis (usually the 'bottom' in English layouts). It's the logical replacement for 'bottom'.

A logical property that sets the distance from the 'start' of the block axis (usually the 'top' in English layouts). It's the logical replacement for 'top'.

A logical property that sets the distance from the 'end' of the inline axis (usually the 'right' in LTR or 'left' in RTL). It's the logical replacement for 'right'.

A logical property that sets the distance from the 'start' of the inline axis (usually the 'left' in LTR or 'right' in RTL). It's the logical replacement for 'left'.

An experimental property that can make an entire section of a page 'inert' (unclickable and ignored by assistive technology), similar to the 'inert' HTML attribute but via CSS.

Experimental shorthand for 'interest-delay-start' and 'interest-delay-end'. Controls the timing for appearing and disappearing 'interest' UI elements like tooltips.

Experimental: Part of the Interest API. Sets the delay before an 'interest' state (like a tooltip or hover-card) is dismissed after the user stops showing interest.

Experimental: Part of the Interest API. Sets the delay before an 'interest' state (like a tooltip or popover) appears after the user starts showing interest (e.g., hovering).

A game-changer for CSS transitions. It allows you to animate an element's size to or from keywords like 'auto', 'min-content', or 'max-content' smoothly.

Defines whether an element must create a new stacking context. This is useful for preventing mix-blend-mode or z-index from affecting elements outside of a specific container.

Defines how the browser distributes space between and around content items along the main axis of a flex container or the inline axis of a grid container.

Defines the default alignment for all items inside a grid container along the inline (horizontal) axis.

Allows a single item inside a grid or flex container to override the default alignment set by its parent.

Sets the horizontal spacing (kerning) between characters in a block of text.

Specifies the color of the light source used in SVG filter primitives like <feDiffuseLighting> and <feSpecularLighting>.

Controls how strictly the browser should apply line-breaking rules, especially for CJK (Chinese, Japanese, Korean) languages where certain characters shouldn't start or end a line.

Limits the number of lines displayed in a block of text, automatically adding an ellipsis (...) at the end. It's the modern, non-prefixed way to do 'multiline truncation'.

Sets the height of a line box. It is commonly used to set the distance between lines of text, which significantly affects readability.

A shorthand property for setting all the list style properties at once. It's most commonly used to remove bullets entirely.

Allows you to use an image (like a tiny icon or logo) as the bullet point for list items.

Determines whether the list bullet appears inside or outside the text block. 'inside' makes the bullet part of the first line of text, while 'outside' keeps it in the margin.

Sets the marker (bullet or number) for a list item element. You can choose from built-in shapes, numbers, or even custom strings.

Sets the margin area on all four sides of an element. It creates space between an element and its neighbors.

A logical shorthand for 'margin-block-start' and 'margin-block-end'. It sets the vertical spacing (top and bottom) in one line.

A logical property that sets the margin at the 'end' of the block axis (usually the 'bottom' in English). It's the logical replacement for 'margin-bottom'.

A logical property that sets the margin at the 'start' of the block axis (usually the 'top' in English). It's the logical replacement for 'margin-top'.

Sets the amount of empty space below an element. This space pushes other elements further down the page.

A logical shorthand for 'margin-inline-start' and 'margin-inline-end'. It sets the horizontal spacing (left and right) in one line.

A logical property that sets the margin at the 'end' of the inline axis (usually the 'right' in LTR or 'left' in RTL). It's the logical replacement for 'margin-right'.

A logical property that sets the margin at the 'start' of the inline axis (usually the 'left' in LTR or 'right' in RTL). It's the logical replacement for 'margin-left'.

Sets the amount of empty space on the left side of an element. This can be used to push the element away from its neighbor on the left.

Sets the amount of empty space on the right side of an element. This creates a gap between the element and whatever is to its right.

Sets the amount of empty space above an element. This pushes the element further down the page from its top neighbor.

An experimental property that 'trims' the margins of child elements when they hit the edges of their container. It's a cleaner way to handle things like the last item's margin-bottom.

An SVG property that places a 'marker' (like an arrowhead or dot) at the very last point of a path, line, or polyline.

Defines the symbol or marker that will be displayed at every vertex (point) of an SVG path, except for the very first and very last points. It's perfect for adding arrowheads or dots to a multi-segment line.

Defines the symbol or marker that will be displayed at the very first point of an SVG path. It's commonly used to add arrowheads to the start of a line.

A shorthand property that allows you to hide or partially hide parts of an element using an image or a gradient. It's like using a stencil to cut a shape out of an element.

A shorthand property that lets you use an image as a 'border mask' for an element. This allows you to create decorative borders that are defined by an external image file.

Defines how much the mask border area extends beyond the element's border box, effectively pushing the mask outwards.

Determines how the edges and corners of the mask border image are repeated or stretched to fill the mask area.

Specifies how to 'slice' the mask border image into nine regions (four corners, four edges, and a center). This allows the edges to scale while keeping the corners fixed.

Sets the image that will be used to create the mask border. This image is sliced and applied to the border area of an element.

Sets the thickness of the mask border. If this is different from the element's actual border width, the mask border will scale to fit.

Determines which area of the element (border, padding, or content box) the mask should actually apply to. It works similarly to 'background-clip'.

Defines how multiple mask layers should be combined together (e.g., should they be added, subtracted, or intersected).

Sets the image that will be used as the masking layer for an element. It allows you to selectively hide parts of an element using gradients or transparent images.

Specifies whether the mask should be treated as an alpha mask (using transparency) or a luminance mask (using brightness).

Defines the 'origin' or starting point of the mask position. It determines where the mask image is placed relative to the element's boxes.

Sets the initial position of the mask image within the masking area. It works exactly like 'background-position'.

Controls whether the mask image is tiled (repeated) across the element, and how it is tiled. It works exactly like 'background-repeat'.

Sets the size of the mask image. You can use keywords like 'cover' or 'contain', or specific pixel/percentage values, just like 'background-size'.

An SVG property (also available in CSS) that determines whether an SVG <mask> element should be treated as an alpha mask or a luminance mask.

Controls how MathML formulas are scaled when nested. Increasing the depth usually makes the text smaller, similar to how subscripts or superscripts work.

A property for MathML that determines whether superscripts should be shifted upwards more aggressively ('normal') or kept closer to the baseline ('compact').

Specifies whether MathML equations should be rendered in a 'display' style (centered and full-sized) or an 'inline' style (more compact to fit inside a paragraph).

A logical property that sets the maximum size of an element in the block axis (usually 'height'). It's the logical replacement for 'max-height'.

Sets the maximum height of an element. It prevents the element from becoming taller than the specified value. If the content is taller, it will overflow based on the overflow property.

A logical property that sets the maximum size of an element in the inline axis (usually 'width'). It's the logical replacement for 'max-width'.

Sets the maximum width of an element. It prevents the element from becoming wider than the specified value, even if the content or container is larger.

A logical property that sets the minimum size of an element in the block axis (usually 'height'). It's the logical replacement for 'min-height'.

Sets the minimum height of an element. It prevents the element from becoming shorter than the specified value, which is useful for ensuring a section always has some height even if it's empty.

A logical property that sets the minimum size of an element in the inline axis (usually 'width'). It's the logical replacement for 'min-width'.

Sets the minimum width of an element. It prevents the element from becoming narrower than the specified value, even if the content or container is smaller.

Sets how an element's content should blend with the content of the element's direct background (parent).

Defines how an <img> or <video> should be resized to fit its container. cover is perfect for making images fill a space without being squashed.

Sets the alignment of an image or video within its container when using object-fit. It's like background-position but for replaced elements like <img> and <video>.

Allows you to specify a 'view box' for an image or video, similar to how viewBox works in SVG. This essentially lets you crop or zoom into a specific part of a replaced element using CSS.

A shorthand property for setting all the individual motion path properties (path, distance, rotation, etc.) in a single line.

Defines the point of the element that is actually 'attached' to the motion path. By default, it's the center, but you can change it to a corner or specific position.

Specifies how far along a motion path (defined by offset-path) an element should be placed. It's usually animated from 0% to 100%.

Defines the actual path an element should follow during a motion animation. You can use SVG path strings, shapes (like circles), or даже browser curves.

Sets the initial starting position of a motion path. It determines where the 'zero point' of the path is located relative to the element's container.

Controls the rotation of an element as it moves along a path. By default, 'auto' makes the element 'face' the direction it's moving.

Sets the transparency level of an element. A value of 0 is fully transparent, while 1 is fully opaque.

Changes the visual order of items within a flex or grid container without changing their actual order in the HTML code.

Specifies the minimum number of lines of a paragraph that must be left at the bottom of a page or column before a break.

A shorthand property for setting the width, style, and color of an element's outline. Outlines are drawn outside the border edge and don't take up space.

Sets the color of the outline drawn around an element. Outlines are different from borders because they don't take up any space in the layout.

Adds space between the edge of the element and the outline. Positive values push the outline away, negative values pull it inside.

Sets the style of the outline (like 'solid', 'dashed', or 'dotted'). It works exactly like 'border-style'.

Sets the thickness of the outline around an element. It works exactly like 'border-width'.

A browser optimization that helps keep your scroll position steady when content is added to the page above where you're looking. It prevents the page from 'jumping' unexpectedly.

A logical property that sets the overflow behavior in the block direction (usually vertical). It's the logical replacement for 'overflow-y'.

Works with 'overflow: clip' to allow content to extend slightly beyond the element's box before it is cut off. It's like a 'safe zone' for clipped content.

A logical property that sets the overflow behavior in the inline direction (usually horizontal). It's the logical replacement for 'overflow-x'.

Tells the browser whether it is allowed to break a very long word (like an ID or URL) onto a new line if it would otherwise overflow its container.

Controls what happens to content that is wider than its container. It can be hidden, clipped, or made to scroll horizontally.

Controls what happens to content that is taller than its container. This is the most common way to add a vertical scrollbar to a box.

A property used for elements in the 'top layer' (like <dialog> or popovers). It specifies whether an element should be rendered in the top layer even when it's not the active modal.

A shorthand for setting how the browser handles reaching the boundary of a scroll area in both directions. It helps stop annoying 'scroll chaining'.

A logical property that controls what happens when you reach the end of a scroll area in the block (vertical) direction. It prevents 'scroll chaining' to the parent container.