CSS Introduction

What is CSS?

  • CSS refers to Cascading Style Sheets* (Cascading Style Ssheets)
  • CSS describesHow HTML elements are displayed on the screen, paper, or other media
  • CSS saved a lot of work. It can control the layout of multiple web pages at the same time
  • External style sheets are stored in CSS file中

*:Also known as Cascading Style Sheets.

CSS Demonstration - One HTML Page - Multiple Styles!

Below is an HTML page that provides four different style sheets. Click on the following style sheet links to view different styles:

Why use CSS?

CSS is used to define the styles of web pages, including design and layout 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 include tags for formatting web pages!

The purpose of creating HTML is toDescribe the webpageFor example:

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

After adding tags like <font> and color attributes to the HTML 3.2 specification, the nightmare of web developers began. The development of large websites added font and color information to each page, which evolved into a long and expensive process.

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

CSS removed the style formatting from HTML pages!

If you don't know what HTML is, it is recommended that you read HTML Tutorial.

CSS saves a lot of work!

Style definitions are usually stored in an external .css file.

By using an external stylesheet file, you can change the appearance of the entire website by changing just one file!