CSS Full Notes 2026

1. What is CSS?

Definition: CSS (Cascading Style Sheets) is a language used to style and layout web pages — colors, fonts, spacing, animations, responsiveness, etc.

/* Three ways to add CSS */
Inline:      <h1 style="color: blue;">Hello</h1>
Internal:    <style> h1 { color: blue; } </style>
External:    <link rel="stylesheet" href="style.css">

2. Selectors & Basic Properties

Definition: Selectors target HTML elements. Properties change their appearance.

/* Element selector */
p { color: navy; font-size: 1.1rem; }

/* Class selector */
.highlight { background: yellow; padding: 4px; }

/* ID selector */
#header { text-align: center; }

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

/* Common properties */
color, background-color, font-family, font-size, margin, padding, border, width, height

This paragraph uses color and font-weight

3. Box Model

Definition: Every element is a box: content + padding + border + margin.

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
  box-sizing: border-box;   /* Very useful - includes padding & border in width/height */
}

Always use box-sizing: border-box; on everything (* { box-sizing: border-box; })

4. Flexbox (1D Layout)

Definition: Flexbox makes it easy to align and distribute items in a container (row or column).

.container {
  display: flex;
  justify-content: space-between;   /* main axis */
  align-items: center;              /* cross axis */
  gap: 20px;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px;   /* grow, shrink, basis */
}

Item 1

Item 2

Item 3

5. CSS Grid (2D Layout)

Definition: Grid creates two-dimensional layouts with rows and columns — perfect for complex pages.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
  grid-gap: 20px;
  /* or */ grid-template-areas: 
    "header header header"
    "main   sidebar aside"
    "footer footer footer";
}

.item {
  grid-column: 1 / 3;   /* span from column 1 to 3 */
}

6. CSS Variables (Custom Properties)

Definition: Variables store reusable values (colors, sizes) — easy to change globally.

:root {
  --primary: #8b5cf6;
  --spacing: 1.5rem;
}

button {
  background: var(--primary);
  padding: var(--spacing);
}

@media (prefers-color-scheme: dark) {
  :root { --primary: #c084fc; }
}

7. Media Queries (Responsive Design)

Definition: Media queries apply styles based on screen size, device, orientation, etc.

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

@media (min-width: 1024px) and (orientation: landscape) {
  body { font-size: 1.2rem; }
}

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

8. Pseudo-classes & Pseudo-elements

Definition: Add styles to special states (:hover, :focus) or parts (::before, ::after).

a:hover { color: red; text-decoration: underline; }

button:focus { outline: 3px solid #8b5cf6; }

.card::before {
  content: "★";
  color: gold;
  margin-right: 8px;
}

9. Transitions & Animations

Definition: Smoothly change properties over time.

.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: scale(1.08);
  background: #7c3aed;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade {
  animation: fadeIn 1.5s ease-in;
}