The Ultimate CSS Cheat Sheet for Web Developers
Cascading Style Sheets (CSS) is the backbone of modern web design, allowing developers to control the look and feel of their websites. Whether you’re a beginner or an experienced developer, having a quick reference guide can save time and streamline your workflow. This CSS cheat sheet covers essential properties, selectors, and layout techniques to help you style your projects efficiently.
Why Use a CSS Cheat Sheet?
CSS has evolved significantly over the years, introducing features like Flexbox, Grid, animations, and custom properties (variables). With so many properties available, remembering every detail can be challenging. A well-organized cheat sheet serves as a handy reference, helping you:
- Quickly recall syntax and property values
- Implement responsive designs with media queries
- Master layout systems like Flexbox and Grid
- Apply transitions and animations without hassle
Key CSS Concepts Covered
Responsive Design – Use media queries (@media) to adapt layouts for different screen sizes.
Selectors & Combinators – Target elements using classes, IDs, pseudo-classes (:hover, :nth-child), and combinators (>, +).
Box Model – Control spacing with margin, padding, and border, and use box-sizing for consistent sizing.
Flexbox & Grid – Build responsive layouts with flexible alignment (justify-content, align-items) and grid templates.
Typography & Colors – Style text with font-family, line-height, and text-align, and define colors using hex, rgb(), or hsl().
Transitions & Animations – Add smooth effects with transition and @keyframes.
Selectors
- Basic Selectors
* /* Universal selector */
element /* Type selector (e.g., div, p) */
.class /* Class selector */
#id /* ID selector */
[attr] /* Attribute selector */
[attr=value] /* Attribute with exact value */- Combinators
selector1 selector2 /* Descendant */
selector1 > selector2 /* Child */
selector1 + selector2 /* Adjacent sibling */
selector1 ~ selector2 /* General sibling */- Pseudo-classes
:active /* Activated element */
:hover /* On mouse hover */
:focus /* Element has focus */
:nth-child(n) /* nth child */
:first-child /* First child */
:last-child /* Last child */
:only-child /* Only child */
:not(selector) /* Negation */
:checked /* Checked radio/checkbox */
:disabled /* Disabled element */
:empty /* Element with no children */- Pseudo-elements
::before /* Insert content before */
::after /* Insert content after */
::first-line /* First line of text */
::first-letter /* First letter of text */
::selection /* User highlighted text */Box Model
width /* Element width */
height /* Element height */
margin /* Space outside border */
padding /* Space inside border */
border /* Border around element */
box-sizing: border-box /* Includes padding/border in width/height */Display & Positioning
display: block | inline | inline-block | flex | grid | none
position: static | relative | absolute | fixed | sticky
top, right, bottom, left /* Positioning offsets */
float: left | right | none
clear: left | right | both | none
z-index /* Stacking order */
visibility: visible | hidden | collapseFlexbox
display: flex | inline-flex
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: <flex-direction> <flex-wrap>
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
align-items: stretch | flex-start | flex-end | center | baseline
align-content: flex-start | flex-end | center | space-between | space-around | stretch
order /* Item order */
flex-grow /* Grow factor */
flex-shrink /* Shrink factor */
flex-basis /* Default size */
align-self /* Override align-items */Grid
display: grid | inline-grid
grid-template-columns: <track-size> | <line-name> <track-size>
grid-template-rows: <track-size> | <line-name> <track-size>
grid-template-areas: "<grid-area-names>"
grid-column-gap, grid-row-gap /* Gaps between items */
grid-gap: <grid-row-gap> <grid-column-gap>
justify-items: start | end | center | stretch
align-items: start | end | center | stretch
grid-auto-columns, grid-auto-rows /* Implicit tracks */
grid-auto-flow: row | column | row dense | column dense
/* Grid Item Properties */
grid-column-start, grid-column-end
grid-row-start, grid-row-end
grid-column: <start-line> / <end-line> | <start-line> / span <value>
grid-row: <start-line> / <end-line> | <start-line> / span <value>
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
justify-self: start | end | center | stretch
align-self: start | end | center | stretchTypography
font-family /* Font stack */
font-size /* Text size */
font-weight: normal | bold | bolder | lighter | 100-900
font-style: normal | italic | oblique
line-height /* Line spacing */
text-align: left | right | center | justify
text-decoration: none | underline | overline | line-through
text-transform: none | capitalize | uppercase | lowercase
letter-spacing /* Space between characters */
word-spacing /* Space between words */
color /* Text color */Backgrounds
background-color
background-image: url("")
background-repeat: repeat | repeat-x | repeat-y | no-repeat
background-position: left top | x% y% | xpos ypos
background-attachment: scroll | fixed | local
background-size: auto | length | cover | contain
background: <color> <image> <position> <size> <repeat> <attachment>Borders & Outlines
border-width
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-color
border: <width> <style> <color>
border-radius /* Rounded corners */
outline /* Focus outline */
box-shadow: h-offset v-offset blur spread color insetTransforms & Transitions
transform: none | translate() | rotate() | scale() | skew() | matrix()
transform-origin: x-axis y-axis z-axis
transition-property: none | all | property
transition-duration: time
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier()
transition-delay: time
transition: property duration timing-function delayAnimations
@keyframes name {
from { /* styles */ }
to { /* styles */ }
/* or */
0% { /* styles */ }
100% { /* styles */ }
}
animation-name: keyframe-name
animation-duration: time
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier()
animation-delay: time
animation-iteration-count: number | infinite
animation-direction: normal | reverse | alternate | alternate-reverse
animation-fill-mode: none | forwards | backwards | both
animation-play-state: running | paused
animation: name duration timing-function delay iteration-count direction fill-modeFilters
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()
backdrop-filter: same as filter (applies to area behind element)Variables (Custom Properties)
:root {
--main-color: #06c;
}
element {
color: var(--main-color);
}Media Queries
@media media-type and (media-feature) {
/* CSS rules */
}
/* Common media features */
max-width, min-width
max-height, min-height
orientation: portrait | landscape
aspect-ratio
resolution
hover: hover | none
prefers-color-scheme: light | darkUnits
- Absolute
px /* Pixels */
pt /* Points (1/72 inch) */
pc /* Picas (12 points) */
in /* Inches */
mm /* Millimeters */
cm /* Centimeters */- Relative
em /* Relative to font-size */
rem /* Relative to root font-size */
% /* Percentage */
vw /* 1% of viewport width */
vh /* 1% of viewport height */
vmin /* 1% of viewport smaller dimension */
vmax /* 1% of viewport larger dimension */
ch /* Width of "0" character */
ex /* Height of "x" character */Functions
calc() /* Mathematical expressions */
min() /* Minimum value */
max() /* Maximum value */
clamp() /* Clamped value between min and max */
var() /* CSS variable value */
url() /* Resource URL */
rgb(), rgba() /* Color values */
hsl(), hsla() /* Color values */
attr() /* Attribute value */Important Concepts
!important /* Overrides other declarations */
@import /* Import another stylesheet */
@font-face /* Custom font definition */
@supports /* Feature query */
inherit /* Inherit value from parent */
initial /* Reset to default value */
unset /* Reset to inherited or initial */
revert /* Revert to browser styles */This cheat sheet covers most CSS properties and concepts. For more detailed information, refer to the MDN CSS Reference.
How to Use This Cheat Sheet
Keep this guide bookmarked for quick access while coding. Whether you’re debugging styling issues or experimenting with new techniques, this reference will help you write cleaner, more efficient CSS.
By mastering these core concepts, you’ll be able to create visually appealing, responsive websites with ease. Happy styling!
