CSS
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
Flexbox
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.
Grid
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.