Welcome to the CSS tutorial! Cascading Style Sheets (CSS) is essential for styling web pages and making them visually appealing. Let's dive into the basics and explore how to master CSS.

📌 What is CSS?

CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls layout, colors, fonts, and other visual aspects.

CSS Overview

✅ Basic Syntax

CSS uses selectors to target HTML elements and applies rules to style them.

  • Selector: h1, .header, #main
  • Declaration: color: red; font-size: 16px;

Example:

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

📁 Layout Techniques

CSS offers powerful layout tools like Flexbox and Grid.

  • Flexbox: For responsive one-dimensional layouts
  • Grid: For complex two-dimensional layouts

Try this Flexbox example:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
Flexbox Layout

🎨 Styling Properties

Use properties to customize appearance:

  • color / background-color
  • padding / margin
  • border / box-shadow

The box model is fundamental to understanding spacing and sizing:

.box {
  width: 200px;
  padding: 10px;
  border: 2px solid #333;
  margin: 20px;
}
Box Model

📘 Resources

Want to deepen your CSS knowledge?

Stay curious and keep coding! 🌟