CSS Basics

CSS = styling language that makes HTML beautiful

---

What is CSS?

"Cascading Style Sheets = web styling"

CSS (Cascading Style Sheets) is a styling language that:

• Controls presentation and layout
• Separates content from design
• Enables responsive design
• Provides animations and transitions

"CSS is a stylesheet language used to describe the presentation of HTML documents, including layout, colors, fonts, and animations."

---

How CSS Works

Selector → Property → Value

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 24px;
}

"CSS uses selectors to target elements and apply property-value pairs for styling."

---

CSS Selectors

Element · Class · ID · Attribute

Selector	Syntax	Specificity
Element	p	Low
Class	.class	Medium
ID	#id	High
Attribute	[type="text"]	Medium
Pseudo-class	:hover	Medium
Pseudo-element	::before	Medium

"CSS selectors target elements with varying specificity levels, with ID being most specific."

---

Box Model

Content → Padding → Border → Margin

┌─────────────────┐ ← Margin
│ ┌─────────────┐ │ ← Border
│ │ ┌─────────┐ │ │ ← Padding
│ │ │ Content │ │ │
│ │ └─────────┘ │ │
│ └─────────────┘ │
└─────────────────┘

"The box model consists of content, padding, border, and margin, with box-sizing controlling how width/height are calculated."

---

Display Property

Block · Inline · Flex · Grid

Value	Behavior
block	Full width, new line
inline	Content width, same line
inline-block	Block behavior, inline flow
flex	Flexbox layout
grid	Grid layout
none	Hidden

---

Flexbox

One-dimensional layout

• Container: display: flex
• Main axis: flex-direction
• Alignment: justify-content, align-items
• Flexibility: flex-grow, flex-shrink, flex-basis

"Flexbox provides efficient one-dimensional layouts with powerful alignment and distribution capabilities."

---

Grid

Two-dimensional layout

• Container: display: grid
• Define columns and rows
• Place items in grid cells
• Responsive with fr units

"CSS Grid enables two-dimensional layouts with precise control over rows and columns."

---

Responsive Design

Media queries + flexible units

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

• Mobile-first approach
• Flexible units (%, rem, vw, vh)
• Media queries for breakpoints

"Responsive design uses media queries and flexible units to adapt layouts to different screen sizes."

---

9️⃣ CSS Specificity

Inline > ID > Class > Element

Specificity calculation:

• Inline styles: 1000
• ID: 100
• Class/Attribute: 10
• Element: 1

"CSS specificity determines which styles apply when multiple rules target the same element."

---

CSS Variables

Custom properties for theming

:root {
  --primary-color: #007bff;
}

.button {
  background: var(--primary-color);
}

"CSS custom properties enable dynamic theming and reusable values across stylesheets."

---

"CSS is a stylesheet language that controls the presentation of HTML. It uses selectors to target elements and applies styles via property-value pairs. The box model defines spacing with content, padding, border, and margin. Modern CSS includes Flexbox for one-dimensional layouts, Grid for two-dimensional layouts, and responsive design via media queries. CSS specificity determines rule precedence."

---

🧠 Ultra-Short Cheat Sheet

Selector → Property: Value
Box model (content/padding/border/margin)
Display (block/inline/flex/grid)
Flexbox (1D layout)
Grid (2D layout)
Media queries (responsive)
Specificity (inline > ID > class > element)
CSS variables