Topic 2: CSS Properties

📖 5 min read · 🎯 beginner · 🧭 Prerequisites: introduction-to-javascript, tags-introduction-to-tables

Why this matters

Before you touched CSS, every webpage you built looked the same — plain black text, default blue links, everything crammed to the left edge. No color, no breathing room, no personality. It felt like handing someone a blueprint and calling it a house. CSS properties are how you actually dress your pages — you pick the colors, set the spacing, choose the fonts, control the sizes. One property changes one thing. Learn enough of them, and you go from "this works" to "this looks good." That's the shift we're making today.

What You'll Learn

• Apply foundational CSS properties — color, font-size, margin, padding, border, and background — to control visual presentation
• Use advanced visual properties — opacity, box-shadow, text-transform, cursor, and transition — to add depth and interactivity
• Understand the Flexbox layout model and use it to arrange elements responsively
• Combine multiple CSS properties to build polished, user-friendly interfaces

The Analogy

Think of a CSS property as one item in a personal stylist's toolkit. The stylist (you) works with a client (the webpage) who starts as a blank canvas — functional but forgettable. The color property is the palette of fabric dyes. font-size is the tailor's measuring tape that sets proportions. margin and padding are the breathing room a stylist insists on between garments so nothing looks cluttered. border is the picture frame that draws the eye, and background is the statement wallpaper that sets the entire mood of the room. Apply each tool deliberately, and the page walks out of the fitting room looking like it belongs on a billboard.

Chapter 1: Color, Font-Size, Margin, and Padding

These four properties handle the most immediate visual concerns — what color things are, how large the text reads, and how much space surrounds everything.

color

Sets the foreground (text) color of an element. Accepts named colors, hex values, rgb(), hsl(), and more.

h1 {
  color: #1a3c6e; /* deep ocean blue */
}

p {
  color: rgb(60, 60, 60);
}

font-size

Controls how large text renders. Common units are px (fixed pixels), rem (relative to root), and em (relative to parent).

h1 {
  font-size: 2.5rem; /* big, bold headline */
}

p {
  font-size: 1rem; /* baseline body text */
}

margin

The space outside an element's border — the gap between furniture. Shorthand lets you set all four sides at once.

/* top | right | bottom | left */
.card {
  margin: 16px 24px 16px 24px;
}

/* shorthand: vertical | horizontal */
.card {
  margin: 16px 24px;
}

padding

The space inside an element's border — the cushion between the border and the content. Same shorthand rules as margin.

.card {
  padding: 20px;          /* equal on all sides */
}

.button {
  padding: 12px 24px;     /* vertical | horizontal */
}

Chapter 2: Border and Background

border

A border wraps an element like a picture frame. The shorthand takes width, style, and color in any order.

.card {
  border: 2px solid #cccccc;
}

/* Individual sides */
.highlight {
  border-left: 4px solid #1a3c6e;
}

/* Rounded corners */
.pill-button {
  border: 2px solid #1a3c6e;
  border-radius: 999px;
}

Common border styles: solid, dashed, dotted, double, none.

background

Sets the background of an element — solid color, gradient, or image. Think of it as the wallpaper or paint that sets the room's mood.

/* Solid color */
.hero {
  background: #f0f4ff;
}

