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.
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.
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.
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.
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.
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.
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.
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.
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.
CSS selectors are the part of a style rule that answers the question "which elements should this styling apply to?" Every rule you write begins with a selector, so learning the selector vocabulary — element (type) selectors, class selectors, ID selectors, and the various ways of combining them — is the foundation for everything else you will do with CSS in this module.
Once you can target elements precisely, a second question arises: what happens when two or more rules try to style the same element in different ways? That is where specificity and the cascade come in. Specificity is a scoring system that ranks selectors (ID selectors outrank class selectors, which outrank element selectors), and the cascade adds rules about source order, origin, and importance. Understanding both lets you debug "why isn't my style applying?" instead of guessing.
As you watch the videos below, pay attention to three things: the exact syntax for each selector type (the dot for classes, the hash for IDs, spaces and commas between selectors mean very different things), when it is appropriate to use a class versus an ID, and how specificity is calculated when rules conflict. Try typing the examples into your own stylesheet and changing them — selector behavior is much easier to remember once you have broken a rule and fixed it yourself.
Part of CodeWithHarry's Sigma Web Development Course, this "MasterClass" session covers CSS selectors in a single fourteen-minute lesson with live coding. Expect coverage of the main selector families — element, class, and ID — along with ways of combining selectors such as grouping, descendant, and child relationships. Being part of a structured course, it is presented in a build-as-you-go style you can follow along with in your own editor.
CodeWithHarry is a well-established web development channel, and the video's broad "masterclass" scope and large viewership make it a solid single resource for the element, class, ID, and combination selector subtopics.
This Future Fullstack video focuses specifically on CSS specificity, explaining, as its description states, how different types of selectors are weighted when conflicting style declarations target the same element. It takes a deliberately detailed approach, so expect worked examples of how specificity values are calculated and compared across selector types. This is the video to watch when you need to understand why one rule wins over another.
It isolates and explains the specificity and cascade subtopics in depth — the part of selector study students most often find confusing — complementing the broader selector overviews.
A short, beginner-oriented tutorial from the Web Tech Talk "CSS Zero to Hero" series that introduces CSS selectors from the ground up. Based on its title and series framing, it should walk through the basic selector types — element, class, and ID — with simple syntax examples. At roughly eight minutes, it is designed as a quick first exposure rather than an exhaustive reference.
Its brevity and beginner focus make it a good starting point before the longer videos, giving you the core element, class, and ID selector syntax in one sitting.
Together these videos directly support MO2: the Web Tech Talk and CodeWithHarry lessons build the practical skill of constructing CSS rules with element, class, ID, and combination selectors, while the Future Fullstack video supplies the specificity and cascade reasoning needed to resolve conflicting declarations. Because selectors are what connect a stylesheet to the HTML it styles, this work also underpins the later module outcomes — you will rely on accurate, well-chosen selectors when applying box model properties (MO3), building Flexbox and positioned layouts (MO4), and organizing a complete external stylesheet for your final styled page (MO5).
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.
Every element you place on a web page is rendered as a rectangular box, even when its edges are invisible. The CSS box model describes the four layers of that box: the content area where text and images live, the padding that cushions the content, the border that wraps around the padding, and the margin that separates the box from its neighbors. Understanding these layers is what turns guesswork about spacing into deliberate, predictable design decisions.
This topic matters in COP4813 because almost every layout problem you will face later — aligning sections, spacing navigation links, sizing cards in a grid — comes back to the box model. A related detail, the box-sizing property, determines whether the width you set applies only to the content area (content-box, the default) or includes padding and border (border-box). Many developers set border-box globally precisely because it makes sizing far easier to reason about.
As you watch, pay attention to three things: how shorthand properties such as margin: 10px 20px map to the top, right, bottom, and left sides; how margins behave differently from padding (especially around background color and collapsing margins); and how the browser's DevTools box model diagram lets you read the computed content, padding, border, and margin values for any element on a live page. Try reproducing each demonstration in your own test file rather than only watching.
A tutorial from CodeWithHarry's Sigma Web Development series that walks through the CSS box model with a focus on margin, padding, and borders. Expect hands-on code demonstrations showing how each property affects an element's visible size and spacing, including shorthand notation for setting values on individual sides.
At roughly 18 minutes it is the most thorough walkthrough of the three core spacing layers, and it comes from a widely followed, beginner-oriented web development series, making it a solid primary overview for the content, padding, border, and margin subtopics.
This lesson introduces the box model alongside the div element, so you see the model applied to the generic container you will use most often in layout work. It covers margin, padding, and the box-sizing property, connecting how an element is marked up in HTML to how its box is sized and spaced in CSS.
It is a compact, well-paced review that explicitly includes box-sizing, and pairing the box model with div containers reinforces the connection between HTML structure and CSS spacing that you will need for later layout topics.
A focused deep dive on the box-sizing property and the difference between the content-box and border-box values. The video is devoted to explaining how each setting changes the way declared width and height are calculated once padding and borders are added.
Box-sizing is the single most common source of confusion in the box model, and this video treats it as the main subject rather than a side note, giving you the detailed explanation needed to use border-box confidently in your own stylesheets.
Together these videos target MO3 directly: they demonstrate how content, padding, border, and margin interact and how to manipulate each one to control spacing and sizing. The first two provide the foundational walkthrough of the four box areas and their shorthand syntax, while the third resolves the content-box versus border-box question that determines how your declared widths actually render. Because box model control underpins layout work and overall page polish, the skills practiced here also feed into MO4, where you arrange elements with Flexbox and positioning, and MO5, where you integrate spacing rules with typography, color, and layout in a single organized external stylesheet. Reinforce the viewing by inspecting your own pages in DevTools to verify the computed box values.
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.
Typography and color are two of the most visible decisions you make in CSS. Font family, font size, font weight, line height, and text alignment determine whether a block of text is comfortable to read or exhausting to look at, and color determines contrast, mood, and whether a visitor can read your content at all. These are not decorative afterthoughts — they are the properties you will reach for first when you begin styling any page.
In this topic you will work with two related skill sets. The first is text styling: choosing a font stack with font-family, setting size and weight, adjusting line-height for readable spacing between lines, and controlling alignment with text-align. The second is color: naming a color with a keyword like red or steelblue, specifying it precisely with a hex code such as #3366FF, or building it from channel values with rgb() and rgba() notation. You will apply those color values to both the color property (text) and the background-color property (the area behind it).
As you watch the videos below, pay attention to syntax details that trip students up: the comma-separated fallback list in font-family, the unitless number often used for line-height, the # prefix and six-digit pattern of hex codes, and the 0–255 range of each RGB channel. Also notice that every color value in these videos ultimately describes the same thing — the formats are interchangeable, so you can choose the one that fits your workflow. Keep contrast between text color and background color in mind throughout; it is the practical reason these two subtopics are taught together.
A short beginner introduction to color in CSS from the W3Schools video series. Based on the W3Schools CSS Colors reference pages, it should walk through how colors are specified in CSS and how those values are written into style rules. Expect coverage of the basic color formats you will use in your own stylesheets.
W3Schools is the reference most beginning web developers use daily, so this video matches the documentation you will likely consult while coding, and its three-minute length makes it an efficient entry point to the named-value, hex, and RGB subtopics.
A concise overview from Udacity of the typography tools CSS gives you for styling text on a page. It is framed around the range of text-related properties available, which is exactly the font-family, size, weight, and spacing territory of this topic. Treat it as a map of what is possible before you practice the individual properties.
Udacity produces structured instructional content for developers, and this video gathers the typography subtopics into one short survey, which helps you see how font and text properties work together rather than as isolated rules.
A longer, more explanatory video that compares the different ways of writing a color value in CSS — hex, RGB, and HSLA — and discusses when you might choose one over another. As part of a project-based series, it is likely to show these values being used in real stylesheet code. The added HSLA material goes slightly beyond this topic but reinforces how all color notations relate.
This is the clearest fit for the hex-versus-RGB subtopics because it directly contrasts the notations instead of simply listing them, helping you understand that the formats are different ways of expressing the same color.
These videos support MO5 most directly: producing a cohesive, fully styled page requires confident control of typography and color inside your external stylesheet, and the Udacity typography overview plus the two color videos give you the property vocabulary to do that. They also reinforce MO2, since every font and color declaration demonstrated must be attached to an element, class, or ID selector and may be overridden by the cascade — watching how these rules are written gives you more realistic material to reason about specificity with. Finally, the text-spacing properties covered here (line-height in particular) connect to the spacing concerns of MO3, where margin and padding control the space around elements rather than within the text itself.
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.
Up to this point in the module you have been styling individual elements — choosing fonts and colors, writing selectors, and adjusting padding, borders, and margins. CSS layout is the next step: deciding where elements sit on the page and how they relate to one another. Every HTML element starts out following the normal document flow, where block-level elements stack vertically and inline elements sit side by side within a line. Layout techniques are the tools you use to change that default behavior deliberately.
This topic focuses on two of the most practical tools for that job. Flexbox is a one-dimensional layout model that lets a container distribute, align, and space its children along a row or a column, and it is the standard way to build navigation bars, card rows, and side-by-side content sections. CSS positioning — static, relative, absolute, fixed, and sticky — lets you take an element partly or fully out of normal flow to pin it in a specific place, such as a sticky header or a badge layered over an image. Together these give you enough control to assemble a multi-section page layout without hacks.
As you watch the videos below, pay attention to the distinction between properties you set on the container (display, flex-direction, justify-content, align-items) and properties you set on individual children (flex-grow, flex-shrink, flex-basis, align-self, and the offset properties top, right, bottom, left). Also notice what each positioning value is measured against — that is the most common source of confusion. Try reproducing the examples in your own stylesheet rather than only watching; layout is much easier to understand when you can change a value and see what moves.
This Webflow tutorial surveys the main values of the CSS display property, including block, flex, grid, inline-flex, inline-grid, and none, and explains how each one changes the way an element and its children are laid out. Based on its title and description, it is an overview video that compares layout modes rather than drilling deeply into any one of them. Expect visual demonstrations of how switching a container's display value rearranges the elements inside it.
It is a good starting point for the Understanding CSS Layout Flow subtopic because it frames Flexbox as one option among several display modes, which helps you see why and when you would reach for it. Webflow produces design-focused instructional content, so the explanations are presented visually, which suits a layout topic.
A focused, roughly twelve-minute walkthrough of Flexbox, with timestamps indicating it begins at display: flex and continues through the core flex properties. It should cover setting up a flex container and then working through direction, alignment, justification, and the properties applied to individual flex items. The short runtime means it moves quickly and concentrates on the properties you will use most often.
This video maps directly onto three of our subtopics — Introducing Flexbox, Aligning and Justifying Flex Items, and Controlling Individual Flex Items — in a single compact lesson. The chapter timestamps also make it easy to return to a specific property while you are working on your own layout.
A brief explanation of the five values of the CSS position property: static, relative, absolute, fixed, and sticky. In just over three minutes it should define each value, show what each one is positioned relative to, and demonstrate how the top, right, bottom, and left offsets behave in each case. It is a basics-level video intended as a quick conceptual reference.
It covers the CSS Positioning subtopic directly and concisely, which is useful because positioning is a small set of rules that mainly needs to be understood rather than practiced at length. Its short length makes it easy to rewatch when you are deciding whether an element needs relative, absolute, or sticky positioning in your page layout.
These three videos together support MO4, the outcome that asks you to arrange page elements into multi-section layouts using Flexbox alignment properties and CSS positioning. The Webflow overview establishes how display values govern layout flow so you can choose the right approach for a given section; the Flexbox tutorial supplies the container and item properties you will use to align and distribute content; and the positioning video covers the static, relative, absolute, fixed, and sticky behaviors needed to place elements outside normal flow. Because layout rules are written alongside your typography, color, and box model rules, practicing these techniques also feeds into MO5, where you integrate everything into one organized external stylesheet.
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.
So far in this module you have worked with individual CSS concepts: selectors, the cascade, typography properties, color values, the box model, and layout tools like Flexbox. This topic brings all of those pieces together. Instead of styling one element at a time, you will style an entire page from top to bottom using a single external stylesheet, making deliberate choices about fonts, colors, spacing, and navigation so the finished site looks like one coherent design rather than a collection of unrelated rules.
Two habits matter most here. The first is organization: linking your stylesheet correctly with the link element in the head, then grouping rules in a predictable order (resets and base styles, typography, layout, components, interactive states) with comments so you and your teammates can find things later. The second is consistency: reusing a small set of fonts, a limited color palette, and repeatable spacing values so the page feels intentional. Interactive elements such as navigation links, buttons, and form fields need special attention because they have multiple states (normal, hover, focus) that users rely on.
As you watch the videos below, pay attention to three things: how each presenter connects a style rule to the element it targets, how they inspect and verify results in the browser rather than guessing, and how they handle spacing and alignment with box model properties. When you return to your own site, review your stylesheet critically — look for duplicated rules, inconsistent values, and declarations that are not actually doing anything.
A fast-paced overview of CSS that, based on its title and framing, walks through the core of the language in roughly seven minutes. Expect coverage of how CSS is attached to HTML, basic selector types, and common property categories such as text, color, and spacing. Note that the instruction in this video is delivered in Hindi, though the on-screen code and demonstrations are in standard CSS.
It serves as a compact refresher that ties the module's separate concepts back together before you style a complete page, and CodeWithHarry is a widely followed coding channel known for condensed, code-first walkthroughs.
Produced by the Chrome for Developers team, this episode shows how to use browser DevTools to figure out why a CSS rule you wrote is not taking effect. The presenters demonstrate inspecting elements, reading the styles panel, and spotting problems such as overridden, invalid, or inactive declarations. It is a troubleshooting workflow rather than a lecture on syntax.
Reviewing and refining a finished stylesheet depends on being able to diagnose specificity conflicts and dead rules, and this guidance comes directly from the team that builds the Chrome DevTools.
A focused lesson on applying CSS to an HTML form, an area the description notes is often overlooked in web design. It is likely to cover labeling and aligning form fields, controlling their width and spacing, and making inputs and buttons look consistent with the rest of a page. Forms are a practical case study in spacing and interactive element styling.
Forms combine the box model, alignment, and interactive states in one small component, and LinkedIn Learning content is professionally produced and instructionally sequenced, making it a good fit for the navigation and interactive elements subtopic.
Together these videos support the capstone goals of the module. The CSS overview reinforces how stylesheets connect to HTML and how selectors and properties work, backing MO1 and MO2. The form styling lesson gives concrete practice with padding, margins, borders, and alignment on real page components, supporting MO3 and MO4 while modeling the styling of interactive elements. The DevTools episode addresses the cascade and specificity in practice, helping you resolve conflicting declarations (MO2) and audit your work. Taken as a set, they prepare you for MO5: producing a fully styled, cohesive page whose typography, color, layout, and spacing all live in one organized external stylesheet.
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.