Learn

Lesson 05 / CSS

CSS Basics

Time
55 min
Type
Reading + Interactive
Level
Beginner
Use
Core

Learn how CSS works with HTML and JavaScript, where styles can live, and how selectors, declarations, the cascade, and inheritance shape a site.

Course Role

Core

Part of the main course path. Prioritize this before moving to optional polish or deeper references.

See course roadmap Minimum viable paths
Teacher Notes / In-Class Use

Demo Live

  • Use the selector playground to compare type, class, ID, descendant, and hover selectors on the same preview.
  • Show how one selector can affect many elements while a class creates a reusable styling hook.

Try In Class

  • Have students add one class to their HTML and style it from an external stylesheet.
  • Ask students to create a hover state that changes both color and underline so links have two affordances.

Submit Or Check

  • Confirm CSS is external and linked in the document head.
  • Ask students to point to the selector, property, and value in one rule they wrote.

Watch For

  • Inline styles becoming the default habit.
  • Students using IDs for repeated styles that should be classes.

Learning Goals

  • Explain the relationship between HTML, CSS, and JavaScript
  • Compare inline styles, internal stylesheets, and external stylesheets
  • Use selectors, common CSS properties, the cascade, and inheritance

Interactive Demo

How to use this demo.

Use the demo as a small lab. Change one thing, observe the result, then connect it back to your own project.

What To Try

  • Choose different selectors from the menu and watch which preview elements get highlighted.
  • Compare a type selector with a class selector and a descendant selector.

What Changes

  • The highlighted elements change based on which selector matches the preview markup.
  • The code sample updates so you can connect the selector to the visual result.

What To Notice

  • Some selectors are broad and affect many elements.
  • Classes are reusable hooks that make styling more intentional.

Apply It

  • Add one reusable class to your own page and style it from your external stylesheet.

Interactive Demo

Selector Playground

Choose a selector and watch which elements match. Selectors are how CSS finds the HTML you want to style.

Project Gallery

This paragraph sits outside the card.

Card title

This paragraph is inside the card.

View project 
p {
  color: green;
}

What to notice

  • Type selectors can match many elements at once.
  • Class selectors are reusable across multiple elements.
  • ID selectors should be unique on a page.

Try this

  • Compare .card with .card p.
  • Notice how #featured only targets one element.
  • Copy one generated selector into your stylesheet.

This demo uses extra JavaScript for teaching. The code sample shows the pattern to practice. View full demo source.

What This Teaches

This lesson introduces CSS as the language that controls how HTML looks.

You will learn where CSS can live, how selectors target HTML, how declarations change appearance, and why the cascade matters.

Why It Matters

HTML gives a page structure, but CSS gives that structure visual hierarchy, spacing, rhythm, color, and layout.

Good CSS makes a site easier to read, easier to use, and easier to maintain.

The goal is not just to make a page pretty. The goal is to make visual decisions clearly and consistently.

Core Concept: Site Layers

CSS works with HTML and JavaScript to build web pages. Each layer has a different job.

  • HTML: Defines the content and structure of the page. This includes elements such as headings, paragraphs, images, lists, and forms.
  • CSS: Controls the presentation and appearance of the HTML content. This includes colors, fonts, layout, spacing, and visual effects.
  • JavaScript: Adds behavior to the page, making it interactive. This includes animations, dynamic content updates, and user input handling.

Core Concept: Where CSS Can Live

CSS can be applied directly to an element, written inside an HTML document, or placed in an external stylesheet.

In class projects, external stylesheets should usually be your default because they keep structure and presentation separated.

Inline Styles

Styles are applied directly to an HTML element using the style attribute within the opening tag.

Note: Inline styles are discouraged because they can reduce readability and maintainability, especially in larger projects.

<h1 style="color: blue; font-size: 2em;">Welcome!</h1>

Internal Stylesheets

Styles are defined within the head section using the style tag.

<head>
  <style>
    h1 {
      color: red;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Welcome!</h1>
</body>

External Stylesheets

Styles are placed in a separate file, such as styles.css, and linked using the link tag.

Recommended: External stylesheets improve code organization and reuse.

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

Full HTML and CSS Connection

Most class projects should use an index.html file for structure and a styles.css file for presentation.

The HTML file connects to the CSS file with a link element in the head.

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<!-- styles.css -->
body {
  font-family: Arial, sans-serif;
  color: #222;
}

Code Example: External Stylesheet Rule

h1 {
  color: green;
  font-family: Arial, sans-serif;
}

Core Concept: Selectors and Declarations

CSS syntax uses selectors and declarations. The selector chooses what to style. The declarations say how it should look.

  • Selector: Defines the elements to be styled.
  • Declaration block: The curly braces that contain one or more declarations.
  • Declaration: A property and value pair, such as color: blue;.
  • Property: The style to be applied, such as color.
  • Value: The setting for the property, such as blue.
selector {
  property: value;
}

CSS Rule Anatomy

A CSS rule starts with a selector, then uses declarations to change the selected elements.

  • p is the selector.
  • color: blue; is the declaration.
  • color is the property.
  • blue is the value.
p {
  color: blue;
}

Code Example: Type Selector

Targets all elements of a given type. For example, targeting all h1 tags.

Use type selectors for broad defaults, such as styling all paragraphs or all headings.

h1 {
  color: blue;
}

Code Example: ID Selector

Targets a single element with a specific ID, defined using the # symbol.

ID selectors are very specific. For styling, classes are usually easier to reuse and maintain.

#myDiv {
  background-color: lightgray;
}

