Basics

---

CSS Selectors

Specificity order: ID > Class/Attribute/Pseudo-class > Element/Pseudo-element

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

"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 vs Inline: Block elements start on a new line and use all available width. Inline elements stay in the same line and only take up as much space as their content.

You can set width and height on elements with display: block or display: inline-block, but not with display: inline.

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

---

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."

---

🧠 Ultra-Short Cheat Sheet

Selector → Property: Value
Box model (content/padding/border/margin)
Display (block/inline/flex/grid)
CSS variables