CSS Introduction
CSS is the language we use to style an HTML document.
CSS
describes how HTML elements should be displayed.
This
tutorial will teach you CSS from basic to advanced.
Examples in Each Chapter
This CSS tutorial contains
hundreds of CSS examples.
With our online editor, you
can edit the CSS, and click on a button to view the result.
CSS Example
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
Click on the "Try it
Yourself" button to see how it works.
CSS Introduction
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:
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;
}
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.
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!
