Cheatsheet CSS

p { color: blue; }
h1 { font-size: 2rem; }

Applies to all elements of that type. It is the simplet and least specific selector.

nav a { text-decoration: none; }
.card p { color: gray; }

Selects elements inside another (any depth level). The space is the descendant combinator.

input[type="text"] { border: 1px solid; }
a[href^="https"] { color: green; }
img[src$=".png"] { border: 2px solid; }
a[href*="example"] { font-weight: bold; }

They select by attribute: ^= starts with, $= ends with, *= contains.

.highlight { font-weight: bold; }
.btn-primary { background: blue; }

Selects elements with class="highlight". It can be reused on several elements. It is the most used selector.

ul > li { list-style: none; }
.card > h2 { margin: 0; }

The > selects only direct children, not grandchildren. More precise than the descendant.

h1, h2, h3 { margin: 0; }
.btn, .link { cursor: pointer; }

The comma applies the same rule to several selectors. It avoids repeating code.

#header { margin: 0; }
#menu { position: fixed; }

Selects the element with id="header". The ID must be unique on the page. It has high specificity — avoid using it for styles.

a:hover { color: red; }
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f5f5f5; }
li:last-child { border: none; }

Pseudo-classes select by state (hover, focus) or position (first-child, nth-child). They do not need an extra class.

/* Priority order (highest wins): */
/* inline (1000) > #id (100) > .class (10) > element (1) */

p { color: blue; }          /* 1 */
.text { color: green; }    /* 10 */
#title { color: red; }     /* 100 */

Specificity decides which rule wins in a conflict. IDs > classes > elements. Inline and !important override everything.

* { box-sizing: border-box; }
* { margin: 0; padding: 0; }

Applies to all elements. Useful for resets and global box-sizing.

