# Master CSS

> A CSS language and framework for rapidly building beautiful websites and design systems with rule-based CSS-in-class.

## Blog
- [Master CSS Vite: one plugin for every rendering mode](https://rc.css.master.co/en/blog/bootstrapping-master-css-with-vite): A cleaner Vite integration for runtime rendering, static rendering, pre-rendering, and progressive rendering.
- [Introducing the Master CSS Next.js](https://rc.css.master.co/en/blog/master-css-next): The Next.js Adapter brings Progressive Rendering into the build pipeline, with Turbopack support for Static Rendering.
- [Master CSS 2.0](https://rc.css.master.co/en/blog/v2): Configuration API, progressive rendering, design system, and more!

## Brand
- [Brand](https://rc.css.master.co/en/brand): These guidelines are here to help you use our brand assets—such as our logo, content, and trademarks—clearly and correctly, without needing separate legal permission each time.

## Design System
- [Design System](https://rc.css.master.co/en/design-system): The Master CSS design system provides a set of guidelines and examples

## Guide
- [Get started with Master CSS](https://rc.css.master.co/en/guide): This section walks you through learning and starting to use Master CSS.
- [AI Coding with Master CSS](https://rc.css.master.co/en/guide/ai-coding): Use AI coding agents to write, review, and validate Master CSS classes with project context, prompts, linting, and visual checks.
- [Authoring Packages](https://rc.css.master.co/en/guide/authoring-packages): Create a simple CSS-only package that shares Master CSS tokens, variants, utilities, and component vocabulary.
- [Benchmarks](https://rc.css.master.co/en/guide/benchmarks): Read reproducible Master CSS benchmarks for the runtime/CSSOM tradeoff: small runtime, fewer CSS rules, browser cost, and lifecycle behavior.
- [Breakpoints](https://rc.css.master.co/en/guide/breakpoints): Define viewport breakpoint tokens and use responsive variants for page-level layout, typography, and density changes.
- [Cascade Layers](https://rc.css.master.co/en/guide/cascade-layers): Understand how theme, base, defaults, components, and utilities layers control style priority.
- [Code Linting for Master CSS](https://rc.css.master.co/en/guide/code-linting): An ESLint integration for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
- [Colors](https://rc.css.master.co/en/guide/colors): Choose palette steps, preset color roles, and mode-aware hue aliases for light and dark UI.
- [Compatibility](https://rc.css.master.co/en/guide/compatibility): Learn browser support, native declaration fallback, vendor prefixes, modern CSS feature strategy, and how Master CSS coexists with third-party styles.
- [Conditional Queries](https://rc.css.master.co/en/guide/conditional-queries): Learn how to append condition suffixes for breakpoints, modes, media types, container queries, supports checks, and ranges.
- [Containers](https://rc.css.master.co/en/guide/containers): Use container size tokens for reusable width caps, component dimensions, and container query variants.
- [Corner Radius](https://rc.css.master.co/en/guide/corner-radius): Use radius tokens, pill shortcuts, circular shapes, and custom corner scales consistently.
- [Directives](https://rc.css.master.co/en/guide/directives): Use Master CSS stylesheet directives for entries, settings, theme tokens, managed definitions, source scanning, composition, and native CSS preservation.
- [Elevation](https://rc.css.master.co/en/guide/elevation): Create depth with light and dark shadow tokens, layered surfaces, and state-aware elevation.
- [Preventing flash of unstyled content](https://rc.css.master.co/en/guide/flash-of-unstyled-content): Improve the page loading experience and ensure seamless rendering of content.
- [Global Styles](https://rc.css.master.co/en/guide/global-styles): Set up the global Master CSS entry, base layer, theme tokens, native global CSS, and shared component or utility vocabulary.
- [Installing Master CSS](https://rc.css.master.co/en/guide/installation): Install Master CSS with Vite, generate CSS from class names, and start styling in a few steps.
- [Progressive Rendering in Angular](https://rc.css.master.co/en/guide/installation/angular): Guide to setting up Master CSS progressive rendering in your Angular project.
- [Runtime Rendering in Angular](https://rc.css.master.co/en/guide/installation/angular/runtime-rendering): Guide to setting up Master CSS runtime rendering in your Angular project.
- [Static Rendering in Angular](https://rc.css.master.co/en/guide/installation/angular/static-rendering): Guide to setting up Master CSS static rendering in your Angular project.
- [Set up Master CSS in ASP.NET Core](https://rc.css.master.co/en/guide/installation/aspnet-core): Guide to setting up Master CSS in ASP.NET Core Razor Pages or MVC projects.
- [Static Rendering in ASP.NET Core](https://rc.css.master.co/en/guide/installation/aspnet-core/static-rendering): Guide to setting up Master CSS static rendering in ASP.NET Core Razor Pages or MVC projects.
- [Set up Master CSS in Astro](https://rc.css.master.co/en/guide/installation/astro): Guide to setting up Master CSS progressive rendering in your Astro project.
- [Runtime Rendering in Astro](https://rc.css.master.co/en/guide/installation/astro/runtime-rendering): Guide to setting up Master CSS runtime rendering in your Astro project.
- [Static Rendering in Astro](https://rc.css.master.co/en/guide/installation/astro/static-rendering): Guide to setting up Master CSS static rendering in your Astro project.
- [Set up Master CSS in Blazor](https://rc.css.master.co/en/guide/installation/blazor): Guide to setting up Master CSS in your Blazor project.
- [Runtime Rendering in Blazor](https://rc.css.master.co/en/guide/installation/blazor/runtime-rendering): Guide to setting up Master CSS runtime rendering in your Blazor project.
- [Static Rendering in Blazor](https://rc.css.master.co/en/guide/installation/blazor/static-rendering): Guide to setting up Master CSS static rendering in your Blazor project with Vite.
- [Using CDNs](https://rc.css.master.co/en/guide/installation/cdn): Copy and paste the CDN links to start the Master CSS runtime in your browser.
- [Using CLI](https://rc.css.master.co/en/guide/installation/cli): Using the CLI as a standalone static renderer when no integration fits.
- [Set up Master CSS in Express](https://rc.css.master.co/en/guide/installation/express): Guide to setting up Master CSS in Express server-rendered templates.
- [Static Rendering in Express](https://rc.css.master.co/en/guide/installation/express/static-rendering): Guide to setting up Master CSS static rendering in Express server-rendered templates.
- [Integrations](https://rc.css.master.co/en/guide/installation/integrations): Master CSS allows you to install from package managers, copy-paste CDNs, and integrate with frameworks.
- [Set up Master CSS in Laravel](https://rc.css.master.co/en/guide/installation/laravel): Guide to setting up Master CSS in your Laravel project.
- [Set up Master CSS in Lit](https://rc.css.master.co/en/guide/installation/lit): Guide to setting up Master CSS in your Lit project.
- [Progressive Rendering in Next.js](https://rc.css.master.co/en/guide/installation/nextjs): Guide to setting up Master CSS progressive rendering in your Next.js project.
- [Runtime Rendering in Next.js](https://rc.css.master.co/en/guide/installation/nextjs/runtime-rendering): Guide to setting up Master CSS runtime rendering in your Next.js project.
- [Static Rendering in Next.js](https://rc.css.master.co/en/guide/installation/nextjs/static-rendering): Guide to setting up Master CSS static rendering in your Next.js project.
- [Set up Master CSS in Nuxt.js](https://rc.css.master.co/en/guide/installation/nuxtjs): Guide to setting up Master CSS in your Nuxt.js project.
- [Runtime Rendering in Nuxt.js](https://rc.css.master.co/en/guide/installation/nuxtjs/runtime-rendering): Guide to setting up Master CSS runtime rendering in your Nuxt.js project.
- [Static Rendering in Nuxt.js](https://rc.css.master.co/en/guide/installation/nuxtjs/static-rendering): Guide to setting up Master CSS static rendering in your Nuxt.js project.
- [Set up Master CSS in PHP](https://rc.css.master.co/en/guide/installation/php): Guide to setting up Master CSS in plain PHP or CodeIgniter projects.
- [Static Rendering in PHP](https://rc.css.master.co/en/guide/installation/php/static-rendering): Guide to setting up Master CSS static rendering in plain PHP or CodeIgniter projects.
- [Set up Master CSS in Rails](https://rc.css.master.co/en/guide/installation/rails): Guide to setting up Master CSS in Ruby on Rails views.
- [Static Rendering in Rails](https://rc.css.master.co/en/guide/installation/rails/static-rendering): Guide to setting up Master CSS static rendering in Ruby on Rails views.
- [Set up Master CSS in React](https://rc.css.master.co/en/guide/installation/react): Guide to setting up Master CSS in your React project.
- [Set up Master CSS in React Router](https://rc.css.master.co/en/guide/installation/react-router): Guide to setting up Master CSS in your React Router project.
- [Static Rendering in React Router](https://rc.css.master.co/en/guide/installation/react-router/static-rendering): Guide to setting up Master CSS static rendering in your React Router project.
- [Static Rendering in React](https://rc.css.master.co/en/guide/installation/react/static-rendering): Guide to setting up Master CSS static rendering in your React project.
- [Set up Master CSS in Rsbuild](https://rc.css.master.co/en/guide/installation/rsbuild): Guide to setting up Master CSS in your Rsbuild project.
- [Static Rendering in Rsbuild](https://rc.css.master.co/en/guide/installation/rsbuild/static-rendering): Guide to setting up Master CSS static rendering in your Rsbuild project.
- [Set up Master CSS in Rspack](https://rc.css.master.co/en/guide/installation/rspack): Guide to setting up Master CSS in your Rspack project.
- [Static Rendering in Rspack](https://rc.css.master.co/en/guide/installation/rspack/static-rendering): Guide to setting up Master CSS static rendering in your Rspack project.
- [Set up Master CSS in Shopify](https://rc.css.master.co/en/guide/installation/shopify): Guide to setting up Master CSS in Shopify Liquid themes.
- [Set up Master CSS in Storybook](https://rc.css.master.co/en/guide/installation/storybook): Guide to setting up Master CSS in your Storybook project.
- [Set up Master CSS in Svelte](https://rc.css.master.co/en/guide/installation/svelte): Guide to setting up Master CSS in your Svelte project.
- [Set up Master CSS in TanStack Start](https://rc.css.master.co/en/guide/installation/tanstack-start): Guide to setting up Master CSS in your TanStack Start project.
- [Static Rendering in TanStack Start](https://rc.css.master.co/en/guide/installation/tanstack-start/static-rendering): Guide to setting up Master CSS static rendering in your TanStack Start project.
- [Set up Master CSS in Vite](https://rc.css.master.co/en/guide/installation/vite): Guide to setting up Master CSS in your Vite project.
- [Static Rendering in Vite](https://rc.css.master.co/en/guide/installation/vite/static-rendering): Guide to setting up Master CSS static rendering in your Vite project.
- [Set up Master CSS in Visual Studio Code](https://rc.css.master.co/en/guide/installation/vscode): Install the Master CSS extension, enable language-service features, and configure ESLint diagnostics and sort-on-save in Visual Studio Code.
- [Set up Master CSS in Vue.js](https://rc.css.master.co/en/guide/installation/vuejs): Guide to setting up Master CSS in your Vue.js project.
- [Static Rendering in Vue.js](https://rc.css.master.co/en/guide/installation/vuejs/static-rendering): Guide to setting up Master CSS static rendering in your Vue.js project.
- [Set up Master CSS in Webpack](https://rc.css.master.co/en/guide/installation/webpack): Guide to setting up Master CSS in your Webpack project.
- [Static Rendering in Webpack](https://rc.css.master.co/en/guide/installation/webpack/static-rendering): Guide to setting up Master CSS static rendering in your Webpack project.
- [Set up Master CSS in WordPress](https://rc.css.master.co/en/guide/installation/wordpress): Guide to setting up Master CSS in your WordPress theme.
- [Static Rendering in WordPress](https://rc.css.master.co/en/guide/installation/wordpress/static-rendering): Guide to setting up Master CSS static rendering in your WordPress theme.
- [Introduction to Master CSS](https://rc.css.master.co/en/guide/introduction): Learn what Master CSS is, write your first classes, and choose the next guide to read.
- [Language Service for Master CSS](https://rc.css.master.co/en/guide/language-service): Use manifest-aware editor intelligence for Master CSS classes, directives, project tokens, generated CSS previews, colors, and workspace-specific configuration.
- [Layout System](https://rc.css.master.co/en/guide/layout-system): Build responsive layout systems with containers, columns, gutters, breakpoints, container sizes, spacing tokens, CSS Grid, and Flexbox.
- [MCP Server for Master CSS](https://rc.css.master.co/en/guide/mcp-server): Connect AI clients to Master CSS project context, diagnostics, generated CSS previews, and safe write previews through the Model Context Protocol.
- [Migrating to Master CSS](https://rc.css.master.co/en/guide/migration): Migrate existing projects to Master CSS with incremental setup, styling-system audits, and review workflow.
- [Migrating from Bootstrap](https://rc.css.master.co/en/guide/migration/bootstrap): Move Bootstrap-styled screens toward Master CSS while preserving vendor CSS, JavaScript-driven components, and cascade-dependent overrides.
- [Migrating from CSS and CSS Modules](https://rc.css.master.co/en/guide/migration/css): Move global CSS and CSS Modules toward Master CSS where class strings, tokens, or composition make the result easier to maintain.
- [Migrating from CSS-in-JS](https://rc.css.master.co/en/guide/migration/css-in-js): Move styled-components and Emotion styles to Master CSS by converting static styles, preserving dynamic values, and keeping reusable component contracts explicit.
- [Migrating from Material UI](https://rc.css.master.co/en/guide/migration/material-ui): Move Material UI projects toward Master CSS by migrating app-owned layout, sx styles, theme tokens, and overrides without breaking component behavior.
- [Migrating from Sass](https://rc.css.master.co/en/guide/migration/sass): Move Sass variables, maps, mixins, placeholders, and nested component styles toward Master CSS without losing useful CSS structure.
- [Migrating from Tailwind CSS](https://rc.css.master.co/en/guide/migration/tailwindcss): Migrate a Tailwind CSS v4 project to Master CSS by translating CSS-first theme values, utilities, variants, and composition in reviewable batches.
- [Migrating from Master CSS v1](https://rc.css.master.co/en/guide/migration/v1): Upgrade a Master CSS v1 project to the current CSS-first setup by auditing packages, entries, rendering mode, theme directives, and class syntax.
- [Monorepo](https://rc.css.master.co/en/guide/monorepo): A guide to setting up Master CSS in a modern repository.
- [Motion](https://rc.css.master.co/en/guide/motion): Create motion with managed keyframes, duration tokens, easing tokens, shorthands, and reduced-motion conditions.
- [Native CSS pruning](https://rc.css.master.co/en/guide/native-css-pruning): Understand how Master CSS prunes unused native CSS class rules from managed stylesheets.
- [Optimizing critical resources](https://rc.css.master.co/en/guide/preload-critical-resources): The runtime engine plays a crucial role in the initial display of a page.
- [Rendering Modes](https://rc.css.master.co/en/guide/rendering-modes): Understand how the rendering modes of Master CSS work and enhance your website's performance.
- [Responsive Design](https://rc.css.master.co/en/guide/responsive-design): Adapt your user interface to different devices with flexible responsive syntax.
- [Route-level Styles](https://rc.css.master.co/en/guide/route-level-styles): Write route, page, and component-specific CSS with @reference, native selectors, @compose, variants, container queries, and native keyframes.
- [Scanning latent classes](https://rc.css.master.co/en/guide/scanning-latent-classes): Understand how Master CSS finds possible class names in source files and turns visible usage into generated CSS.
- [Sizing](https://rc.css.master.co/en/guide/sizing): Choose fluid dimensions, measured sizes, container caps, constraints, and responsive sizing rules for stable layouts.
- [Spacing](https://rc.css.master.co/en/guide/spacing): Use spacing tokens, base-unit multipliers, and precise low-level values for layout rhythm.
- [State Selectors](https://rc.css.master.co/en/guide/state-selectors): Learn how to append selectors for hover, focus, attributes, descendants, pseudo-elements, and custom states.
- [Style Declarations](https://rc.css.master.co/en/guide/style-declarations): Learn how Master CSS turns class names into CSS declarations, values, units, functions, variables, and shorthands.
- [Theme Tokens](https://rc.css.master.co/en/guide/theme): Define shared design tokens with @theme for colors, spacing, typography, radius, breakpoints, containers, shadows, and motion.
- [Typography](https://rc.css.master.co/en/guide/typography): Use text scale tokens, font utilities, line height, letter spacing, families, and weights.
- [Variables and Modes](https://rc.css.master.co/en/guide/variables-and-modes): Understand how Master CSS resolves theme variables, emits CSS custom properties, and applies light, dark, and custom modes.
- [View Transitions](https://rc.css.master.co/en/guide/view-transitions): Create state and page transitions with the browser View Transition API and Master CSS syntax.

## Messages
- [Console Messages](https://rc.css.master.co/en/messages): Errors and warnings you may encounter when using Master CSS.
- [Hydration Errors](https://rc.css.master.co/en/messages/hydration-errors): There was a difference between the CSS rules that was pre-rendered from the server and the Master CSS rules that was rendered during the first render in the browser.
- [Missing Master CSS entry](https://rc.css.master.co/en/messages/missing-master-css): The integration could not find a project CSS entry for the shared MasterCSSManifest, editor tooling, and build integration behavior.

## Reference
- [API Reference](https://rc.css.master.co/en/reference): This section provides detailed reference documentation for working with Master CSS.
- [accent-color](https://rc.css.master.co/en/reference/accent-color): Setting the accent color of user interface elements or controls.
- [align-content](https://rc.css.master.co/en/reference/align-content): Controlling how multiple rows or columns are aligned along its cross axis.
- [align-items](https://rc.css.master.co/en/reference/align-items): Controlling how items are aligned along its cross axis.
- [align-self](https://rc.css.master.co/en/reference/align-self): Controlling how an individual item is aligned along its cross axis.
- [animation](https://rc.css.master.co/en/reference/animation): Applying an animation between styles.
- [animation-delay](https://rc.css.master.co/en/reference/animation-delay): Setting a time to delay before beginning to perform the animation.
- [animation-direction](https://rc.css.master.co/en/reference/animation-direction): Setting the direction of the animation.
- [animation-duration](https://rc.css.master.co/en/reference/animation-duration): Setting the length of time that an animation takes to complete one cycle.
- [animation-fill-mode](https://rc.css.master.co/en/reference/animation-fill-mode): Setting how a CSS animation applies styles to its target before and after its execution.
- [animation-iteration-count](https://rc.css.master.co/en/reference/animation-iteration-count): Setting the number of times an animation should be played.
- [animation-name](https://rc.css.master.co/en/reference/animation-name): Setting the names of the animation.
- [animation-play-state](https://rc.css.master.co/en/reference/animation-play-state): Setting whether an animation is running or paused.
- [animation-timing-function](https://rc.css.master.co/en/reference/animation-timing-function): Setting speed curve of the animation.
- [appearance](https://rc.css.master.co/en/reference/appearance): Controlling the native appearance of UI controls.
- [aspect-ratio](https://rc.css.master.co/en/reference/aspect-ratio): Setting the ratio for the box.
- [backdrop-filter](https://rc.css.master.co/en/reference/backdrop-filter): Style syntax for applying filter effects to the area behind an target element.
- [background](https://rc.css.master.co/en/reference/background): Setting all background style properties at once.
- [background-attachment](https://rc.css.master.co/en/reference/background-attachment): Setting whether position of background image is fixed when scrolling.
- [background-blend-mode](https://rc.css.master.co/en/reference/background-blend-mode): Setting how an element's background images should blend with the background color.
- [background-clip](https://rc.css.master.co/en/reference/background-clip): Controlling how clip the background.
- [background-color](https://rc.css.master.co/en/reference/background-color): Setting the background color of an element.
- [background-image](https://rc.css.master.co/en/reference/background-image): Setting background images on an element.
- [background-origin](https://rc.css.master.co/en/reference/background-origin): Setting the background's origin.
- [background-position](https://rc.css.master.co/en/reference/background-position): Setting the initial position for background image.
- [background-repeat](https://rc.css.master.co/en/reference/background-repeat): Setting how background images are repeated.
- [background-size](https://rc.css.master.co/en/reference/background-size): Setting the size of the background image.
- [border](https://rc.css.master.co/en/reference/border): Setting an element’s border.
- [border-collapse](https://rc.css.master.co/en/reference/border-collapse): Setting whether table cell have shared or separate borders.
- [border-color](https://rc.css.master.co/en/reference/border-color): Setting the color of an element’s border.
- [border-image](https://rc.css.master.co/en/reference/border-image): Drawing an image around an element as its border.
- [border-image-outset](https://rc.css.master.co/en/reference/border-image-outset): Setting how far the border image extends beyond the border box.
- [border-image-repeat](https://rc.css.master.co/en/reference/border-image-repeat): Defining how border image edge regions fit the border image area.
- [border-image-slice](https://rc.css.master.co/en/reference/border-image-slice): Dividing a border image source into corner, edge, and center regions.
- [border-image-source](https://rc.css.master.co/en/reference/border-image-source): Setting the source image used to create an element border image.
- [border-image-width](https://rc.css.master.co/en/reference/border-image-width): Setting the width of an element border image.
- [border-radius](https://rc.css.master.co/en/reference/border-radius): Setting radius of an element’s corners.
- [border-style](https://rc.css.master.co/en/reference/border-style): Setting the line style for an element’s border.
- [border-width](https://rc.css.master.co/en/reference/border-width): Setting the width of an element’s border.
- [box-decoration-break](https://rc.css.master.co/en/reference/box-decoration-break): Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
- [box-shadow](https://rc.css.master.co/en/reference/box-shadow): Adding light and dark shadow effects around an element.
- [box-sizing](https://rc.css.master.co/en/reference/box-sizing): Setting how the total width and height of an element is calculated.
- [break-after](https://rc.css.master.co/en/reference/break-after): Controlling how page, column, or region breaks should occur after an element.
- [break-before](https://rc.css.master.co/en/reference/break-before): Controlling how page, column, or region breaks should occur before the specified element.
- [break-inside](https://rc.css.master.co/en/reference/break-inside): Controlling how page, column, or region breaks should occur within the specified element.
- [caret-color](https://rc.css.master.co/en/reference/caret-color): Setting the color of the cursor in text input.
- [clear](https://rc.css.master.co/en/reference/clear): Moving an element below floating elements instead of floating to the left or right.
- [clip-path](https://rc.css.master.co/en/reference/clip-path): Creating a clipping region.
- [color](https://rc.css.master.co/en/reference/color): Setting foreground color of an element.
- [column-span](https://rc.css.master.co/en/reference/column-span): Setting how elements span across multiple columns.
- [columns](https://rc.css.master.co/en/reference/columns): Setting the number of columns within the container.
- [contain](https://rc.css.master.co/en/reference/contain): Providing performance benefits by limiting calculations of layout.
- [content](https://rc.css.master.co/en/reference/content): Replacing an element with a generated value.
- [counter-increment](https://rc.css.master.co/en/reference/counter-increment): Increasing or decreasing the value of named CSS counters.
- [counter-reset](https://rc.css.master.co/en/reference/counter-reset): Creating named CSS counters and initializing them to specific values.
- [counter-set](https://rc.css.master.co/en/reference/counter-set): Setting existing CSS counters to specific values on selected elements.
- [cursor](https://rc.css.master.co/en/reference/cursor): Setting the mouse cursor style.
- [direction](https://rc.css.master.co/en/reference/direction): Setting the direction of text.
- [display](https://rc.css.master.co/en/reference/display): Controlling the element's inner and outer display types.
- [fill](https://rc.css.master.co/en/reference/fill): Setting the color of an SVG shape.
- [filter](https://rc.css.master.co/en/reference/filter): Applying graphic effects to an element.
- [flex](https://rc.css.master.co/en/reference/flex): Setting how flex items grow or shrink.
- [flex-basis](https://rc.css.master.co/en/reference/flex-basis): Setting the initial main size of a flex item.
- [flex-direction](https://rc.css.master.co/en/reference/flex-direction): Setting the direction of flex items.
- [flex-grow](https://rc.css.master.co/en/reference/flex-grow): Setting how flex items grow.
- [flex-shrink](https://rc.css.master.co/en/reference/flex-shrink): Setting how flex items shrink.
- [flex-wrap](https://rc.css.master.co/en/reference/flex-wrap): Setting how flex items wrap.
- [float](https://rc.css.master.co/en/reference/float): Placing an element on the left or right side of its container.
- [font-family](https://rc.css.master.co/en/reference/font-family): Setting the font for an element.
- [font-feature-settings](https://rc.css.master.co/en/reference/font-feature-settings): Controlling advanced typographic features in OpenType fonts.
- [font-size](https://rc.css.master.co/en/reference/font-size): Setting the font size of elements.
- [font-smooth](https://rc.css.master.co/en/reference/font-smooth): Controlling the application of anti-aliasing when fonts are rendered.
- [font-style](https://rc.css.master.co/en/reference/font-style): Setting font style of an element.
- [font-variant-numeric](https://rc.css.master.co/en/reference/font-variant-numeric): Controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.
- [font-weight](https://rc.css.master.co/en/reference/font-weight): Setting the weight of the font.
- [gap](https://rc.css.master.co/en/reference/gap): Setting the gutters between rows and columns.
- [grid](https://rc.css.master.co/en/reference/grid): Setting layout of grid system.
- [grid-area](https://rc.css.master.co/en/reference/grid-area): Setting a size and location within a grid.
- [grid-auto-columns](https://rc.css.master.co/en/reference/grid-auto-columns): Setting the size of the grid columns.
- [grid-auto-flow](https://rc.css.master.co/en/reference/grid-auto-flow): Controlling how auto-placed items get inserted in the grid.
- [grid-auto-rows](https://rc.css.master.co/en/reference/grid-auto-rows): Setting the size of the grid rows.
- [grid-column](https://rc.css.master.co/en/reference/grid-column): Setting a grid items's size and location in a grid layout.
- [grid-columns](https://rc.css.master.co/en/reference/grid-columns): Style utility for creating multiple grid columns.
- [grid-row](https://rc.css.master.co/en/reference/grid-row): Setting a grid items's size and location in a grid layout.
- [grid-rows](https://rc.css.master.co/en/reference/grid-rows): Style utility for creating multiple grid rows.
- [grid-template](https://rc.css.master.co/en/reference/grid-template): Setting grid columns, grid rows, and grid areas.
- [grid-template-areas](https://rc.css.master.co/en/reference/grid-template-areas): Setting areas in the grid container
- [grid-template-columns](https://rc.css.master.co/en/reference/grid-template-columns): Creating columns in a grid layout.
- [grid-template-rows](https://rc.css.master.co/en/reference/grid-template-rows): Creating rows in a grid layout.
- [height](https://rc.css.master.co/en/reference/height): Setting an element’s height.
- [hyphens](https://rc.css.master.co/en/reference/hyphens): Set how to split words to improve the layout of paragraphs.
- [inset](https://rc.css.master.co/en/reference/inset): Setting distance between an element and the parent element.
- [isolation](https://rc.css.master.co/en/reference/isolation): Controlling whether an element should create a new stacking context.
- [justify-content](https://rc.css.master.co/en/reference/justify-content): Controlling how items are aligned along its main axis.
- [justify-items](https://rc.css.master.co/en/reference/justify-items): Controlling how items are aligned along its inline axis.
- [justify-self](https://rc.css.master.co/en/reference/justify-self): Controlling how an individual item is aligned along its inline axis.
- [letter-spacing](https://rc.css.master.co/en/reference/letter-spacing): Setting the spacing between text characters.
- [line-clamp](https://rc.css.master.co/en/reference/line-clamp): Limiting the contents of a container to the specified number of lines.
- [line-height](https://rc.css.master.co/en/reference/line-height): Setting the height of a line box.
- [list-style](https://rc.css.master.co/en/reference/list-style): Setting all the list style properties at once.
- [list-style-image](https://rc.css.master.co/en/reference/list-style-image): Replacing the list item marker with an image.
- [list-style-position](https://rc.css.master.co/en/reference/list-style-position): Setting the position of the list item marker.
- [list-style-type](https://rc.css.master.co/en/reference/list-style-type): Setting the style of the list item marker.
- [margin](https://rc.css.master.co/en/reference/margin): Setting the margin area on all four sides of an element.
- [mask-image](https://rc.css.master.co/en/reference/mask-image): Setting the image that is used as mask layer for an element.
- [max-height](https://rc.css.master.co/en/reference/max-height): Setting the maximum height of an element.
- [max-size](https://rc.css.master.co/en/reference/max-size): Style shorthand for setting the max-width and max-height of an element.
- [max-width](https://rc.css.master.co/en/reference/max-width): Setting the maximum width of an element.
- [min-height](https://rc.css.master.co/en/reference/min-height): Setting the minimum height of an element.
- [min-size](https://rc.css.master.co/en/reference/min-size): Style shorthand for setting the min-width and min-height of an element.
- [min-width](https://rc.css.master.co/en/reference/min-width): Setting the minimum width of an element.
- [mix-blend-mode](https://rc.css.master.co/en/reference/mix-blend-mode): Setting how an element's content should blend with its parent background.
- [object-fit](https://rc.css.master.co/en/reference/object-fit): Setting how the content should be resized to fit its container.
- [object-position](https://rc.css.master.co/en/reference/object-position): Setting the alignment of the selected replaced element within the element's box.
- [opacity](https://rc.css.master.co/en/reference/opacity): Setting the opacity of an element.
- [order](https://rc.css.master.co/en/reference/order): Changing the order of item in flex or grid container.
- [outline](https://rc.css.master.co/en/reference/outline): Setting all the outline properties at once.
- [outline-color](https://rc.css.master.co/en/reference/outline-color): Setting the color of an element’s outline.
- [outline-offset](https://rc.css.master.co/en/reference/outline-offset): Setting the spacing between an outline and the border of an element.
- [outline-style](https://rc.css.master.co/en/reference/outline-style): Setting the style of an element's outline.
- [outline-width](https://rc.css.master.co/en/reference/outline-width): Setting the thickness of an element's outline.
- [overflow](https://rc.css.master.co/en/reference/overflow): Controlling the desired behavior for an element's overflow.
- [overflow-wrap](https://rc.css.master.co/en/reference/overflow-wrap): Controlling how words should break when they overflow their element
- [overscroll-behavior](https://rc.css.master.co/en/reference/overscroll-behavior): Setting what a browser does when reaching the boundary of a scrolling area.
- [padding](https://rc.css.master.co/en/reference/padding): Setting the padding area on all four sides of an element.
- [place-content](https://rc.css.master.co/en/reference/place-content): Setting align-content and justify-content at the same time.
- [place-items](https://rc.css.master.co/en/reference/place-items): Setting align-items and justify-items at the same time.
- [place-self](https://rc.css.master.co/en/reference/place-self): Setting align-self and justify-self at the same time.
- [pointer-events](https://rc.css.master.co/en/reference/pointer-events): Setting whether an element reacts to pointer events.
- [position](https://rc.css.master.co/en/reference/position): Setting an element is positioned in a document.
- [resize](https://rc.css.master.co/en/reference/resize): Setting whether an element is resizable.
- [screen-readers](https://rc.css.master.co/en/reference/screen-readers): Style utility for imporving the accessibility with screen readers.
- [scroll-behavior](https://rc.css.master.co/en/reference/scroll-behavior): Setting the scrolling behavior for a scrolling box.
- [scroll-margin](https://rc.css.master.co/en/reference/scroll-margin): Setting the scroll margin of an element.
- [scroll-padding](https://rc.css.master.co/en/reference/scroll-padding): Setting the scroll padding of an element.
- [scroll-snap-align](https://rc.css.master.co/en/reference/scroll-snap-align): Setting the scroll snap position.
- [scroll-snap-stop](https://rc.css.master.co/en/reference/scroll-snap-stop): Setting whether scroll container is pass over snap positions.
- [scroll-snap-type](https://rc.css.master.co/en/reference/scroll-snap-type): Setting how strictly snap points are enforced on the scroll container.
- [shape-image-threshold](https://rc.css.master.co/en/reference/shape-image-threshold): Setting the alpha channel threshold for a CSS shape.
- [shape-margin](https://rc.css.master.co/en/reference/shape-margin): Setting a margin for a CSS shape.
- [shape-outside](https://rc.css.master.co/en/reference/shape-outside): Setting a shape around which adjacent inline content should wrap.
- [size](https://rc.css.master.co/en/reference/size): Style shorthand for setting the width and height of an element.
- [stroke](https://rc.css.master.co/en/reference/stroke): Setting the outline color of an SVG shape.
- [stroke-width](https://rc.css.master.co/en/reference/stroke-width): Setting the width of the stroke to be applied to the SVG shape.
- [text-align](https://rc.css.master.co/en/reference/text-align): Setting the text alignment of an element.
- [text-decoration](https://rc.css.master.co/en/reference/text-decoration): Setting the appearance of decorative lines on text.
- [text-decoration-color](https://rc.css.master.co/en/reference/text-decoration-color): Setting the color of decorative lines on text.
- [text-decoration-line](https://rc.css.master.co/en/reference/text-decoration-line): Setting the kind of decoration that is used on text.
- [text-decoration-style](https://rc.css.master.co/en/reference/text-decoration-style): Setting the style of the decoration line that is used on text.
- [text-decoration-thickness](https://rc.css.master.co/en/reference/text-decoration-thickness): Setting thickness of the decoration line.
- [text-fill-color](https://rc.css.master.co/en/reference/text-fill-color): Setting the color of text.
- [text-indent](https://rc.css.master.co/en/reference/text-indent): Setting indentation of the first line.
- [text-orientation](https://rc.css.master.co/en/reference/text-orientation): Setting orientation of the text characters in a line.
- [text-overflow](https://rc.css.master.co/en/reference/text-overflow): Handling how hidden overflow content.
- [text-rendering](https://rc.css.master.co/en/reference/text-rendering): Setting what to optimize when rendering text.
- [text-shadow](https://rc.css.master.co/en/reference/text-shadow): Adding shadows to text.
- [text-size](https://rc.css.master.co/en/reference/text-size): Style utility for setting optimally proportioned font size, line height and letter spacing all at once.
- [text-stroke](https://rc.css.master.co/en/reference/text-stroke): Setting the width and color of strokes for text characters.
- [text-stroke-color](https://rc.css.master.co/en/reference/text-stroke-color): Setting the color of the stroke for text characters.
- [text-stroke-width](https://rc.css.master.co/en/reference/text-stroke-width): Setting the width of the stroke for text characters.
- [text-transform](https://rc.css.master.co/en/reference/text-transform): Controlling capitalization of text.
- [text-underline-offset](https://rc.css.master.co/en/reference/text-underline-offset): Setting the distance of a text decoration line from its original position.
- [text-wrap](https://rc.css.master.co/en/reference/text-wrap): Controlling how text inside an element is wrapped.
- [touch-action](https://rc.css.master.co/en/reference/touch-action): Setting how an element's region can be manipulated by a touchscreen user.
- [transform](https://rc.css.master.co/en/reference/transform): Controlling rotate, scale, skew, or translate an element.
- [transform-box](https://rc.css.master.co/en/reference/transform-box): Defining the layout box to which transform and transform-origin properties relate.
- [transform-origin](https://rc.css.master.co/en/reference/transform-origin): Setting the origin for an element’s transformations.
- [transform-style](https://rc.css.master.co/en/reference/transform-style): Setting how children of an element are rendered in the 3D space.
- [transition](https://rc.css.master.co/en/reference/transition): Controlling animation speed when changing CSS properties.
- [transition-delay](https://rc.css.master.co/en/reference/transition-delay): Setting a time to delay before starting transition.
- [transition-duration](https://rc.css.master.co/en/reference/transition-duration): Setting the length of time a transition should takes to complete.
- [transition-property](https://rc.css.master.co/en/reference/transition-property): Setting the CSS properties to which a transition effect should be applied.
- [transition-timing-function](https://rc.css.master.co/en/reference/transition-timing-function): Setting speed curve of the transition effect.
- [user-drag](https://rc.css.master.co/en/reference/user-drag): Controlling whether the user can drag element.
- [user-select](https://rc.css.master.co/en/reference/user-select): Controlling whether the user can select text.
- [vertical-align](https://rc.css.master.co/en/reference/vertical-align): Setting vertical alignment.
- [visibility](https://rc.css.master.co/en/reference/visibility): Controlling whether an element is visible.
- [white-space](https://rc.css.master.co/en/reference/white-space): Controlling how whitespace and line breaks within an element are handled.
- [width](https://rc.css.master.co/en/reference/width): Setting an element’s width.
- [will-change](https://rc.css.master.co/en/reference/will-change): Setting how an element is expected to change in the browser.
- [word-break](https://rc.css.master.co/en/reference/word-break): Setting whether words should break.
- [word-spacing](https://rc.css.master.co/en/reference/word-spacing): Setting the spacing between words.
- [writing-mode](https://rc.css.master.co/en/reference/writing-mode): Setting different writing mode.
- [z-index](https://rc.css.master.co/en/reference/z-index): Set the z-order of a positioned element.

## Sponsor
- [Sponsor](https://rc.css.master.co/en/sponsor): Donate a small portion of your income benefiting from us to help grow.