Duration of the online course: 8 hours and 30 minutes
New
Free CSS course covering selectors, cascade, box model, sizing, positioning, Flexbox and Grid to build modern, responsive web layouts.
In this free course, learn about
CSS Foundations and How to Apply Styles
Sizing and the Box Model
Selectors and the Cascade
Inheritance and CSS Keywords for Resets
Colors and Units
Display Modes and Float Layouts
Multi-Column Layout
CSS Positioning: Relative, Absolute, Fixed, and Sticky
Flexbox Layout Essentials
CSS Grid Layout Essentials
Course Description
CSS Complete Tutorial is a free, hands-on course in Technology and Programming that takes you from the fundamentals of Cascading Style Sheets to modern layout techniques used in real web projects. You will learn how CSS works alongside HTML, how to apply styles effectively, and how to build clean, responsive page structures with confidence.
The course starts with core concepts such as how to write CSS in different ways, sizing behavior, and the box model, helping you understand how elements truly occupy space on a page. You will also gain practical clarity on selectors, grouping, pseudo classes and pseudo elements, along with key ideas like the cascade algorithm, specificity, and inheritance so you can resolve style conflicts predictably and write maintainable styles.
As you progress, you will explore color systems and transparency, common sizing units, and display behaviors that shape layout and flow. You will work through classic layout patterns using floats and multicolumn features, then move into positioning techniques including relative, absolute, fixed, and sticky behavior for building elements like persistent headers and footers.
Finally, the course focuses on the layouts used most in modern web development: Flexbox and CSS Grid. You will learn alignment, spacing, ordering, wrapping, and flexible sizing with Flexbox, then master grid structure, tracks, areas, implicit vs explicit grids, and precise item placement and alignment. By the end, you will be ready to style real interfaces with a solid understanding of both the rules and the tools that make CSS powerful.
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)?
