Topic 2: CSS Properties

📖 12 min read · 🎯 beginner · 🧭 Prerequisites: introduction-to-phpmyadmin, tags-introduction-to-tables

Why this matters

Here's the thing — you can write perfect HTML and still end up with a page that looks like a government form from 1998. No color, no spacing, no personality. Just black text on a white background. That's where CSS properties come in. They're how you control everything about how an element looks — its color, size, spacing, shadow, even how it behaves when you hover over it. In this lesson we're going to walk through the properties you'll use on every single project: color, font-size, margin, padding, border, background, opacity, box-shadow, text-transform, cursor, transition, and Flexbox. Let's make things look good.

What You'll Learn

• How to control typography with color, font-size, and text-transform
• How the CSS box model works: margin, padding, and border
• How to style backgrounds, shadows, and opacity for visual depth
• How to improve interactivity with cursor and transition
• How to arrange elements elegantly with Flexbox

The Analogy

Think of a CSS property as a setting on a professional tailor's workbench. The fabric is your HTML element — plain and shapeless on its own. color and font-size are the choice of thread and stitch size. margin and padding are the breathing room the tailor leaves around seams and inside pockets. border is the piping along the jacket's edge. background is the lining fabric that sets the whole mood from the inside. And flexbox is the form beneath everything — the mannequin that keeps every piece in its proper place no matter the body shape. A skilled tailor uses all of these together; a skilled front-end developer does the same.

Chapter 1: Color and Typography

color

The color property changes the foreground color of text. You can use named colors, hex codes, rgb(), or hsl() values.

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

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

font-size

Controls how big or small text renders. Accepts px, em, rem, %, and viewport units.

h1 {
  font-size: 2.5rem;  /* 40px if root is 16px */
}

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

small {
  font-size: 0.75rem;
}

text-transform

Changes the capitalisation of text without editing the HTML. Useful for consistent heading style.

h2 {
  text-transform: uppercase;
}

.card-title {
  text-transform: capitalize;
}

Chapter 2: The Box Model — Margin, Padding, and Border

Every HTML element is a rectangular box. The box model describes the layers around that box.

graph LR
    A[Margin] --> B[Border]
    B --> C[Padding]
    C --> D[Content]

margin

Margin is the outside space between an element and its neighbours — like the gap between pieces of furniture.

/* all sides */
.card {
  margin: 20px;
}

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

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

/* individual sides */
.card {
  margin-top: 24px;
  margin-bottom: 24px;
}

padding

Padding is the inside space between the element's border and its content — like the cushion on a sofa.

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

.alert-box {
  padding-top: 16px;
  padding-right: 20px;
  padding-bottom: 16px;
  padding-left: 20px;
}

border

Border sits between margin and padding, like a picture frame around content.

/* shorthand: width style color */
.profile-card {
  border: 2px solid #cccccc;
}

/* round the corners */
.profile-card {
  border-radius: 8px;
}

/* dashed border example */
.info-box {
  border: 1px dashed #0055ff;
}

/* only one side */
.section-title {
  border-bottom: 3px solid #e74c3c;
}

Chapter 3: Background

The background property sets the canvas behind your content — the wallpaper of your element.

Solid color

body {
  background: #f4f6f8;
}

Background image

.hero {
  background-image: url('hero-photo.jpg');
  background-size: cover;        /* fill the container */
  background-position: center;   /* center the image */
  background-repeat: no-repeat;
}

Gradient

