Module 1: Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used for describing the look and formatting of a document written in HTML or XML. CSS is used to style web pages and interfaces written in HTML and XHTML, and can also be applied to any kind of XML document.

How to use CSS

There are three ways to insert CSS: Inline - by using the 'style' attribute inside HTML elements. Internal - by using a '<style>' element in the '<head>' section. External - by using a '<link>' element to link to an external CSS file.

Module 2: CSS Selectors

What are CSS Selectors?

Selectors are the part of CSS ruleset. CSS selectors select HTML elements according to its id, class, type, attribute etc.

Types of CSS Selectors

There are several different types of selectors in CSS including: Element Selector, ID Selector, Class Selector, Attribute Selector, Pseudo-class Selector, Pseudo-elements Selector, and Combinator Selector.

Module 3: CSS Properties

Common CSS Properties

CSS properties are used to apply styles to structured documents. Some common CSS properties include: 'color', 'background-color', 'font-family', 'font-size', 'border', 'margin', 'padding', 'display', 'width', 'height', etc.

CSS Box Model

The CSS Box Model is a rectangular layout paradigm for HTML elements that consists of the 'content', 'padding', 'border', and 'margin'.

Module 4: CSS Layout - Flexbox and Grid


CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C's candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.


CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.