CSS Tutorial

Beginner to Advanced ⏱ 10 min read Updated: Jul 2026

CSS stands for Cascading Style Sheets
CSS is used to style and design web pages
CSS controls layout, colors, fonts, spacing, and animations
CSS works with HTML to build responsive websites
CSS makes websites visually attractive and user-friendly

What is CSS?

CSS (Cascading Style Sheets) is a language used to design and style HTML web pages. It controls the appearance of web page elements, such as colors, fonts, sizes, spacing, and layouts. CSS helps make websites more attractive and user-friendly. It can be used to change how a webpage looks on different devices like computers, tablets, and mobile phones.

Basic Example

Example


body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

Why Learn CSS?

Web Design

CSS helps you design beautiful websites with modern layouts.

Responsive Layout

CSS makes websites work on mobile, tablet, and desktop devices.

High Demand

Every website uses CSS, so it is a must-have skill for developers.

Animations

You can create animations and interactive UI effects using CSS.

Frameworks

CSS is used in Bootstrap, Tailwind CSS, and many modern frameworks.

CSS Syntax

selector { property: value; }

Example


p {
    color: red;
    font-size: 16px;
}

Types of CSS

Inline CSS

Applied directly inside HTML element using style attribute.

Internal CSS

Defined inside <style> tag in HTML head section.

External CSS

Written in a separate .css file and linked with HTML.

How CSS Works

🎨

Working Process: Browser reads HTML first, then applies CSS rules to style the elements and display the final UI.

CSS Page Structure

<html>

<head>

style.css linked

<body>

Styled Heading

Styled Paragraph

← Previous CSS Tutorial Next → What is CSS