ページを読み込んでいます
Searchable CSS properties and patterns cheat sheet organized by category. Covers selectors, Flexbox, Grid, box model, typography, layout, and visual effects with copy support.
Enter a property name in the search field, or filter by category (Flexbox, Grid, etc.) to find what you need.
Check the property description, syntax, and available values for each CSS property.
Click the copy button to copy the property name to your clipboard for immediate use in your stylesheet.
element { }.classname { }#idname { }[attr], [attr=value], [attr^=value]selector:pseudo-class { }selector::pseudo-element { }A B, A > B, A + B, A ~ Bdisplay: flex | inline-flexflex-direction: row | row-reverse | column | column-reversejustify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyalign-items: stretch | flex-start | flex-end | center | baselineflex-wrap: nowrap | wrap | wrap-reversegap: <row-gap> <column-gap>flex-grow: <number>flex-shrink: <number>flex-basis: auto | <length> | <percentage>display: grid | inline-gridgrid-template-columns: <track-list>grid-template-rows: <track-list>gap: <row-gap> <column-gap>grid-column: <start> / <end>grid-row: <start> / <end>place-items: <align-items> <justify-items>margin: <top> <right> <bottom> <left>padding: <top> <right> <bottom> <left>border: <width> <style> <color>box-sizing: content-box | border-boxwidth: <value>; height: <value>overflow: visible | hidden | scroll | autofont-size: <length> | <percentage> | keywordfont-weight: normal | bold | <number>line-height: normal | <number> | <length>text-align: left | right | center | justifytext-decoration: none | underline | line-through | overlineword-break: normal | break-all | keep-all | break-wordposition: static | relative | absolute | fixed | stickydisplay: block | inline | inline-block | none | ...z-index: auto | <integer>float: none | left | right | inline-start | inline-endclear: none | left | right | bothbackground: <color> | url() | linear-gradient()color: <color>opacity: <number between 0 and 1>box-shadow: <offset-x> <offset-y> <blur> <spread> <color>border-radius: <length> | <percentage>transform: <function>transition: <property> <duration> <timing> <delay>animation: <name> <duration> <timing> <delay> <iteration> <direction>CSS Cheat Sheet is a reference collection of frequently used CSS properties and patterns. It covers everything from fundamental selectors and box model to modern layout techniques like Flexbox and Grid, typography, and visual effects. Each entry includes a description, syntax, and practical values to help you write CSS faster.
Flexbox is a one-dimensional layout method designed for laying out items in a single row or column. CSS Grid is a two-dimensional layout system that can handle both rows and columns simultaneously. Use Flexbox for component-level layout and Grid for page-level or complex two-dimensional layouts.
Padding is the space inside an element, between the content and the border. Margin is the space outside an element, between the border and surrounding elements. Background color applies to padding but not to margin.
By default (content-box), width and height only apply to the content area. With border-box, width and height include padding and border, making it easier to predict element sizes. Most modern CSS resets apply border-box to all elements.
absolute positioning places an element relative to its nearest positioned ancestor (an ancestor with position other than static). fixed positioning places an element relative to the viewport, so it stays in place when scrolling. Use fixed for sticky headers, modals, or floating buttons.
transition animates a property change from one state to another, typically triggered by user interaction (like :hover). animation uses @keyframes to define multi-step animations that can run automatically, loop, or play in reverse. Use transition for simple state changes and animation for complex, autonomous motion.