CSS and Responsive Design

What you will learn

• What CSS does and how it connects to HTML.
• Selectors, properties, values, and declarations.
• Colors, fonts, spacing, borders, and shadows.
• The box model, specificity, and inheritance.
• Flexbox, CSS Grid, and mobile-first media queries.
• Hover, focus, and transitions that stay accessible.
• How to find and fix common CSS mistakes.

This lesson is hands-on. Look for the sliders, menus, and editors. Changing a value and watching what happens is the fastest way to learn CSS.

Part 1

What CSS does

HTML describes what is on a page. CSS (Cascading Style Sheets) describes how it looks: colors, fonts, spacing, and layout. The browser reads both, then draws the styled result.

An HTML page connects to a CSS file with a link element in the head:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Part 2

Selectors, properties, values, and declarations

A CSS rule says: pick these elements, and apply these styles.

/* selector { declarations } */
h1 {
  color: #92D1C3;
  font-size: 2rem;
}

p {
  line-height: 1.6;
}

Common selectors: p (all paragraphs), .card (class), #menu (id), nav a (links inside a nav), and a:hover (links being hovered).

Part 3

Inline, internal, and external CSS

<p style="color: teal;">Hi</p>

<style>
  p { color: teal; }
</style>

<link rel="stylesheet" href="style.css">

Use external CSS by default. One file styles the whole site, and changing it once updates every page.

Part 4

Colors, backgrounds, fonts, spacing, borders, and shadows

color / background

Text color and fill. Use names, hex (#92D1C3), rgb(), or hsl().

font-family / font-size

The typeface and its size. Use rem so text scales with user settings.

line-height

Space between lines. About 1.5 to 1.7 reads comfortably.

padding / margin

Space inside an element, and space outside it.

border / border-radius

An outline, and how rounded the corners are.

box-shadow

A soft shadow: x offset, y offset, blur, color.

.card {
  background: #FFFFFF;
  color: #222222;
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  padding: 24px;
  margin: 16px 0;
  border: 1px solid #d5dcdc;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 31, 33, 0.12);
}

Part 5

The box model

Every element is a box made of four layers, from the inside out: content, padding, border, and margin. Move the sliders to see each layer change.

Part 6

Classes, IDs, specificity, and inheritance

A class (.note) can be reused on many elements. An ID (#msg) must be unique on a page. When several rules target the same element, the most specific one wins: inline style, then ID, then class, then plain element. If specificity ties, the later rule wins.

Switch the rules on and off. The paragraph below has class="note" id="msg".

Inheritance

Some properties pass down from parent to child. Set font-family and color on body once, and everything inside inherits them. Layout properties such as margin and border do not inherit.

body {
  font-family: "Outfit", sans-serif; /* inherited by all text */
  color: #222222;                    /* inherited too */
}

Part 7

Flexbox and CSS Grid

Flexbox lays items out along one line (a row or a column). It is ideal for navbars and button groups. CSS Grid lays items out in rows and columns together. It is ideal for card layouts and page sections.

Flexbox playground

Grid playground

Part 8

Media queries and mobile-first design

People view your page on phones, tablets, and desktops. Mobile-first means you write the small-screen layout first, then use min-width media queries to add changes as the screen grows. Always include the viewport meta tag from Module 03, or phones will shrink the page instead.

Drag the slider. The preview below is a real page using the CSS shown, so its media queries respond to the width you choose.

Part 9

Hover, transitions, focus, and accessibility

Hover and focus states tell people an element is interactive. A transition makes the change smooth. Try it: hover the button, then press Tab to focus it.

.btn {
  background: #0F1F21;
  color: #92D1C3;
  transition: background 0.25s, transform 0.25s;
}

.btn:hover {
  background: #92D1C3;
  color: #0F1F21;
  transform: translateY(-3px);
}

.btn:focus-visible {
  outline: 3px solid #24494A;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

• Never remove the focus outline without a replacement. Keyboard users need to see where they are. :focus-visible shows it for keyboard use.
• Keep enough contrast between text and background so it is readable for everyone.
• Do not rely on color alone to show meaning, such as an error. Add text or an icon.
• Respect prefers-reduced-motion for people who are sensitive to animation.
• Use rem for text sizes so it scales when users change their browser font size.

Part 10

Common CSS debugging mistakes

When styles do not work, open your browser's developer tools (right-click, then Inspect). It shows which rules apply to an element and which are crossed out.

Practice

CSS playground

Edit the HTML or the CSS and the preview updates as you type. The preview is sandboxed, so scripts are blocked.

Challenge

Style a responsive webpage

The HTML below has a navbar, hero, cards, and footer, but no styles. Write the CSS in the second box. Fill in each empty rule, design it mobile-first, and use the width buttons to test it on different screens. The checklist ticks as your CSS meets each goal.

Knowledge check

Test what you learned