Learn

Lesson 05 / CSS

Intro to CSS

Time
55 min
Type
Reading + Interactive
Level
Beginner

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

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 (opens in a new tab).

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>

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: A set of property-value pairs inside curly braces.
  • Property: The style to be applied, such as color.
  • Value: The setting for the property, such as red.
selector {
  property: value;
}

Code Example: Type Selector

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

h1 {
  color: blue;
}

Code Example: ID Selector

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

#myDiv {
  background-color: lightgray;
}

Code Example: Class Selector

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

.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.

div p {
  color: green;
}

Code Example: Pseudo-Class

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

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.

p {
  color: blue;
}

body {
  background-color: lightgray;
}

h1 {
  font-size: 2em;
}

p {
  font-family: Arial, sans-serif;
}

div {
  width: 500px;
}

img {
  height: 200px;
}

p {
  margin: 20px;
  padding: 10px;
}

div {
  border: 1px solid black;
}

Code Example: Container / Wrapper

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

div {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

Code Example: Centering in CSS

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

p {
  text-align: center;
}

div {
  max-width: 800px;
  margin-left: auto;
  margin-right: 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.
  • Specificity: More specific selectors take precedence.
  • !important: Overrides all other rules but should be used sparingly.

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.

body {
  color: red;
}

p {
  color: blue;
}

Common Mistakes

  • Forgetting to link the CSS file in the HTML.
  • Writing a selector that does not match the HTML.
  • Using an ID selector when a reusable class would be better.
  • Forgetting a semicolon between declarations.
  • Expecting an earlier rule to win when a later rule overrides it.
  • Using !important instead of understanding the cascade.

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

  • Move styles out of HTML and into an external stylesheet.
  • Create type, class, and pseudo-class selectors.