CSS Fundamentals — Complete Guide to Selectors, Layout, and Responsive Design

CSS (Cascading Style Sheets) controls how HTML elements look on screen — colors, layout, spacing, typography, and animations — transforming raw structure into polished, responsive designs.

What You’ll Learn

• CSS selectors, specificity, and the cascade
• The box model and how sizing works
• Flexbox and CSS Grid for modern layouts
• Responsive design with media queries
• Custom properties for maintainable stylesheets

Why It Matters

CSS is what makes the web visually appealing. Without it, every website would look like a plain text document. Modern CSS is incredibly powerful — Flexbox and CSS Grid have made complex layouts simple, and custom properties (CSS variables) enable design systems that scale across thousands of pages.

Real-world use: The Durga Antivirus Pro dashboard uses CSS Grid for its card-based scan results layout, Flexbox for the navigation bar, and custom properties to maintain consistent colors across light and dark themes.

CSS Selectors and Specificity

Selectors determine which HTML elements a CSS rule applies to. The cascade — the “C” in CSS — resolves conflicts when multiple rules target the same element.

Types of Selectors

/* Element selector */
p { color: #333; }

/* Class selector (most reusable) */
.card { border-radius: 8px; }

/* ID selector (use sparingly) */
#header { background: #333; }

/* Attribute selector */
input[type="email"] { border-color: blue; }

/* Pseudo-class */
button:hover { opacity: 0.9; }

/* Pseudo-element */
p::first-line { font-weight: bold; }

/* Combinator - descendant */
article p { line-height: 1.6; }

/* Combinator - child */
nav > ul { list-style: none; }

/* Combinator - adjacent sibling */
h2 + p { margin-top: 0; }

Specificity Calculation

Specificity determines which rule wins when conflicts occur. It’s calculated as a score:

• Inline styles: 1,0,0,0
• ID selectors: 0,1,0,0
• Class, attribute, pseudo-class: 0,0,1,0
• Element, pseudo-element: 0,0,0,1

/* Specificity: 0,0,1,1 */
nav a { color: blue; }

/* Specificity: 0,1,0,0 — this wins over the above */
#nav-link { color: red; }

/* Specificity: 0,0,2,0 — this also beats the first */
.nav .link { color: green; }

/* To override (use sparingly) */
.special { color: purple !important; }

The Box Model

Every HTML element is a rectangular box with content, padding, border, and margin.

    flowchart LR
  A[Margin] --> B[Border]
  B --> C[Padding]
  C --> D[Content]
  style D fill:#4af,color:#fff
  style C fill:#f90,color:#fff
  style B fill:#4a4,color:#fff
  style A fill:#f44,color:#fff
  

.box {
  width: 300px;
  padding: 20px;       /* Space inside the border */
  border: 2px solid #333; /* Visible edge */
  margin: 16px;        /* Space outside the border */
  box-sizing: border-box; /* Width includes padding and border */
}

With box-sizing: border-box, the element’s total width equals the width property (300px). Without it, the total width would be 300 + 20 + 20 + 2 + 2 = 344px.

Flexbox

Flexbox is a one-dimensional layout model that distributes space along a row or column. It’s ideal for navigation bars, card rows, centering content, and responsive components.

.container {
  display: flex;
  justify-content: space-between; /* Main axis alignment */
  align-items: center;           /* Cross axis alignment */
  gap: 16px;                     /* Spacing between items */
  flex-wrap: wrap;               /* Allow items to wrap */
}

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

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Common Flexbox Patterns

/* Centering content — the easiest way */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }

/* Equal-height cards */
.card-row {
  display: flex;
  gap: 20px;
}
.card { flex: 1; }

CSS Grid

CSS Grid is a two-dimensional layout system that handles rows and columns simultaneously. Use it for page-level layouts, image galleries, and complex component arrangements.

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

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

<div class="grid">
  <div class="featured">Featured Content</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Named Grid Areas

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 0;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: content; }
footer { grid-area: footer; }

Responsive Design

Responsive design ensures your site looks good on every device — from phones to ultrawide monitors.

Media Queries

/* Base styles (mobile-first approach) */
.container {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .item { flex: 1 1 45%; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .item { flex: 1 1 30%; }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  .item { flex: 1 1 22%; }
}

Common Breakpoints

Custom Properties (CSS Variables)

Custom properties make stylesheets maintainable by centralizing values.

:root {
  /* Colors */
  --color-primary: #6366f1;
  --color-secondary: #ec4899;
  --color-background: #ffffff;
  --color-text: #1a1a2e;

  /* Typography */
  --font-primary: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

/* Using custom properties */
.card {
  background: var(--color-background);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-primary);
}

/* Theme switching */
[data-theme="dark"] {
  --color-background: #1a1a2e;
  --color-text: #e2e8f0;
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
}

Common Errors

1. Not using box-sizing: border-box — Without it, padding and border add to element width, causing unexpected overflow and layout breaks.
2. Overusing !important — !important breaks the cascade and makes stylesheets impossible to maintain. Use specificity instead.
3. Forgetting to set display: flex or grid — Flex and grid properties only work on flex/grid containers. Applying justify-content to a regular block element does nothing.
4. Using margins for grid gaps — Use gap instead of margins for spacing flex and grid items. Margins cause double-spacing issues and are harder to maintain.
5. Not resetting browser defaults — Browsers apply default margins and padding. Use a CSS reset like *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }.

Practice Questions

1. What is the difference between Flexbox and CSS Grid? Flexbox is one-dimensional (row OR column). CSS Grid is two-dimensional (rows AND columns simultaneously). Use Flexbox for navigation bars and component-level layouts; use Grid for page-level and complex layouts.

2. What does box-sizing: border-box do? It makes the element’s width and height include padding and border. Without it, dimensions only apply to the content area, making sizing calculations inconsistent.

3. How do you center a div both horizontally and vertically with CSS? Use Flexbox: display: flex; justify-content: center; align-items: center; on the parent container. Or use CSS Grid: display: grid; place-items: center;.

4. What is specificity and why does it matter? Specificity determines which CSS rule applies when multiple rules target the same element. Understanding it prevents confusion when styles don’t apply as expected.

5. How do custom properties help with theme switching? Define color values as custom properties in :root, then redefine them under [data-theme="dark"]. Changing the data-theme attribute on <html> instantly swaps all colors.

Challenge

Build a responsive card grid that displays four cards on desktop, two on tablet, and one on mobile. Each card should have an image, title, description, and button. Use CSS Grid for the layout and custom properties for colors and spacing.

Real-World Task

Create a dark mode toggle for the Durga Antivirus Pro status dashboard. Use CSS custom properties for all colors, a JavaScript toggle that switches the data-theme attribute, and smooth transitions between themes. The dashboard should display system status, scan results, and alerts.

Previous: HTML Fundamentals | Next: JavaScript Fundamentals | Related: Responsive Design Guide

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.