/* Linear gradient */
.hero {
  background: linear-gradient(135deg, #1a3c6e 0%, #4a90d9 100%);
}

/* Background image */
.banner {
  background-image: url('banner.jpg');
  background-size: cover;
  background-position: center;
}

Chapter 3: Opacity, Box-Shadow, Text-Transform, and Cursor

opacity

Like window tint — 1 is fully opaque, 0 is invisible, anything in between is semi-transparent. Useful for overlay layers and disabled states.

.overlay {
  background: #000;
  opacity: 0.5; /* 50% see-through */
}

.disabled-button {
  opacity: 0.4;
}

box-shadow

Adds a shadow beneath (or inside) an element, creating a subtle 3D lift effect. Syntax: offset-x offset-y blur spread color.

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Multiple shadows */
.elevated {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

text-transform

Changes the letter case of text without editing the HTML source.

/* ALL CAPS for emphasis */
.section-label {
  text-transform: uppercase;
}

/* Title Case for headings */
.card-title {
  text-transform: capitalize;
}

/* Force lowercase */
.tag {
  text-transform: lowercase;
}

cursor

Controls which cursor icon the browser shows when the user hovers over an element. Improves affordance — telling users what they can do.

button {
  cursor: pointer;    /* hand icon — clickable */
}

.drag-handle {
  cursor: grab;
}

.loading-area {
  cursor: wait;
}

Chapter 4: Transition and Flexbox

transition

Smooths the change between two CSS states over a time duration. Without it, style changes snap instantly; with it, they animate gracefully.

Syntax: property duration timing-function delay

button {
  background: #1a3c6e;
  color: #ffffff;
  transition: background 0.25s ease, transform 0.15s ease;
}

button:hover {
  background: #4a90d9;
  transform: translateY(-2px);
}

Common timing functions: ease, ease-in, ease-out, ease-in-out, linear.

flexbox

Flexbox is a one-dimensional layout model — it arranges children either in a row or a column and handles alignment, wrapping, and spacing automatically regardless of element sizes.

Enable it by setting display: flex on the parent container.

.gallery {
  display: flex;
  flex-wrap: wrap;        /* items wrap to new rows */
  gap: 16px;              /* space between items */
  justify-content: center; /* horizontal alignment */
  align-items: stretch;   /* vertical alignment */
}

.gallery-item {
  flex: 1 1 200px;        /* grow | shrink | basis */
}

Key flex properties at a glance:

/* Centering anything — the classic Flexbox trick */
.centered-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

🧪 Try It Yourself

Task: Build a styled card component that uses at least seven of the properties from this lesson.

Success criterion: You see a card in the browser with a colored background, drop shadow, rounded border, title in uppercase, smooth hover effect (color or shadow change), and the text content comfortably padded inside.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f0f4ff;
      font-family: sans-serif;
    }

    .card {
      background: #ffffff;
      border: 1px solid #e0e7ff;
      border-radius: 12px;
      padding: 32px;
      margin: 24px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: box-shadow 0.25s ease, transform 0.2s ease;
      cursor: pointer;
      max-width: 360px;
    }

    .card:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
      transform: translateY(-4px);
    }

    .card-label {
      text-transform: uppercase;
      font-size: 0.75rem;
      color: #4a90d9;
      letter-spacing: 0.1em;
    }

    .card-title {
      font-size: 1.5rem;
      color: #1a3c6e;
      margin: 8px 0;
    }

    .card-body {
      font-size: 1rem;
      color: #444;
      opacity: 0.85;
    }
  </style>
</head>
<body>
  <div class="card">
    <p class="card-label">CSS Properties</p>
    <h2 class="card-title">Vizag Style Guide</h2>
    <p class="card-body">
      Hover over this card to see transitions in action. 
      Every property from today's lesson is at work here.
    </p>
  </div>
</body>
</html>

Open this file in a browser, hover the card, and verify the shadow deepens and the card lifts. Then experiment: change border-radius to 0, flip text-transform to capitalize, or swap the background for a gradient.

🔍 Checkpoint Quiz

Q1. What is the difference between margin and padding?

A) margin is inside the border; padding is outside
B) margin is outside the border; padding is inside
C) They are interchangeable
D) margin only affects block elements; padding only affects inline elements

Q2. Given the following CSS, what happens when a user hovers over the button?

.btn {
  background: #1a3c6e;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #4a90d9;
}

A) The background instantly jumps to #4a90d9
B) The background smoothly animates from #1a3c6e to #4a90d9 over 0.3 seconds
C) Nothing happens — transition only works with color, not background
D) The button disappears

Q3. What bug exists in this snippet, and how would you fix it?

.gallery {
  flex-wrap: wrap;
  gap: 16px;
}

A) gap is not a valid Flexbox property — use margin instead
B) display: flex is missing on the container — Flexbox properties have no effect without it
C) flex-wrap: wrap requires flex-direction: row to be explicitly set
D) There is no bug

Q4. You want section headings to display in ALL CAPS in the browser without changing the HTML source text. Which property achieves this?

A) font-variant: small-caps
B) letter-spacing: uppercase
C) text-transform: uppercase
D) font-style: caps

A1. B — margin is the space outside the border (between elements); padding is the space inside the border (between the border and the content).

A2. B — the transition: background 0.3s ease declaration tells the browser to animate the background property change over 0.3 seconds using an ease curve, so the color shift is smooth rather than instant.

A3. B — Flexbox layout properties like flex-wrap and gap only take effect when the element is a flex container. display: flex must be declared on .gallery first.

A4. C — text-transform: uppercase instructs the browser to render text in capitals at paint time, leaving the HTML source untouched.

🪞 Recap

• color, font-size, margin, padding, border, and background are the six foundational properties that control text, spacing, and surface appearance.
• opacity and box-shadow add depth and visual hierarchy; text-transform enforces typographic casing without touching markup.
• cursor communicates interactivity to users by changing the pointer icon on hover.
• transition smooths any CSS property change over a defined duration, making interactions feel polished rather than jarring.
• Flexbox (display: flex) is a layout model that handles alignment, wrapping, and spacing of child elements in one or two directions — the go-to tool for responsive UI arrangement.

📚 Further Reading

• MDN CSS Reference — the source of truth for every CSS property, syntax, and browser compatibility
• CSS-Tricks: A Complete Guide to Flexbox — the definitive visual Flexbox cheatsheet
• MDN: Using CSS transitions — deep dive into the transition property with worked examples
• ⬅️ Previous: Tags: Introduction to Tables
• ➡️ Next: JavaScript Basics