CSS Anshul

Cascading Style Sheets
By:
R.Balaji (060341005)
Anshul Paul (060341008)
Contents
1. Introduction.
1.1 Definition : Style Sheet
1.2 Definition : Cascading Style Sheet
5. Evolution of CSS.
2.1 CSS1 Vs CSS2 Vs CSS3.
2.2 Adaptability.
8. Uses and Types of CSS

3.1 Uses of CSS.
3.2 Types of CSS.
3.2.1 External Style Sheet.
3.2.2 Embedded Style Sheet.
3.2.3 Inline Style Sheet.
4. Limitations of CSS.
Introduction
 Style Sheet:
A Style Sheet is a single page of formatting instructions that can
control the appearance of many HTML pages.
A style sheet can be used to define How your document is displayed by

the Browser.
 Cascading Style sheets:
In computing, Cascading Style Sheets (CSS) is a style sheet language

used to describe the presentation of a document written in a markup
language. Its most common application is to style web pages written in
HTML and XHTML, XML document.
Evolution of CSS
Version Overview of features
CSS1 Text handling, including fonts, sizing, styles, and spacing. Back
ground and colors, margins, border and padding control of
objects , lists styles.
CSS2 Printing specific features, aural render up, downloadable fonts,

positioned elements, table support, support for CSS with XML,
some interface control, limited behaviors such as hover effects
on links.
CSS3 Support for vertical running text , multicolumn layout facilities,
Increased support for associating behaviors and styles,
integration with graphics, color and font technologies.
Adaptability of CSS
Current Web Browsers like :
 Mozilla's Gecko.
 Opera's Presto layout engine.
 Apple's Safari and KDE's Konqueror.
 Internet Explorer 6.0.
*** As of 2006, Internet Explorer remains the worst at

rendering CSS as judged by World Wide Web
Consortium
Uses/Advantages of CSS
Advantages and uses of CSS:
 Enables the separation of document content from document presentation,

which in-turn improves :
content accessibility
provide more flexibility
reduce complexity and repetition in the structural content.
 CSS can also allow the same markup page to be presented in different styles
for different rendering methods, such as on-screen, in print, by voice.
 Presentation information for an entire website or collection of pages can be

held in one place, and can be updated quickly and easily.
 Different users can have different style sheets for example a large text
alternative for visually-impaired users, or a layout optimized for small displays
for mobile phones.
 The document code is reduced in size and complexity, since it does not need
to contain any presentational markup.
Types of CSS
CSS types can be classified as :
 External Style Sheet :

Link to an outside style sheet or it can be imported.
 Embedded Style Sheet :

Embed a document – wide style in the head of an HTML document.
 Inline Style Sheet :

Apply inline style to specific elements.
External Style Sheet
 An External Style Sheet is a plain text file containing file specifications for HTML tags
or classes, saved with the extension “.css”.
 The HTML file that uses this style sheet file could reference it by using the <Link> tag
within the <Head> element of the document.
 Style Sheets can be linked from any location.
Tip :
1. Always keep your style sheet in a central directory. (referenced using URL)
2. External style sheets are best approaches to use style sheets.(designer friendly and
bandwidth friendly)
Note:
Similarly like <LINK>, we can use @import to direct the web browser to load an
external style sheet. (@import should be placed within <STYLE>)
***Refer sample code***

Embedded Style Sheet
 In embedded style sheets, the style rules has to be placed between the
<STYLE> and</STYLE> tags and it should be enclosed within the <HEAD>
and </HEAD> tags of HTML document.
 It is always recommended to use TYPE attribute to indicate which format of

style sheets are used (because multiple forms of style sheets can be used ).
 It is possible to have multiple occurrences of the <STYLE> tag within the

<HEAD> of HTML document.
***refer Sample code***

Inline Style Sheet
 The style information can be added to individual HTML elements using the
style attribute, which is available for several HTML elements.
***Refer sample code***

Grouping
If we want to apply the same style to multiple elements and also to apply more
than one style to an element or group of element…… a concept called
Grouping is used
 Grouping multiple style :

 Style 1: H1,H2,H3{color: purple;}
 Style 2: H2, H3{background: green;}
 Style 3: H1{background: white;}
Class and ID Selectors
This is the common way to apply styles with out worring about the elements
involved in the document
Class and ID Selectors continued….
Example :
Class selector :
<html>
<head><style>.tech{font-weight:bold;}</style>
<body>
<P class=“tech”>this uses the style rule</p>
<p>this doesn’t uses the rule</p>
</body></html>
ID Selector:
<html>
<head><style>#tech{font-weight:bold;}</style>
<body>
<P class=“tech”>this uses the style rule</p>
<p>this doesn’t uses the rule</p>
</body></html>
Limitations of CSS
 Selectors are unable to ascend
 CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria
 One block declaration cannot explicitly inherit from another
 Vertical control limitations
 Absence of expressions

Lack of multiple backgrounds per element

CSS Anshul

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Anshul

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

8. Uses and Types of CSS

A style sheet can be used to define How your document is displayed by

 Cascading Style sheets:

In computing, Cascading Style Sheets (CSS) is a style sheet language

Version Overview of features

CSS2 Printing specific features, aural render up, downloadable fonts,

Current Web Browsers like :

*** As of 2006, Internet Explorer remains the worst at

Advantages and uses of CSS:

 Enables the separation of document content from document presentation,

 Presentation information for an entire website or collection of pages can be

CSS types can be classified as :

 External Style Sheet :

 Embedded Style Sheet :

 Inline Style Sheet :

***Refer sample code***

 It is always recommended to use TYPE attribute to indicate which format of

 It is possible to have multiple occurrences of the <STYLE> tag within the

***refer Sample code***

***Refer sample code***

 Grouping multiple style :

Class and ID Selectors

 Vertical control limitations

You might also like

Refer sample code

refer Sample code

Refer sample code