Code Example: Class Selector

Targets any elements that use a given class, defined using the . symbol.

Use class selectors for reusable styling patterns.

.container {
  padding: 20px;
  background-color: #efefef;
}

Code Example: Descendant Selector

Targets elements that are nested within another element. This example targets only paragraphs inside div elements.

Use descendant selectors when location in the HTML structure matters.

div p {
  color: green;
}

Code Example: Pseudo-Class

Targets elements in a particular state, like when a user hovers over a link.

Use pseudo-classes for interaction states such as :hover, :focus, and :visited.

a {
  color: green;
}

a:hover {
  color: blue;
}

CSS Comments

Comments in CSS are used to leave notes and are not rendered on the page.

CSS uses /* */ for comments. The // single-line comment style is common in some languages, but it is not valid standard CSS.

body {
  color: blue;
  /* Multi-line comment
  border: 1px solid black;
  background-color: #efefef; */
}

Core Concept: Common CSS Properties

These are frequently used CSS properties to control layout, text, and element appearance.

GroupPropertiesWhat they control
Textcolor, font-size, font-familyText color, size, and typeface.
Page surfacebackground-colorThe background color behind an element.
Sizewidth, height, max-widthHow wide or tall an element can be.
Box spacingmargin, paddingSpace outside and inside an element.
Bordersborder, border-radiusEdges and corner shape.

Code Example: Container / Wrapper

Used to center content and limit maximum width for layout consistency.

A reusable class is better than styling every div the same way.

.container {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 20px;
}

Code Example: Centering in CSS

Text can be centered with text-align. Block elements can be centered using auto margins.

p {
  text-align: center;
}

.container {
  max-width: 800px;
  margin-inline: auto;
}

Core Concept: The Cascade

The cascade is how the browser decides which CSS rule wins when more than one rule applies to the same element.

When CSS feels confusing, the issue is often order, specificity, or inheritance.

  • Last rule: Later rules override earlier ones if selectors match and have the same specificity.
  • Specificity: More specific selectors take precedence.
  • !important: Overrides normal cascade rules but should be used sparingly.

Cascade Example: Later Rule Wins

When two matching selectors have the same specificity, the later rule wins.

The paragraph text will be blue because the second p rule comes later.

p {
  color: green;
}

p {
  color: blue;
}

Specificity Example: Class Beats Type

A class selector is more specific than a type selector. If the HTML paragraph has class="intro", the class rule wins.

p {
  color: green;
}

.intro {
  color: blue;
}

Core Concept: Inheritance

Some properties, like color and font-family, are inherited by child elements.

Inheritance lets you set broad defaults on the body, then override them when needed.

Most text will inherit the body font and color. Links use the a rule because it overrides the inherited color.

body {
  font-family: Arial, sans-serif;
  color: #222;
}

a {
  color: green;
}

Common Mistakes

MistakeWhy it breaksFix
CSS file not linkedThe browser never loads styles.css.Add <link rel="stylesheet" href="styles.css"> inside the head.
Selector does not match HTMLThe rule exists, but no element is selected.Compare the selector with the actual element, class, or ID in the HTML.
Missing semicolonThe next declaration may not be read correctly.End declarations with a semicolon, such as color: blue;.
Missing closing braceThe browser may treat later rules as part of the same rule.Close every rule with }.
Class selector missing .container selects an element named container, not class="container".Use .container for classes.
ID selector missing #hero selects an element named hero, not id="hero".Use #hero for IDs.
Earlier rule expected to winLater rules can override earlier rules.Check rule order and specificity in developer tools.
Using !important too quicklyIt makes future overrides harder.Inspect the cascade and adjust selector or rule order first.

Debugging Checklist

  • Confirm the CSS file path is correct in the link tag.
  • Open browser developer tools and inspect the element.
  • Check whether the selector matches the element you are trying to style.
  • Look for crossed-out styles in developer tools to see which rules are being overridden.
  • Check spelling, punctuation, braces, colons, and semicolons.
  • Simplify the selector and test one property at a time.

Resources

MDN: CSS basics | MDN: CSS selectors | CSS-Tricks | W3Schools CSS

Checkpoint

Before moving on, make sure these feel true.

  • I can connect an external stylesheet to an HTML page.
  • I can identify the selector, property, and value in a CSS rule.
  • I can choose a class selector when I need reusable styling.

Project Connection

This lesson supports current class projects.

Project 01 Basic Webpage Create a basic webpage using HTML to practice structure, semantic markup, headings, paragraphs, lists, links, images, and basic styling.

Practice

  • Create a styles.css file.
  • Link styles.css from index.html using a link element in the head.
  • Style the body with a font family, text color, background color, and margin.
  • Create a reusable .container class with max-width, margin-inline: auto, and padding.
  • Style headings and paragraphs with type selectors.
  • Create at least one reusable class selector.
  • Add a hover state with a pseudo-class, such as a:hover.
  • Inspect one styled element in developer tools and find where the winning rule comes from.
  • Intentionally break one selector, then fix it after checking the page in the browser.