Cascading Style Sheet

By: Vijayta Vinayak Solutions

CSS Introduction
C ascading S tyle S heet is a feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page.
The term cascading derives from the fact that multiple style sheets can be applied to the same Web page.
Vinayak Solutions

Use of Style Sheets
separate structure from appearance
create consistent appearance
ease of maintenance
increase accessibility
apply additional effects
reduce use of non-standard tags
reduce web page file size
Vinayak Solutions

Consistent Appearance & Ease of Maintenance
Create one style sheet
Use link tag to use for several web pages
Make changes in one file
Vinayak Solutions

Increase Accessibility
User can override your style sheet
You can create different style sheets for alternative devices
Vinayak Solutions

Apply Additional Effects
Add hover effect to links
Remove underlines on links
Add horizontal rule to headings
Use instead of a table for a border
Control paragraph, line, letter spacing
Use instead of tables for layout
Vinayak Solutions

Additional effects
h1 { font-size: 2em; vertical-align: text-bottom; line-height: 1.25em; margin-right: 5%; font-family: "Arial Black", Verdana, sans-serif; letter-spacing: 0.5em; color: blue; background-color: silver}
h2 { border-style: solid none none none; border-width: medium; border-color: #808080; margin-top: 1.5em; margin-bottom: .5em; font-size: 1.75em; text-transform: capitalize; }
ul { margin-top: .1em; list-style: square}
li { margin-bottom: .25em;}
a { text-decoration: none; }
a:hover { text-decoration: underline; color: #800000; background-color: #ffcc00;}
Vinayak Solutions

Replace Non-standard Tags
Some tags and attributes have been deprecated in HTML 4.0 Strict
<font face=arial color=red size=+2> <basefont …>
<center>
<h1 align=center>
<td valign=top height=45 >
<ul type=square>
Vinayak Solutions

Reduce Web Page File Size
Every keystroke counts!
Smaller files load more quickly
Save disk space
Vinayak Solutions

Keep it in mind when using CSS
Older browsers either dont understand it, or understand it badly (incompatibilities)
In some instances current browsers sometimes interpret the style differently thus resulting in different results.
Vinayak Solutions

Type of CSS
Inline stylesheet
<H1 style= " color: maroon " >
Embedded stylesheet
<style> </style>
External stylesheet
<link href="style.css " >
Vinayak Solutions

Inline Stylesheet
<H1 style= " color: maroon " >
Similar to adding attributes to html tags
Disadvantages
decreased accessibility
increased file size
harder to update
Vinayak Solutions

Embedded style sheets
<style>  </style>
Put rules between style tags
Put in head section
Add html comment tags
Use when single document has unique style
Vinayak Solutions

External style sheets
<link rel="stylesheet" type="text/css" href= " style.css" >
Save rules in external file
Advantages
ease of maintenance
use less disk space
increase accessibility
Vinayak Solutions

Rules
A Cascading Style Sheets rule is made up of a selector and a declaration.
H2 {color: blue;}
selector {declaration;}
Vinayak Solutions

Declaration
The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be.
For example, "color: blue".
Vinayak Solutions

CSS selectors
Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.
Type selectors
Class selectors
ID selectors
Vinayak Solutions

Type selectors
The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree. For example:
h1 {color: blue; font-size:16;}
p {color: green; font-size:12;}
Vinayak Solutions

Class selectors
While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree.
For example, if you want to target the first paragraph and first list items on a page to make them stand out, you could mark up the page in the following way:
Vinayak Solutions

<body> <p class="big">This is some <em>text</em></p> <p>This is some text</p> <ul> <li class="big">List item</li> <li>List item</li> <li>List <em>item</em></li> </ul> </body>
Vinayak Solutions

ID selectors
The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree. For example:
h1 {color: blue; }
p {font-family-arial; text-
align: justify; }
Vinayak Solutions

Browser Support
Older (before CSS): NN3, Lynx
Broken: IE3, IE4, NN4
Compliant:
Mozilla and Netscape 6
Opera 5 and 6
recent versions of Internet Explorer
Vinayak Solutions

CSS and Accessibility
Use good HTML: <h1> instead of <div style= " font-size: big; font-weight: bold;">
Make sure page is readable without any style sheet enabled
Vinayak Solutions

Vinayak Solutions

http://moodle.apc.edu.ph	2662
http://10.106.1.60	7
http://vijaytapanchal.com	4
http://www.slideshare.net	1

Cascading Style Sheet

by vijayta on Oct 25, 2007

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 2,674

Statistics

Cascading Style Sheet Presentation Transcript