Introduction to Cascading Style Sheets

by Yukong Zhang

Introduction

When you create a web page, you need to decide what to write on (contents) and what it would look like (styles). For a simple web page, we normallly mix both contents and styles together in a single page. However, a typical website consists of hundreds or thousands of web pages. It is desirable to make the web pages look consistently (similar styles). The "mix" approach would be a nightmare for web developers if the website needs to change its "look" regularly. A better approach is to separate styles from contents. Define styles in a separate file and apply it to multiple web pages.

• The file containing styles is called Cascading Style Sheets (CSS)
• Create a separate file with file extension .css
• Add style link tag in the head section of html pages

Syntax of style sheets

1. Selector
2. A pair of curly braces
3. Style name:value;

body
{
   background-color:lightblue;
   font-family:Arial;
}

The best way to learn CSS is to test out and to see web pages look like with different styles.
Best reference: www.w3schools.com

Example