Basic Selectors

These are the simplest selectors in CSS. They help you grab elements directly by their tag names or by using a wildcard.

* — Selects all elements.
p — Selects all <p> elements.
h1, h2 — Selects all <h1> and <h2> elements.

p { color: blue; }

Class and ID Selectors

Classes (.) are reusable labels, while IDs (#) are unique identifiers for a single element.

.classname — Selects elements with class="classname".
#idname — Selects the element with id="idname".

.btn { background: green; }
#main { padding: 20px; }

Attribute Selectors

Select elements based on the presence or value of an attribute.

[attribute] — Elements with the specified attribute.
[attribute="value"] — Elements with attribute equal to "value".
[attribute^="value"] — Starts with "value".
[attribute$="value"] — Ends with "value".
[attribute*="value"] — Contains "value".

input[type="text"] { border: 1px solid gray; }
a[href^="https"] { color: green; }

Combinators

Define relationships between elements to target specific structures.

div p — Descendant: selects all <p> inside <div>.
div > p — Child: selects direct <p> children of <div>.
div + p — Adjacent Sibling: selects <p> immediately after <div>.
div ~ p — General Sibling: selects all <p> after <div>.

div > p { margin: 0; }

Pseudo-classes

Target elements based on their state or position.

:hover — When user hovers over an element.
:focus — When an element has focus.
:first-child — The first child of a parent.
:nth-child(n) — The nth child of a parent.
:not(selector) — Elements that do not match the selector.

a:hover { color: red; }
li:nth-child(odd) { background: #eee; }

Pseudo-elements

Style specific parts of an element or insert content.

::before — Inserts content before the element's content.
::after — Inserts content after the element's content.
::first-letter — Styles the first letter.
::placeholder — Styles the input placeholder text.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Box Model

Every element is a box. Understanding how margins, borders, padding, and content interact is crucial.

width / height — Dimensions of the content area.
padding — Space between content and border.
border — The edge of the box.
margin — Space outside the border.
box-sizing: border-box — Includes padding and border in the element's total width/height.

* { box-sizing: border-box; }
.box {
  width: 100px;
  padding: 20px;
  border: 1px solid black;
  /* Total width is still 100px */
}

Flexbox Layout

A one-dimensional layout method for arranging items in rows or columns.

Container Properties

display: flex — Enables flexbox.
flex-direction — row | row-reverse | column | column-reverse.
justify-content — Main axis alignment (flex-start, center, space-between).
align-items — Cross axis alignment (stretch, center, flex-start).
flex-wrap — nowrap | wrap.

Item Properties

flex-grow — How much the item grows relative to others.
flex-shrink — How much the item shrinks.
flex-basis — Initial size of the item.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid Layout

A two-dimensional layout system for columns and rows.

display: grid — Enables grid layout.
grid-template-columns — Defines column sizes (e.g., 1fr 2fr).
grid-template-rows — Defines row sizes.
gap — Space between grid cells.
grid-column — Spans columns (e.g., 1 / 3).

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Typography

Properties to style text content.

font-family — Sets the font type.
font-size — Sets the size of the text.
font-weight — Sets the thickness (400, 700, bold).
line-height — Spacing between lines.
text-align — left | center | right | justify.
text-decoration — none | underline | line-through.

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

Colors & Backgrounds

color — Text color.
background-color — Background color.
opacity — Transparency (0 to 1).
background-image — url('image.jpg') or gradients.

div {
  background: linear-gradient(to right, red, yellow);
  color: rgba(0, 0, 0, 0.8);
}

CSS Units

px — Absolute pixels.
em — Relative to parent font size.
rem — Relative to root (html) font size.
% — Relative to parent element.
vw / vh — Viewport width / height percentage.

Media Queries

Make layouts responsive by applying styles based on viewport size.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

CSS Variables (Custom Properties)

Store values to reuse throughout the stylesheet.

:root {
  --main-color: #3498db;
}

button {
  background-color: var(--main-color);
}

CSS Cheatsheet