CSS Introduction Tutorial | SovranCode

Course contentsCSS Introduction · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 43 min

CSS Introduction

Understand the role of CSS and connect a stylesheet to a meaningful HTML document.

CSS is a rule language for presentation. A selector chooses elements, a property names a visual decision, and a value supplies that decision. Keeping structure in HTML and presentation in CSS makes both layers easier to reason about.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

/* styles.css */
body {
  margin: 0;
  color: #10231f;
  background: #f8f6ef;
  font-family: system-ui, sans-serif;
}

h1 {
  max-width: 14ch;
  line-height: 1;
}

Working rules

Link one stylesheet from the document head
Start with readable defaults before component styles
Use browser developer tools to inspect applied rules

A common mistake

Do not use CSS to replace missing HTML meaning. A styled div is still a div; choose the correct element first.

Guided practice

Change the background and heading width, then explain which layer owns each decision.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

Lesson review

You should now be able to recognize the css introduction pattern, explain why it is useful, and apply it in a focused example. Complete the checks below before moving to the next lesson.

CSS DEEP DIVE · ABOUT 25 MIN

Style a workshop invitation

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Connect the stylesheet before debugging the design

An external stylesheet is a separate file, requested through a link element in the document head. Its href is resolved from the HTML document URL. A missing file, wrong capitalization, or a response containing HTML instead of CSS can leave you looking at browser defaults. Open the Network panel, reload, and inspect the stylesheet response before changing selectors. A style element embeds the rules in this exercise so the example can run as one portable document; for a real multi-page site, move the rules into a shared stylesheet.

Read a rule as a selection and a set of decisions

In .invitation { padding: 2rem; }, the selector identifies a class, the braces group declarations, and the colon separates the property from its value. Semicolons separate declarations. An invalid property or unsupported value is usually ignored without stopping the entire stylesheet. Start with one visible change, inspect the matched rule, and then add the next declaration. Browser defaults still apply wherever your rules do not replace them: a heading remains a heading and a link remains keyboard-operable even when their appearance changes.

Change only the invitation padding. Predict which space will grow, then compare it with changing the body padding.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { margin: 0; padding: 2rem; font: 1rem/1.7 system-ui; background: #edf2f7; color: #172b40; }
.invitation { max-width: 40rem; margin-inline: auto; padding: 2rem; background: white; border-top: 6px solid #254fc0; }
h1 { line-height: 1.15; }
a { color: #254fc0; }
</style>
</head>
<body>
<main class="invitation"><h1>Saturday CSS workshop</h1><p>Bring your curiosity and a browser. We will turn a plain document into a readable invitation.</p><a href="#details">Read the details</a><p id="details">Starts at 10:00. Beginners welcome.</p></main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { margin: 0; padding: 2rem; font: 1rem/1.7 system-ui; background: #edf2f7; color: #172b40; }
.invitation { max-width: 40rem; margin-inline: auto; padding: 2rem; background: white; border-top: 6px solid #254fc0; }
h1 { line-height: 1.15; }
a { color: #254fc0; }
</style>
</head>
<body>
<main class="invitation"><h1>Saturday CSS workshop</h1><p>Bring your curiosity and a browser. We will turn a plain document into a readable invitation.</p><a href="#details">Read the details</a><p id="details">Starts at 10:00. Beginners welcome.</p></main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.invitation { color #172b40; padding: 20; }

Reveal repair and explanation

.invitation { color: #172b40; padding: 20px; }

The color declaration needs a colon. A nonzero length needs a unit here; unitless zero is permitted. Inspect both declarations separately rather than assuming the whole file failed.

INDEPENDENT LAB

Build it without copying

Create a two-page event site with one shared styles.css file. Give both pages readable defaults and the same invitation class.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Style a workshop invitation lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Style a workshop invitation</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Style a workshop invitation lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Style a workshop invitation</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

Both HTML files link to the same stylesheet and the request succeeds.Changing one shared rule updates both pages.The link remains usable by keyboard and the content makes sense without CSS.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. The page has no custom styles. What should you verify first?Increase every selector's specificityCheck that the stylesheet request loads the intended CSSReplace all headings with div elements

2. Which declaration provides a valid nonzero padding length?padding: 16;padding = 16px;padding: 1rem;

Loading saved work…