Css: Introduction to Cascading Style Sheets

Only available on StudyMode
  • Topic: Cascading Style Sheets, HTML, HTML element
  • Pages : 46 (6537 words )
  • Download(s) : 312
  • Published : March 22, 2011
Open Document
Text Preview
: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 is multiple words, put quotes around the value:  p {font-family: "sans serif"}

12/2/2010

University of the Punjab

7

More than One Property/Value
 If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

 p {text-align:center;color:red}

12/2/2010

University of the Punjab

8

More than One Property/Value
 To make the style definitions more readable, you can describe one property on each line, like this: p { text-align: center; color: black; font-family: arial } 12/2/2010 University of the Punjab 9

Grouping
 You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 { color: green } 12/2/2010 University of the Punjab 10

The class Selector
 With the class selector you can define different styles for the same type of HTML element.  Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: 12/2/2010 University of the Punjab 11

The class Selector
 p.right {text-align: right}  p.center {text-align: center}  You have to use the class attribute in your HTML document:  This paragraph will be right-aligned.  This paragraph will be center-aligned.

12/2/2010

University of the Punjab

12

The class Selector
 To apply more than one class per given element, the syntax is:  This is a paragraph center aligned and bold  Note: The paragraph above will be styled by the class "center" AND the class "bold".

12/2/2010

University of the Punjab

13

The class Selector
 You can omit the tag name in the selector to define a style that will be used by HTML elements that have a certain class. In the example below, HTML...
tracking img