Back to Languages

Css Tutorial

Learn Css interactively. Read the concept and write code to practice.

1. CSS Introduction

CSS (Cascading Style Sheets) is used to style and layout web pages. While HTML p...

2. CSS Selectors

Selectors define which HTML elements to style. There are many types: **Element ...

3. CSS Colors

CSS supports multiple ways to specify colors: **Named colors**: `red`, `blue`, ...

4. CSS Box Model

Every HTML element is a rectangular box. The CSS Box Model describes the space a...

5. CSS Text & Fonts

CSS gives you full control over text appearance. **Text properties:** - `color`...

6. CSS Backgrounds

CSS offers powerful background styling options: - `background-color` — Solid co...

7. CSS Borders & Border-Radius

Borders add visual boundaries around elements. **Border properties:** - `border...

8. CSS Display & Visibility

The `display` property controls how an element is rendered. **Common display va...

9. CSS Flexbox

Flexbox is a powerful layout system for arranging items in one direction (row or...

10. CSS Grid

CSS Grid is a two-dimensional layout system — it handles both rows AND columns s...

11. CSS Positioning

The `position` property controls how an element is placed on the page. - **stat...

12. CSS Transitions & Hover Effects

CSS transitions create smooth animations when property values change (e.g., on h...

13. CSS Animations

CSS Animations let you create complex, multi-step animations using `@keyframes`....

14. CSS Variables (Custom Properties)

CSS Variables (Custom Properties) let you store values and reuse them throughout...

15. CSS Project: Landing Page

Let's combine everything to build a modern landing page! This project uses: - CS...