Introduction to CSS

Introduction

HTML gives a web page its structure and meaning, but on its own it says almost nothing about how that content should look. Cascading Style Sheets (CSS) is the language that handles presentation: colors, fonts, spacing, borders, backgrounds, and layout. Browsers read your HTML, then apply the CSS rules you have written to decide how each element is painted on the screen.

In this topic you will meet the basic anatomy of a CSS rule — a selector that targets elements, followed by declarations made of property and value pairs — and the three ways to attach CSS to an HTML document. Inline CSS uses the style attribute on a single element, internal CSS places a style block in the document head, and external CSS keeps rules in a separate .css file linked with a link tag. All three work, but they differ sharply in reusability and maintainability, which is why professional projects overwhelmingly favor external stylesheets.

As you watch the videos below, pay attention to three things: the exact syntax used in each method, where the code physically lives relative to the HTML, and the reasoning each instructor gives for preferring one method over another. Try typing the examples into your own practice file rather than only watching — seeing a style take effect in your browser is the fastest way to make the cascade feel concrete.

Video 1: Introduction to CSS | Sigma Web Development Course - Tutorial #14

CodeWithHarry · 9:14 · 684,994 views · 2y ago · captions — Watch on YouTube

About this video

This is the opening CSS lesson in CodeWithHarry's Sigma Web Development course, following his HTML tutorials. Based on its title and placement in the series, it introduces what CSS is, why styling is separated from HTML structure, and the basic rule syntax of selectors, properties, and values, most likely with live browser demonstrations.

Why this video

It is a well-paced starting point from a widely followed web development channel, and it targets the "What is CSS?" and "How CSS Works with HTML" subtopics directly before any method comparison is introduced.

Video 2: Inline, Internal & External CSS | Sigma Web Development Course - Tutorial #15

CodeWithHarry · 11:04 · 584,810 views · 2y ago · captions — Watch on YouTube

About this video

The direct follow-up to the previous tutorial, this video focuses specifically on the three ways of applying CSS: inline via the style attribute, internal via a style tag in the head, and external via a linked stylesheet file. Expect side-by-side code examples showing the same styling achieved three different ways, along with commentary on which to use.

Why this video

It maps one-to-one onto the Inline CSS, Internal CSS, External CSS, and Choosing the Right Method subtopics, and continuing with the same instructor keeps the code conventions and terminology consistent.

Video 3: Introduction To CSS | Inline, External And Internal CSS | Web Development Course #14

Coding Shuttle by Anuj Bhaiya · 15:18 · 248,557 views · 4y ago · captions — Watch on YouTube

About this video

Anuj Bhaiya's lesson covers the importance of CSS and then walks through internal, inline, and external stylesheets in a single longer session. At roughly fifteen minutes it has room to demonstrate the setup of an external .css file and the link tag that connects it to an HTML page.

Why this video

It gives you a second explanation of the same material from a different instructor and course structure, which is useful if a particular point from the first two videos did not click.

How These Videos Support the Learning Outcomes

These videos build the foundation for MO1 by defining CSS, showing how it attaches to HTML, and demonstrating inline, internal, and external methods side by side so you can judge which fits a given scope. The rule syntax introduced here — selector plus declaration block — is the prerequisite for the selector and specificity work in MO2 and for writing the box model, typography, and layout properties required by MO3 and MO4. Most importantly, the emphasis on external stylesheets prepares you for MO5, where your final styled page must be driven by a single organized external .css file.

About These Videos

These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.