 Menu  Log in

Dark mode

Dark code
  HTML CSS   

CSS Introduction
❮ Previous Next ❯

CSS is the language we use to style a Web page.

What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

CSS Demo - One HTML Page - Multiple Styles!

Here we will show one HTML page displayed with four different stylesheets. Click on the
"Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different styles:
 Welcome to My Homepage
Use the menu to select different Stylesheets

Stylesheet 1

Stylesheet 2 Same Page Different

Stylesheets
Stylesheet 3
This is a demonstration of how different stylesheets
Stylesheet 4
can change the layout of your HTML page. You can
No Stylesheet change the layout of this page by selecting different
stylesheets in the menu, or by selecting one of the
following links:

Stylesheet1,
Stylesheet2,
Stylesheet3,
Stylesheet4.

No Styles

This page uses DIV elements to group different

sections of the HTML page. Click here to see how
the page looks like with no stylesheet:

No Stylesheet.

Side-Bar

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
i bl dit tl t t il d l it d i d l t f it ll f ili i

ADVERTISEMENT
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Example

body
{

  background-color: lightblue;

h1
{

  color: white;

  text-align: center;

p
{

 
font-family: verdana;

  font-size: 20px;

Try it Yourself »

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information
were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

If you don't know what HTML is, we suggest that you read our HTML Tutorial.

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one
file!

❮ Previous Next ❯

ADVERTISEMENT

NEW

We just launched

W3Schools videos
 Explore now

COLOR PICKER






Get certified

by completing

a CSS

course today!

school
w3 s 2
CE

02

TI 2
R

FI .
ED

Get started

CODE GAME

Play Game

ADVERTISEMENT
 Report Error

Spaces

Upgrade

Newsletter

Get Certified

Top Tutorials
HTML Tutorial

CSS Tutorial

JavaScript Tutorial

How To Tutorial

SQL Tutorial

Python Tutorial

W3.CSS Tutorial

Bootstrap Tutorial

PHP Tutorial

Java Tutorial

C++ Tutorial

jQuery Tutorial

Top References
HTML Reference

CSS Reference

JavaScript Reference

SQL Reference

Python Reference

W3.CSS Reference

Bootstrap Reference

PHP Reference

HTML Colors

 Java Reference
Angular Reference
jQuery Reference

Top Examples
HTML Examples

CSS Examples

JavaScript Examples

How To Examples

SQL Examples

Python Examples

W3.CSS Examples

Bootstrap Examples

PHP Examples

Java Examples

XML Examples

jQuery Examples

Get Certified
HTML Certificate

CSS Certificate

JavaScript Certificate

Front End Certificate

SQL Certificate

Python Certificate

PHP Certificate

jQuery Certificate

Java Certificate

C++ Certificate

C# Certificate

XML Certificate

FORUM |
ABOUT

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials,
references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.