Slide 7.1: CSS (Cascading Style Sheets)

CSS (Cascading Style Sheet)

What Is CSS?

Styles define how to display HTML elements.
Styles were added to HTML 4.0 to solve a problem.

Styles were added to HTML 4.0 to solve a problem.
External Style Sheets can save you a lot of work.
External Style Sheets are stored in CSS files.
Multiple style definitions will cascade into one.

A CSS Example


<html> <frameset cols="130,*" frameborder="1"> <frame name="contents" src="http://undcemcs01.und.edu/~wen.chen.hu/course/101/8/demo/style_content.html" noresize="noresize" /> <frame name="main" src="http://undcemcs01.und.edu/~wen.chen.hu/course/101/8/demo/style_main1.html" /> </frameset> </html>

Styles Solved a Big Problem.
HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, 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 web sites became a long and expensive process. To solve this problem, the W3C created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

CSS Saves a Lot of Work!
CSS defines how HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all pages in a web site, just by editing one single file!

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <title>HTML Working Area</title> <style type="text/css"> span.highlight { color: white; background-color: #3366CC } </style> </head> <body bgcolor="#EDF3FE"> <p> <span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span> </p> </body> </html>

Review: CSS (Cascading Style Sheet)

Result: