This document provides an introduction to Cascading Style Sheets (CSS) and explains how they enhance web design by allowing developers to separate content from appearance. It describes different types of stylesheets (inline, embedded, and external) and outlines advantages such as consistency, ease of maintenance, and increased accessibility. Additionally, it covers CSS selectors and their importance in targeting HTML elements for styling.

2. CSS Introduction
Cascading Style Sheet 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.

3. Use of StyleSheets
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

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

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

6. Increase Accessibility
User can override your style sheet
You can create different style sheets for
alternative devices

7. 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

8. 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;}

9. 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>

10. Reduce Web PageFile Size
Every keystroke counts!
Smaller files load more quickly
Save disk space

11. Keep it in mind when usingCSS
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.

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

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

14. Embedded stylesheets
<style>
<!--
h1 {font-family: arial, sans-serif;}
-->
</style>
 Put rules between style tags
 Put in head section
 Add html comment tags
 Use when single document has unique style

15. 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

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

17. 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".

18. 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

19. Typeselectors
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;}

20. 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:

21. <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>

22. 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; }

23. 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

24. CSS andAccessibility
Use good HTML: <h1> insteadof
<div style="font-size: big; font-weight: bold;">
Make sure page is readable
without any style sheet enabled