You are on page 1of 1

Dark code

  HTML   
 Menu  Log in

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:

your HTML page. You can 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 qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.

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

Pro

Buy Certificate

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.

You might also like