Back to Modules

CSS Tutorial

Master CSS styling with our comprehensive tutorial. Learn modern layout techniques and responsive design principles through practical examples.

Video Tutorial

Introduction to CSS

CSS (Cascading Style Sheets) is the language used to style and layout web pages, controlling the visual appearance of HTML elements.

Examples:

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  color: #333333;
}

Basic CSS styling for the body element

CSS Selectors

CSS selectors define which elements to style. They range from simple element selectors to complex combinators and pseudo-classes.

Examples:

.class-name {
  color: blue;
}

#unique-id {
  border: 1px solid black;
}

div > p {
  margin: 10px;
}

Class selector, ID selector, and Child combinator examples

Flexbox Layout

Flexbox is a powerful layout model that makes it easier to design flexible responsive layouts without using floats or positioning.

Examples:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.item {
  flex: 1;
  padding: 20px;
}

Basic flexbox container and item setup