CSS Masterclass 2026 — From Beginner to Pro

Discover how to link CSS to HTML by using internal, external, and inline CSS within an HTML project.

External CSS is professional and used in real world projects, while inline CSS is less common and can cause confusion as projects grow; internal CSS is the next best option.

Learn how to apply inline css with the style attribute on tags, and see how writing css inside the style changes properties like font size on the target element.

Learn how internal css uses a style tag in the head to target elements with selectors, applying styles via ids, classes, tag names, and attribute selectors.

Explore types of css selectors, including ids, classes, tag names, and attribute selectors, with a focus on the most important ones: ids and classes, followed by tag names.

Discover how to use class selectors in css by defining a class with a dot, a group selector, and applying it to multiple elements to render blue text.

Learn how IDs function as individual selectors in CSS, using the # symbol to target a single element like a heading, and apply styles such as background color yellow.

Explore tag name selectors in CSS by styling the body tag with an aqua background, highlighting that tag name selectors require no prefixes.

Learn how internal css uses a style tag to select elements and apply styles to them.

Explains external CSS as a separate file, shows creating style.css, coding CSS purely without HTML tags, and linking it with a link rel='stylesheet' href='style.css', comparing inline, internal, and external CSS.

Explore css syntax as the sentence structure of styling rules, and learn how programming languages resemble spoken languages to help you read and write clean css.

Explore the CSS syntax by mastering selectors, declarations, properties, and values. Learn how brackets, semicolons, and the structure shape every CSS rule you write.

Master the CSS box model, a key concept to understand when coding in CSS today.

Learn to inspect webpage elements with the Inspect Elements tool to view an element’s box, understand the space it occupies, and see how it behaves, restoring the background to white.

Explore the CSS box model by examining content, padding, borders, and background. Learn how increasing padding creates internal space and enlarges an element’s overall size with practical examples.

Explain how margins create outer spacing around neighbor elements, distinct from the element’s own size, and demonstrate adding a 40 pixel margin to illustrate the outer space.

Explore how borders extend the element territory in CSS, with an example of a ten-pixel solid blue border.

Understand the CSS box model by grasping the content area, padding, border, and margin, and apply this concept in the real world projects in this course.

Apply text related properties and common text specific properties to span elements, practicing with paddings and margins to understand how typography behaves.

Apply font size using the CSS font-size property, specifying a numeric value with units like pixels to control text size on the selected element.

Explore font family options, including externally added fonts, Google fonts, or fonts that exist on every device, and see how a font is chosen and applied.

Discover how font weight uses a numeric scale from 100 to 900. Higher numbers make text bolder, while lower numbers render lighter.

Explore how line height affects paragraph readability by applying the CSS line-height property to paragraphs and observing changes with different pixel values.

Explore the letter-spacing property on a span using pixel units, including negative values, and see how different values affect text appearance.

Explore the text transform property in CSS, applying capitalize, lowercase, and uppercase to style text.

Discover text shadow in CSS, the first of two kinds of shadows, and learn how horizontal and vertical offsets, blur, and color shape directional shadows.

Learn how box shadow differs from text shadow by adjusting x and y angles, the shadow amount, and color to apply shadows to boxes.

Learn to style CSS borders by specifying border width, choosing a border style (solid or dashed), and selecting a color like red.

Dissect how to apply a CSS border radius to create rounded corners, adjusting curvature with pixel values like 5px, 15px, and 25px to see the effect.

Explore the different types of backgrounds and learn how to apply a solid background color to elements, using it as the visible background.

Set the background-image property using a URL to apply the flag.webp image as the element's primary background.

Learn how to use the CSS background-position property to center a background image, achieving centralized alignment and visual changes as you adjust its position.

Learn to control the page background in CSS by selecting background repeat options, from no-repeat to a full repeat, including repeat in X or repeat in Y.

Explore how background-size works, using contain to fit the entire image inside the element and cover to ensure the image covers the element.