* | Universal selector (all elements) |
element | Type selector |
.class | Class selector |
#id | ID selector |
[attr] | Attribute selector |
[attr="value"] | Exact attribute value |
[attr^="value"] | Starts with |
[attr$="value"] | Ends with |
[attr*="value"] | Contains |
A B | Descendant (B inside A) |
A > B | Child (direct child) |
A + B | Adjacent sibling (next) |
A ~ B | General sibling (all after) |
A, B | Grouping (A or B) |
:hover | Mouse over element |
:active | Being clicked |
:focus | Has focus |
:focus-visible | Focus via keyboard |
:visited | Visited link |
:first-child | First child element |
:last-child | Last child element |
:nth-child(n) | nth child (1, 2, odd, even, 2n+1) |
:nth-of-type(n) | nth of type |
:not(selector) | Negation |
:is(a, b) | Matches any selector |
:where(a, b) | Like :is but 0 specificity |
:has(selector) | Parent selector |
:empty | Empty element |
:disabled | Disabled form element |
:checked | Checked input |
::before | Insert before content |
::after | Insert after content |
::first-line | First line of text |
::first-letter | First letter |
::selection | Selected text |
::placeholder | Input placeholder |
::marker | List item marker |
box-sizing: border-box | Include padding/border in width |
width / height | Element dimensions |
min-width / max-width | Min/max width constraints |
padding: 10px | Inner spacing (all sides) |
padding: 10px 20px | Vertical | Horizontal |
padding: 10px 20px 30px 40px | Top Right Bottom Left |
margin: auto | Center horizontally |
border: 1px solid #000 | Border shorthand |
border-radius: 8px | Rounded corners |
outline | Outline (no space) |
display: block | Block element (full width) |
display: inline | Inline element |
display: inline-block | Inline with block props |
display: none | Hide element |
display: flex | Flexbox container |
display: grid | Grid container |
display: contents | Remove wrapper |
visibility: hidden | Hide but keep space |
opacity: 0 | Transparent |
position: static | Default position |
position: relative | Relative to normal position |
position: absolute | Relative to positioned parent |
position: fixed | Relative to viewport |
position: sticky | Sticky on scroll |
top / right / bottom / left | Offset properties |
inset: 0 | Shorthand for all offsets |
z-index: 10 | Stack order |
display: flex | Enable flexbox |
flex-direction: row | column | Main axis direction |
flex-wrap: wrap | nowrap | Allow wrapping |
flex-flow: row wrap | Direction + wrap shorthand |
justify-content: flex-start | Align on main axis |
justify-content: center | Center on main axis |
justify-content: space-between | Space between items |
justify-content: space-around | Space around items |
justify-content: space-evenly | Equal space |
align-items: stretch | center | Align on cross axis |
align-content | Align wrapped lines |
gap: 10px | Gap between items |
flex: 1 | Grow to fill space |
flex: 0 0 auto | grow shrink basis |
flex-grow: 1 | Grow factor |
flex-shrink: 0 | Prevent shrinking |
flex-basis: 200px | Initial size |
align-self: center | Override align-items |
order: -1 | Change visual order |
display: grid | Enable grid |
grid-template-columns: 1fr 1fr 1fr | Define columns |
grid-template-columns: repeat(3, 1fr) | Repeat columns |
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) | Responsive columns |
grid-template-rows | Define rows |
grid-auto-rows: minmax(100px, auto) | Auto row sizing |
gap: 20px | Grid gap |
row-gap / column-gap | Specific gaps |
grid-template-areas | Named grid areas |
justify-items / align-items | Align all items |
place-items: center | Center items (both) |
grid-column: 1 / 3 | Span columns (start/end) |
grid-column: span 2 | Span 2 columns |
grid-row: 1 / 3 | Span rows |
grid-area: header | Named area |
justify-self / align-self | Align single item |
place-self: center | Center single item |
font-family: sans-serif | Font family |
font-size: 16px | 1rem | Font size |
font-weight: 400 | bold | Font weight |
font-style: italic | Italic text |
font: 16px/1.5 sans-serif | Font shorthand |
line-height: 1.5 | Line height |
letter-spacing: 0.05em | Letter spacing |
word-spacing: 4px | Word spacing |
color: #333 | Text color |
text-align: left | center | right | Text alignment |
text-decoration: underline | none | Text decoration |
text-transform: uppercase | Text transform |
text-indent: 2em | First line indent |
text-shadow: 1px 1px 2px #000 | Text shadow |
white-space: nowrap | Prevent wrapping |
word-break: break-word | Break long words |
overflow-wrap: break-word | Break overflow |
text-overflow: ellipsis | Ellipsis for overflow |
#ff0000 | #f00 | Hex color |
rgb(255, 0, 0) | RGB color |
rgba(255, 0, 0, 0.5) | RGB with alpha |
hsl(0, 100%, 50%) | HSL color |
hsla(0, 100%, 50%, 0.5) | HSL with alpha |
transparent | Transparent |
currentColor | Current text color |
background-color: #fff | Background color |
background-image: url(...) | Background image |
background-size: cover | contain | Background size |
background-position: center | Background position |
background-repeat: no-repeat | Background repeat |
background: linear-gradient(to right, #f00, #00f) | Linear gradient |
background: radial-gradient(circle, #f00, #00f) | Radial gradient |
transition: all 0.3s ease | Transition shorthand |
transition-property | Properties to animate |
transition-duration: 0.3s | Transition duration |
transition-timing-function: ease | Easing function |
animation: name 1s infinite | Animation shorthand |
@keyframes name { from {} to {} } | Define keyframes |
transform: translateX(10px) | Move horizontally |
transform: translateY(10px) | Move vertically |
transform: translate(10px, 20px) | Move both axes |
transform: scale(1.5) | Scale element |
transform: rotate(45deg) | Rotate element |
transform: skew(10deg) | Skew element |
transform-origin: center | Transform origin |
filter: blur(5px) | Blur effect |
filter: brightness(1.2) | Brightness |
filter: contrast(1.2) | Contrast |
filter: grayscale(100%) | Grayscale |
filter: drop-shadow(2px 2px 4px #000) | Drop shadow |
box-shadow: 0 4px 6px rgba(0,0,0,0.1) | Box shadow |
backdrop-filter: blur(10px) | Backdrop blur |
mix-blend-mode: multiply | Blend mode |
@media (min-width: 768px) { } | Min width query |
@media (max-width: 768px) { } | Max width query |
@media (prefers-color-scheme: dark) | Dark mode |
@media (prefers-reduced-motion) | Reduced motion |
@media print { } | Print styles |
--color-primary: #007bff | Define variable |
var(--color-primary) | Use variable |
var(--color, #000) | Variable with fallback |
:root { --var: value } | Global variables |
rem | Relative to root font-size |
em | Relative to parent font-size |
vw / vh | Viewport width/height % |
dvh / svh / lvh | Dynamic/Small/Large viewport |
ch | Width of "0" character |
clamp(min, preferred, max) | Clamped value |
min() / max() | Min/max functions |
calc(100% - 20px) | Calculate values |
$color: #fff | Variable |
.parent { .child { } } | Nesting |
&:hover | Parent selector |
&--modifier | BEM modifier |
#{$var} | Interpolation |
@mixin name { } | Define mixin |
@mixin name($arg) { } | Mixin with argument |
@include name | Use mixin |
@function name($x) { @return $x * 2 } | Define function |
@extend .class | Extend another class |
@if $condition { } | If statement |
@else if { } @else { } | Else if/else |
@for $i from 1 through 3 { } | For loop |
@each $item in $list { } | Each loop |
@while $condition { } | While loop |
@use "module" | Import module (new) |
@use "module" as m | Import with namespace |
@forward "module" | Re-export module |
@import "file" | Import (deprecated) |