.banner {
  background: linear-gradient(135deg, #1a3c6e 0%, #2980b9 100%);
}

.sunset {
  background: linear-gradient(to bottom, #ff7043, #ffb300);
}

Multiple background properties at once

.card {
  background-color: #ffffff;
  background-image: url('pattern.png');
  background-size: 200px 200px;
  background-repeat: repeat;
}

Chapter 4: Opacity and Box-Shadow

opacity

Like tinted car windows — controls how transparent an element is. Ranges from 0 (invisible) to 1 (fully opaque).

.overlay {
  background: #000000;
  opacity: 0.6;   /* 60% opaque, 40% see-through */
}

/* for just the color (not child elements), use rgba instead */
.overlay {
  background: rgba(0, 0, 0, 0.6);
}

Using opacity on a parent also makes all children transparent. Prefer rgba() / hsla() on background-color when you only want the background to be semi-transparent.

box-shadow

Adds a shadow under or around an element, giving it a lifted, 3D look.

/* offset-x | offset-y | blur-radius | color */
.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* inset shadow (inside the element) */
.input-field {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

Chapter 5: Cursor and Transition

cursor

Changes the mouse cursor shape when hovering over an element. This improves UX by communicating interactivity.

button {
  cursor: pointer;     /* hand icon — signals "click me" */
}

.drag-handle {
  cursor: grab;
}

.disabled-button {
  cursor: not-allowed;
}

.resizable {
  cursor: ew-resize;   /* left-right arrow */
}

Common cursor values: default, pointer, text, move, grab, grabbing, crosshair, wait, not-allowed, zoom-in, zoom-out.

transition

Makes style changes animate smoothly over time instead of snapping instantly — like fading from day wear to evening wear rather than an instant costume change.

/* property | duration | timing-function */
button {
  background: #1a3c6e;
  color: #ffffff;
  transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
  background: #2980b9;
  transform: translateY(-2px);  /* lift on hover */
}

Transition shorthand: transition: all 0.3s ease; applies to every changed property, but naming specific properties is more performant.

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

Chapter 6: Flexbox

Flexbox is the organising toolkit for arranging child elements in a row or column — responsively and elegantly, regardless of their individual sizes.

Enabling Flexbox

.container {
  display: flex;
}

All direct children become flex items.

Direction and wrapping

.row-container {
  display: flex;
  flex-direction: row;      /* default: left to right */
}

.column-container {
  display: flex;
  flex-direction: column;   /* top to bottom */
}

.gallery {
  display: flex;
  flex-wrap: wrap;          /* items wrap to next line when needed */
}

Alignment

.nav {
  display: flex;
  justify-content: space-between;  /* horizontal spacing */
  align-items: center;             /* vertical alignment */
}

Flex item properties

.sidebar {
  flex: 0 0 250px;  /* don't grow, don't shrink, fixed at 250px */
}

.main-content {
  flex: 1;          /* take up all remaining space */
}

.card {
  flex: 1 1 300px;  /* grow, shrink, base width 300px */
}

A full Flexbox nav example

<nav class="navbar">
  <div class="logo">Vizag</div>
  <ul class="nav-links">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: #1a3c6e;
  color: #ffffff;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

Chapter 7: Putting It All Together

Here is a complete styled card that uses every property from this lesson:

<div class="profile-card">
  <h2 class="card-name">the trainer</h2>
  <p class="card-role">Governor of Vizag</p>
  <button class="card-btn">View Profile</button>
</div>

.profile-card {
  /* box model */
  margin: 32px auto;
  padding: 24px 32px;
  border: 1px solid #dde3ec;
  border-radius: 12px;

  /* background + shadow */
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);

  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  /* size */
  max-width: 360px;

  /* transparency */
  opacity: 1;

  /* smooth entrance on hover */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

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

.card-name {
  color: #1a3c6e;
  font-size: 1.5rem;
  text-transform: capitalize;
  margin: 0;
}

.card-role {
  color: #555555;
  font-size: 0.9rem;
  margin: 0;
}

.card-btn {
  background: #1a3c6e;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.card-btn:hover {
  background: #2980b9;
}

🧪 Try It Yourself

Task: Build a Flexbox navigation bar with a hover color transition.

Success criterion: When you hover over each nav link, its color smoothly changes from dark to a bright accent — no instant snap.

Starter HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vizag Nav</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #1a3c6e;
      padding: 16px 40px;
    }

    .logo {
      color: #ffffff;
      font-size: 1.4rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-links li {
      color: #aac4e8;
      cursor: pointer;
      /* ADD transition here */
      /* ADD :hover color change below */
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">Vizag</div>
    <ul class="nav-links">
      <li>Home</li>
      <li>Courses</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
</body>
</html>

Add transition: color 0.3s ease; to .nav-links li and a .nav-links li:hover { color: #ffffff; } rule. Open it in your browser and hover over the links — you should see a smooth color fade.

🔍 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 the same thing with different names
D) margin only works on block elements; padding only on inline

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

button {
  background: #1a3c6e;
  transition: background 0.4s ease;
}

button:hover {
  background: #e74c3c;
}

A) The background instantly snaps to red
B) The background smoothly fades from blue to red over 0.4 seconds
C) The transition property prevents the hover from working
D) The button disappears on hover

Q3. Which CSS property would you use to make a <div> 50% transparent while keeping its children fully visible?

A) opacity: 0.5 on the <div>
B) background: rgba(255, 255, 255, 0.5) on the <div>
C) visibility: hidden on the <div>
D) display: none on the <div>

Q4. You have a .navbar container with three child elements. You want the logo on the left, the nav links centered, and a login button on the right — all vertically centered. Which property combination achieves this?

A) display: block; text-align: center
B) display: flex; justify-content: space-between; align-items: center
C) display: inline-flex; flex-direction: column
D) float: left on logo, float: right on button

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.4s ease rule causes the background color change to animate smoothly over 400 milliseconds instead of snapping.

A3. B — Using rgba() on background-color makes only the background semi-transparent. Setting opacity: 0.5 on the parent would also make all child elements 50% transparent, which is usually not desired.

A4. B — display: flex enables Flexbox; justify-content: space-between places the first child at the start and the last child at the end with the middle child in between; align-items: center vertically centers all children within the navbar height.

🪞 Recap

• color and font-size control the appearance of text; text-transform controls capitalisation without changing the HTML.
• The CSS box model layers content inside padding, surrounded by a border, with margin as outer breathing room.
• background can be a solid color, an image, or a gradient — setting the entire mood of an element.
• opacity makes whole elements transparent; rgba() targets just the color channel, leaving children unaffected.
• box-shadow lifts elements visually; cursor signals interactivity; transition makes all style changes feel smooth and intentional.
• Flexbox (display: flex) is the go-to layout tool for aligning and spacing child elements in one dimension.

📚 Further Reading

• MDN CSS Reference — the authoritative list of every CSS property with live examples
• CSS Tricks: A Complete Guide to Flexbox — the definitive visual cheat-sheet for Flexbox alignment
• MDN: Using CSS transitions — in-depth guide to timing functions and multi-property transitions
• ⬅️ Previous: Tags, Introduction to Tables
• ➡️ Next: Insert, Select, Update, Delete Queries