1. CSS Selectors

How we choose which HTML to style.

/* 1. Element Selector */
p { color: blue; }

/* 2. Class Selector (Use .) */
.btn-red { background: red; }

/* 3. ID Selector (Use # - Unique) */
#main-title { font-size: 30px; }

/* 4. Group Selector (Use ,) */
h1, h2, h3 { color: green; }

#demo-id (Unique)

.demo-class (Reusable)

Element Selector (Global)

2. The Box Model

Every element is a box. Understanding these layers is mandatory for layout control.

Content: The text/image.
Padding: Space inside border.
Border: The frame.
Margin: Space outside.

div {
  margin: 20px;
  border: 2px solid green;
  padding: 15px;
}

MARGIN (OUTSIDE)

BORDER

CONTENT
PADDING IS AROUND ME

3. Display & Positioning

Display

Block (new line) vs Inline (same line).

display: block; /* or inline-block */

Position

Relative, Absolute, Fixed (scrolling), and Static.

position: fixed; top: 0;

ABSOLUTE

This box uses Relative positioning, allowing the red tag to sit Absolute in the corner.

4. Flexbox Layout

The easiest way to align items horizontally or vertically.

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

Use space-between to push items to the edges!

1

2

3

JUSTIFY-CONTENT: SPACE-BETWEEN