p::before { content: "» "; }
p::after { content: " «"; }
p::first-line { font-weight: bold; }
::placeholder { color: #999; }

Pseudo-elements (::) create virtual content or style parts. content is mandatory on before/after.

/* Adjacent sibling (right after) */
h2 + p { margin-top: 0; }

/* All following siblings */
h2 ~ p { color: gray; }

The + selects the sibling immediately after. The ~ selects all following siblings of the same type.

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

CSS accepts names, hex, RGB(A) and HSL(A). HSL is more intuitive: hue, saturation and lightness.

background: radial-gradient(circle, #fff, #000);
background: radial-gradient(ellipse at top, #a8edea, #fed6e3);

radial-gradient radiates from the center outward. The shape can be circle or ellipse.

background-color: #f0f0f0;
background-color: rgba(0, 0, 0, 0.8);

Sets the element's background color. With rgba, the background becomes semi-transparent without affecting the text.

opacity: 0.5;   /* 0 = transparent, 1 = opaque */
opacity: 0;     /* invisible but takes up space */

/* Affects the WHOLE element (text included) */
/* For just the background, use rgba() */

Opacity affects the whole element (children included). For transparency only on the background, use rgba() in the color.

background-image: url("img.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

cover fills the whole space (may crop). contain shows the whole image (may leave space).

background: #fff url("x.jpg") no-repeat center / cover;

/* Order: color | image | repeat | position / size */

The shorthand joins all background properties in one line. The / separates position from size.

background: linear-gradient(to right, #ff7e5f, #feb47b);
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(#fff, #000);

linear-gradient creates a smooth transition between colors. The direction can be to right, an angle, or by default top to bottom.

background:
  url("logo.png") no-repeat top right,
  url("pattern.png") repeat,
  #f0f0f0;

You can stack several backgrounds separated by commas. The first one sits on top of the following ones.

font-family: "Segoe UI", Arial, sans-serif;
font-family: monospace;

List of fonts with fallback. If the first one does not exist, it tries the next. Names with spaces need quotes.

text-decoration: underline;
text-decoration: none;        /* removes underline */
text-decoration: line-through; /* strikethrough */
text-decoration: overline;

none removes the underline from links. line-through is used for old prices or completed tasks.

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body {
  font-family: "Roboto", sans-serif;
}

@import or the <link> tag load fonts from Google. display=swap shows text immediately with a fallback.

font-size: 16px;    /* fixed */
font-size: 1.2rem;  /* relative to root */
font-size: 1.5em;   /* relative to parent */

rem is relative to html (recommended). em is relative to the parent. px is fixed and does not scale.

line-height: 1.6;      /* between lines */
letter-spacing: 2px;   /* between letters */
word-spacing: 5px;     /* between words */

A line-height of 1.5-1.8 improves readability. letter-spacing is useful for uppercase and titles.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The three properties together cut the text with "..." when it exceeds the container. Requires a defined width.

font-weight: bold;    /* 700 */
font-weight: 300;     /* light */
font-style: italic;
font-style: normal;

font-weight accepts names (bold, normal) or numbers (100-900). font-style controls italics.

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;

Transforms the text visually without changing the HTML. capitalize uppercases the first letter of each word.

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

line-clamp limits the text to N lines with ellipsis. It works in modern browsers (-webkit- prefix).

text-align: center;
text-align: left;
text-align: right;
text-align: justify;

Aligns the text horizontally. justify distributes the text across both margins (like in newspapers).

text-shadow: 2px 2px 4px #000;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #ccc;

Format: x y blur color. You can stack several shadows with commas for creative effects.

/* From outside to inside: */
/* margin > border > padding > content */

.box {
  margin: 20px;
  border: 1px solid #ccc;
  padding: 15px;
  width: 300px;
}

Every element is a box with 4 layers: margin (outside), border, padding (inside) and content.

border: 1px solid #ccc;
border-radius: 8px;
border-radius: 50%;     /* circle */
border-top: 2px dashed red;

The shorthand is width style color. border-radius: 50% turns any square into a circle.

display: block;         /* takes the whole line */
display: inline;        /* flows with the text */
display: inline-block;  /* inline + dimensions */
display: none;          /* hides completely */
display: flex;
display: grid;

Display defines the box type. none removes it from the flow. inline-block accepts width/height but flows inline.

* { box-sizing: border-box; }

/* content-box (default): width = content only */
/* border-box: width = content + padding + border */

border-box makes width include padding and border. It makes calculations much more predictable. Always use it.

width: 100%;
max-width: 1200px;
height: 200px;
min-height: 100vh;
aspect-ratio: 16 / 9;

max-width prevents stretching too much. min-height: 100vh guarantees a minimum screen height. aspect-ratio keeps the proportion.

visibility: hidden;  /* hides but takes up space */
display: none;       /* removes from layout */
opacity: 0;          /* invisible, clickable */

visibility: hidden hides but keeps the space. display: none removes it completely. opacity: 0 still receives clicks.

margin: 10px;                  /* all */
margin: 10px auto;             /* centers horizontally */
margin: 5px 10px 15px 20px;   /* top right bottom left */
margin: 10px 20px;            /* vertical | horizontal */

auto on the sides centers the block. The shorthand follows clockwise: top, right, bottom, left.

box-shadow: 0 4px 6px rgba(0,0,0,0.1);
box-shadow: 0 0 0 3px blue;  /* "ring" */
box-shadow: inset 0 2px 4px #000;  /* inner */

Format: x y blur spread color. inset makes the shadow inward. Without blur/spread it creates a solid outline.

padding: 20px;
padding: 10px 20px;    /* vertical | horizontal */
padding: 0 15px 10px;  /* top | sides | bottom */

Padding is the inner space between the content and the border. It does not accept negative values (unlike margin).

overflow: hidden;    /* clips */
overflow: auto;      /* scroll if needed */
overflow: scroll;    /* scroll always */
overflow: visible;   /* shows outside (default) */

Overflow controls what happens when the content exceeds the box. auto only shows scroll when needed.

.container {
  display: flex;
}
/* Direct children become flex items */

display: flex activates flexible layout on the direct children. The container controls alignment and distribution.

flex-wrap: nowrap;  /* default: all on one line */
flex-wrap: wrap;    /* breaks to the next line */
flex-wrap: wrap-reverse;

Without wrap, the items squeeze onto one line. With wrap, they move to the next line when they do not fit.

.item { order: 2; }           /* reorders visually */
.item { align-self: flex-end; } /* overrides align-items */

order changes the visual order without changing the HTML. align-self overrides the alignment on a specific item.

flex-direction: row;            /* → default */
flex-direction: column;         /* ↓ */
flex-direction: row-reverse;    /* ← */
flex-direction: column-reverse; /* ↑ */

The direction defines the main axis. With column, justify-content starts controlling the vertical.

gap: 20px;
row-gap: 10px;
column-gap: 30px;

Gap is the modern spacing between flex/grid items. It replaces hacky margins and does not add space at the edges.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
/* Logo on the left, menu on the right */

Practical example: navbar with logo on the left and menu on the right. space-between pushes them to the edges.

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Distributes the items on the main axis. space-between sticks the first and last to the edges. space-evenly gives equal spaces.

flex: 1;           /* grows equally */
flex: 0 0 200px;   /* fixed, does not grow or shrink */
flex: 2;           /* grows twice the much the others */

/* flex: grow shrink basis */

flex combines grow, shrink and basis (base size). flex: 1 distributes the space equally.

align-items: stretch;     /* stretches (default) */
align-items: center;      /* centers */
align-items: flex-start;  /* top */
align-items: flex-end;    /* bottom */
align-items: baseline;    /* text baseline */

Aligns the items on the cross axis (perpendicular). With row, it controls the vertical. stretch is the default.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

The justify + align center combination centers horizontally and vertically. The most used pattern to center anything.

.container {
  display: grid;
}
/* Children become grid cells */

display: grid activates the grid layout. Ideal for two-dimensional layouts (rows AND columns at the same time).

grid-template-rows: 100px auto 50px;
grid-auto-rows: minmax(100px, auto);

grid-template-rows sets fixed heights. grid-auto-rows controls automatically created rows.

justify-items: center;   /* horizontal in the cell */
align-items: center;     /* vertical in the cell */
place-items: center;     /* both (shorthand) */

justify-content: center; /* the grid in the container */

place-items: center centers the content inside each cell. justify/align-content positions the whole grid.

grid-template-columns: 200px 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 250px);

fr is a fraction of the available space. repeat(3, 1fr) creates 3 equal columns. You can mix px and fr.

.item {
  grid-column: span 2;
}
.item-full {
  grid-column: 1 / -1;  /* all */
}

span 2 makes the item span 2 columns. 1 / -1 extends from the first to the last column (full width).

/* Flexbox: 1 dimension (row OR column) */
.nav { display: flex; }

/* Grid: 2 dimensions (rows AND columns) */
.layout { display: grid; }

/* They can be combined! */

Use Flexbox to align items in one direction. Use Grid for layouts with rows and columns. They combine well.

grid-template-columns:
  repeat(auto-fit, minmax(250px, 1fr));

auto-fit + minmax creates columns that adjust on their own. No media queries! The most useful Grid pattern.

.item {
  grid-column: 1 / 3;  /* columns 1 and 2 */
  grid-row: 1 / 2;     /* row 1 */
}

Defines start / end on the grid lines. The numbers refer to the lines (not the cells).

gap: 20px;
row-gap: 10px;
column-gap: 30px;

Gap sets the space between cells. It replaces margins and is cleaner than padding hacks.

.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

grid-template-areas create a visual layout with names. Very readable — it looks like a drawing of the page.

position: static;    /* default, normal flow */
position: relative;  /* offsets from original */
position: absolute;  /* out of the flow */
position: fixed;     /* fixed in the viewport */
position: sticky;    /* sticks when scrolling */

Position controls how the element is positioned. Only static ignores the top/right/bottom/left properties.

.barra {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Fixed pins the element to the viewport — it does not scroll with the page. Ideal for navigation bars and floating buttons.

top: 10px;
right: 0;
bottom: 0;
left: 20px;
inset: 0;  /* all to 0 (shorthand) */

Coordinates work with position (except static). inset: 0 is shorthand for top/right/bottom/left all equal.

.menu {
  position: sticky;
  top: 0;
}

Sticky behaves like relative until it reaches the offset, then "sticks" like fixed. Perfect for headers and menus.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}
/* Offsets but keeps the original space */

Relative offsets the element from its original position. The space it occupied is preserved. It serves the a reference for absolute children.

.modal { z-index: 1000; }
.dropdown { z-index: 100; }
.navbar { z-index: 50; }

z-index controls the stacking order (who sits on top). It requires position (not static). Higher values stay in front.

.pai { position: relative; }
.filho {
  position: absolute;
  top: 0;
  right: 0;
}

Absolute positions relative to the nearest ancestor with position (not static). It removes the element from the normal flow.

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Combines top/left 50% with translate(-50%, -50%) to center. An alternative to flexbox for overlays and modals.

@media (max-width: 768px) {
  .menu { display: none; }
  .content { padding: 10px; }
}

Media queries apply rules according to the screen width. max-width is mobile-first in reverse.

img {
  max-width: 100%;
  height: auto;
  display: block;
}

max-width: 100% prevents the image from exceeding AS container. height: auto keeps the proportion. display: block removes extra space.

/* Mobile first (min-width): */
@media (min-width: 576px) { /* tablet */ }
@media (min-width: 768px) { /* desktop */ }
@media (min-width: 992px) { /* large */ }
@media (min-width: 1200px) { /* xl */ }

Breakpoints are points where the layout changes. The mobile-first approach uses min-width (base styles = mobile).

font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(300px, 80%, 1200px);
padding: clamp(1rem, 5vw, 3rem);

clamp(min, preferred, max) creates fluid values with limits. It replaces media queries for typography and spacing.

html { font-size: 16px; }
h1 { font-size: 2rem; }    /* 32px */
p { font-size: 1rem; }     /* 16px */
.box { padding: 1.5rem; } /* 24px */

rem is relative to the html font-size. If you change the root, everything scales proportionally. Recommended for accessibility.

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { display: flex; }
}

Container queries apply styles based on the container size (not the viewport). The future of responsive CSS.

width: 100vw;     /* screen width */
height: 100vh;    /* screen height */
font-size: 5vw;   /* scales with the width */
min-height: 100dvh; /* dynamic height (mobile) */

The vw/vh units are percentages of the viewport. dvh (dynamic viewport height) handles the mobile browser bar.

@media (orientation: landscape) { ... }

@media (prefers-color-scheme: dark) {
  body { background: #1a1a2e; color: #eee; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none; }
}

Beyond width, you can detect orientation, dark theme and the user's motion preference.

.btn {
  transition: all 0.3s ease;
}
.btn:hover {
  background: blue;
  transform: scale(1.05);
}

The transition smoothly animates property changes. Format: property duration timing-function delay.

animation-name: blink;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;

Fine control: delay (wait), iteration-count (repetitions), direction (alternate reverses), fill-mode (final state).

transition: background 0.3s,
  transform 0.5s ease-in-out;

/* Avoid "all" in production (performance) */

Specify which properties to animate instead of all. Better performance and control over each animation.

.card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

The elevation effect combines translateY with box-shadow. It gives the sensation of the element "lifting" on hover.

transform: scale(1.1);
transform: rotate(45deg);
transform: translateX(20px);
transform: translateY(-10px);
transform: skewX(5deg);

Transform applies visual transformations without affecting the layout. You can combine: translateX(10px) scale(1.1).

ease            /* smooth (default) */
linear          /* constant speed */
ease-in         /* starts slow */
ease-out        /* ends slow */
ease-in-out     /* both */
cubic-bezier(0.4, 0, 0.2, 1)

Timing functions control the acceleration. ease-out is good for entrances. cubic-bezier allows custom curves.

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.item {
  animation: blink 1s infinite;
}

@keyframes define the animation steps. animation applies it with name, duration and repetitions.

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeIn 0.4s ease-out;
}

The entrance animation (fade + slide) polishes the interface. ease-out makes the element "land" smoothly.

:root {
  --color-main: #3498db;
  --spacing: 1rem;
  --radius: 8px;
}

.btn {
  color: var(--color-main);
  padding: var(--spacing);
  border-radius: var(--radius);
}

CSS variables (--name) centralize values. Changing one place updates everything. They can be overridden per component.

::selection {
  background: #3498db;
  color: white;
}

::selection styles the text when the user selects it. A small detail that gives the site personality.

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.avatar {
  aspect-ratio: 1;  /* square */
  border-radius: 50%;
}

aspect-ratio keeps the proportion without padding hacks. It replaces the padding-top trick for responsive videos.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

The reset removes the browser's default styles (margins, paddings). border-box makes calculations predictable.

filter: grayscale(100%);
filter: blur(5px);
filter: brightness(0.8) contrast(1.2);
filter: sepia(0.5);

Filters apply visual effects without editing the image. You can combine several in the same declaration.

cursor: pointer;     /* clickable */
cursor: not-allowed;  /* disabled */
cursor: grab;         /* draggable */
cursor: text;         /* editable */

cursor: pointer indicates that the element is clickable. Use it on buttons, links and interactive elements.

.no-scroll {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE */
}
.no-scroll::-webkit-scrollbar {
  display: none;               /* Chrome */
}

Hides the scroll bar while keeping the functionality. Useful in carousels and horizontal lists.

html {
  scroll-behavior: smooth;
}

/* Respect the user's preference: */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

scroll-behavior: smooth animates scrolling when clicking anchors. Always respect the reduced motion preference.

/* Outline: does not affect layout, good for focus */
input:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

/* Never remove the outline without an alternative! */

The outline does not take up space (does not change the layout). It is essential for accessibility — never remove it without providing a visual alternative.