Css: Introduction to Cascading Style Sheets

:Introduction to Cascading Style Sheets
 CSS (Cascading Style Sheets) offer a way of keeping content and design elements separate.  This separation allows us to include more meaningful content on each page

12/2/2010

University of the Punjab

1

Introduction to Cascading Style Sheets
 Briefly, the main advantages for any business that embraces CSS:  Ease of Maintenance  More Search Engine Visibility  Accessibility  Uniformity

12/2/2010

University of the Punjab

2

What is CSS?
CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets External Style Sheets can save you a lot of work  External Style Sheets are stored in CSS files    

12/2/2010

University of the Punjab

3

Why We Use CSS?
Some of the reasons I feel that learning CSS for layout is important are:  It's the standard  Style Sheets Can Save a Lot of Work  layouts load more quickly than table layouts.  layouts are more accessible.  is more flexible  provides better SEO.
12/2/2010 University of the Punjab 4

Cascading Order
1. Browser default 2. External style sheet 3. Internal style sheet (inside the tag) 4. Inline style (inside an HTML element) Note: where number four has the highest priority: inside an HTML element has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value).
12/2/2010 University of the Punjab 5

Syntax selector { property: value }
 The CSS syntax is made up of three parts: a selector, a property and a value:  The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces: Example: body {color: black}
12/2/2010 University of the Punjab 6

Syntax selector { property: value }
 Note: If the value