CSS Introduction

CSS stands for Cascading Style Sheets. It is a language used to describe how HTML elements should look on a web page. While HTML builds the structure of a page (like headings, paragraphs, and images), CSS handles the visual appearance — such as colors, fonts, spacing, and layout.

Think of HTML as the skeleton of a house and CSS as the paint, wallpaper, and furniture that makes it look beautiful.

Why CSS is Important

Before CSS existed, all styling had to be written directly inside each HTML element. This made code messy and very hard to manage. CSS solves this problem by separating the design from the content. A single CSS file can control the appearance of hundreds of web pages at once.

Key benefits of using CSS:

It keeps HTML code clean and easy to read.
One CSS file can style an entire website — changing one line updates every page.
It gives full control over layout, spacing, fonts, colors, animations, and more.
It helps make websites responsive, meaning they adapt to different screen sizes like phones and tablets.

How CSS Works with HTML

CSS works by targeting HTML elements and applying style rules to them. A CSS rule tells the browser: "Find this element and apply these visual styles to it."

For example, if there is a paragraph tag <p> in HTML, CSS can make all paragraphs display in blue color and use a larger font size — without touching the HTML file at all.

Versions of CSS

CSS has gone through several versions over the years:

CSS1 – Released in 1996. It covered basic styling like fonts and colors.
CSS2 – Released in 1998. It added support for positioning and media types.
CSS3 – The current version, released in stages from 1999 onward. It introduced advanced features like animations, gradients, flexbox, grid layout, and media queries.

Today, CSS3 is the standard used across all modern browsers and websites.

Where CSS is Written

CSS can be written in three different places:

Inline – Written directly inside an HTML element using the style attribute.
Internal – Written inside a <style> tag within the HTML file's <head> section.
External – Written in a separate .css file and linked to the HTML file.

Each method is explained in detail in the upcoming topic "How to Add CSS".

A Simple CSS Example

Below is a basic example showing how CSS changes the appearance of an HTML heading:

HTML (without CSS)

<h1>Welcome to My Website</h1>

This heading appears in the browser with default black color and default font size.

HTML + CSS (with styling)

<h1 style="color: blue; font-size: 36px;">Welcome to My Website</h1>

Now the heading appears in blue color with a larger font size. CSS made this change possible.

What Can CSS Style?

CSS can control almost every visual aspect of a web page:

Text color, size, style, and alignment
Background colors and images
Borders around elements
Spacing inside and outside elements (padding and margin)
Element width and height
Page layout and positioning of elements
Hover effects and animations
Responsive design for different screen sizes

Summary

CSS is the styling language of the web. It works alongside HTML to control how content looks and is arranged on a page. Learning CSS is essential for anyone who wants to build web pages that are visually attractive and user-friendly. The following topics in this course will cover each CSS concept step by step, starting from the basics.

Back to courses

Next lessons