Duration of the online course: 8 hours and 30 minutes
New
Build responsive layouts faster with this free CSS course—master selectors, cascade, Flexbox, Grid, and positioning to style modern websites with confidence.
In this free course, learn about
CSS purpose: separate presentation from HTML; improve consistency, reuse, and maintainability
Ways to apply CSS: inline, internal, external; precedence and when to use each
Intrinsic vs extrinsic sizing: auto vs 100%, min/max/fit-content and padding effects
Box model mastery: content-box vs border-box; how padding/border affect element size
Combinators: descendant, child (>), adjacent (+), general sibling (~) and their differences
Cascade algorithm: importance, origin, specificity, source order to resolve rule conflicts
Inheritance & keywords: inherit/initial/unset/revert and how values are computed
Color systems: HEX (incl alpha), RGB/RGBA, HSL/HSLA, and color keywords
Sizing units: %, px, em vs rem, unitless line-height meaning and scaling behavior
Layout behaviors: display inline/block/inline-block/table* and floats + clearing techniques
Multi-column layout: column-count/width/gap/rule/fill/span for newspaper-style columns
Positioning: static/relative/absolute/fixed/sticky; containing blocks and common patterns
Modern layout: Flexbox (axes, wrap, flex, order, alignment) and Grid (tracks, areas, placement)
Course Description
CSS is what turns plain HTML into interfaces that feel polished, readable, and professional. In this free online course, you’ll learn to style web pages with confidence by understanding not only what properties to write, but why the browser chooses one rule over another. Instead of guessing when something looks wrong, you’ll be able to diagnose issues through the cascade, specificity, and inheritance, and apply clean fixes that scale as your project grows.
You’ll start by getting comfortable with the different ways CSS can be applied, then build a solid foundation around sizing and the box model so spacing, borders, and widths behave the way you expect. From there, you’ll practice using selectors effectively, including patterns that help you target elements precisely without creating fragile stylesheets. You’ll also learn how to think in terms of design tokens and consistent styling by working with modern color formats and units that adapt well across screen sizes.
As you progress, the focus shifts to real-world layout techniques. You’ll understand how display modes shape document flow, when floats still matter, and how to avoid common layout collapse problems. Then you’ll move into the modern tools used by working developers every day: positioning for UI behaviors like sticky headers, Flexbox for one-dimensional alignment, and CSS Grid for building complete page layouts with control over rows, columns, gaps, and placement. Along the way, knowledge-check exercises reinforce concepts so you can translate theory into practical decisions.
By the end, you’ll be equipped to style pages that are consistent, responsive, and maintainable—skills that directly support front-end development roles, freelance work, and anyone aiming to ship cleaner UI faster. Whether you’re learning web development from scratch or filling gaps in your fundamentals, this course helps you build a stronger mental model of CSS so you can create layouts intentionally instead of through trial and error.
Course content
Video class: 1. Cascading Style Sheets. What is CSS ? Why we use CSS ? Introduction - CSS308m
Exercise: What does CSS primarily do in web development?
Video class: 2. Inline, Internal and External CSS. Different ways of writing CSS in HTML File - CSS306m
Exercise: Which type of CSS has the highest priority when multiple styles are applied to the same element?
Video class: 3. Intrinsic vs Extrinsic Sizing. Width Auto vs 100%. min-content, max-content, fit-content - CSS312m
Exercise: What is the key difference between width: auto and width: 100% when padding is added to an element (default box-sizing)?
Video class: 4. Understand CSS Box Model. Content-box vs border-box in box-sizing property - CSS309m
Exercise: In CSS, what changes when you set `box-sizing: border-box;` on an element with width, padding, and border?
Video class: 5. CSS Selectors. Universal, Element, Class, Id and Attribute Selectors for matching Elements - CSS12m
Exercise: In CSS attribute selectors, what does the selector a[href$=".com"] match?
Video class: 6. Grouping Selectors, Pseudo Class and Pseudo Element Selectors - CSS12m
Exercise: Which CSS selector type lets you apply the same rules to multiple selectors by separating them with commas?
Video class: 7. Descendent Selector (Space) and Direct Descendent Selector for Selecting Child Elements - CSS308m
Exercise: Which CSS selector targets only the direct child < strong > elements inside an element with class myclass (not grandchildren)?
Exercise: In CSS, what is the key difference between the '+' adjacent sibling selector and the '~' general sibling selector?
Video class: 9. Understand Cascade Algorithm. 4 Distinct Stages in the Cascade for Selecting CSS Rules - CSS308m
Exercise: In CSS, what is the purpose of the Cascade?
Video class: 10. Explaining 4 Stages of the Cascading Algorithm for the conflict CSS for an Element - CSS310m
Exercise: When two CSS rules conflict, which factor decides the winner when the selectors have the same specificity and importance?
Video class: 11. Understand the CSS Specificity Concept for resolving the conflicts in Styles - CSS11m
Exercise: In CSS specificity scoring, which selector type has the highest points (excluding !important)?
Video class: 12. Apply CSS Inheritance using inherit value for non inheritable Property - CSS310m
Exercise: In CSS inheritance, which rule determines what value a child element uses when multiple ancestors define the same property (e.g., color)?
Video class: 13. CSS Inheritance value Initial and Unset for controlling Inheritance for elements - CSS313m
Exercise: In CSS, what does the value "unset" do when applied (e.g., using "all: unset")?
Video class: 14. CSS Revert Value for applying the Browser default value - CSS308m
Exercise: In CSS, what does the value revert do when applied to a property like background-color?
Video class: 15. CSS Hexadecimal Color Notation in the CSS and its Alpha Value for Transparency - CSS309m
Exercise: In CSS hexadecimal color notation, what do the first two digits of a 6-digit HEX code represent?
Video class: 16. RGB color, HSL Color notation with Alpha option and color Keywords - CSS310m
Exercise: In CSS, what value sets the color black using the RGB() function?
Video class: 17. CSS Sizing Units. Numeric Sizing and Percentage Sizing unit for elements - CSS308m
Exercise: In CSS, what does a unitless line-height value like 1.5 mean when the font-size is 24px?
Video class: 18. Sizing Units in CSS. Difference between the em and rem sizing Units - CSS308m
Exercise: In CSS, what is the key difference between em and rem units for font-size?
Video class: 19. Difference between CSS Inline, Block and Inline-Block values in Display Property - CSS309m
Exercise: Which display value lets an element stay inline (side-by-side) while still allowing width and height to be applied?
Video class: 20. CSS Display Table, table-row and table-cell and how to use it for the elements - CSS309m
Exercise: Which set of CSS display values can make a structure built with
elements behave like a table with rows and cells?
Video class: 21. Float Positioning Property Basics. Float Left, Right and Clear Property Values in CSS - CSS309m
Exercise: In CSS, what does using float on an image mainly help you achieve?
Video class: 22. Techniques for Clearing Floats in CSS Layout. Solving Common Problems with CSS Float - CSS311m
Exercise: When both the main content and sidebar are floated inside a container, why can the container’s white background appear to disappear?
Video class: 23. Design Simple Webpage Layout using CSS Floats - CSS316m
Exercise: Why can a header’s background color seem to disappear after floating its child elements left and right?
Video class: 24. CSS Multicolumn Layout using column-count, column-width and columns property - CSS309m
Exercise: Which CSS properties are used to create and control a multi-column layout for content like newspaper-style articles?
Video class: 25. CSS column-gap, column-rule, column-fill, column-span properties in Multicolumn Layout - CSS311m
Exercise: Which CSS property makes an element (like a blockquote) span across all columns in a multi-column layout?
Video class: 26. CSS Positioning Property Relative and its Functionality how it works for an element - CSS312m
Exercise: Which CSS position value is the default for HTML elements, keeping them in the normal document flow and not movable using top/left?
Video class: 27. CSS Absolute Positioning Property. Absolute vs Relative Property behavior in CSS - CSS313m
Exercise: When a child element is set to position: absolute, what determines its positioning reference point?
Video class: 28. CSS Position Fixed Property. How it differs from Absolute Property in CSS08m
Video class: 29. Make CSS fixed Header and Footer for a Web Page using position fixed property in CSS - CSS308m
Exercise: When an element is changed to position: fixed and its width appears to collapse, what is a practical way to retain the same width as its parent container?
Video class: 30. Position Sticky Property. How it differs from the Fixed property in CSS - CSS308m
Exercise: In CSS, what key behavior distinguishes position: sticky from position: fixed?
Video class: 31. Usage of Sticky Position Property in the real time web Apps CSS - CSS308m
Exercise: Which CSS setup makes a heading stay fixed while scrolling, but only within its parent section?
Video class: 32. Flexbox - Understand CSS Flexbox Layout Mechanism - Main Axis and Cross Axis - CSS310m
Exercise: In Flexbox, which property defines the main axis direction (and therefore determines the cross axis automatically)?
Video class: 33. CSS Flexbox direction for aligning items. row | row-reverse | Column | column-reverse - CSS309m
Exercise: In a flex container, which flex-direction value lays out items in a row starting from the end of the container (right-to-left)?
