Scribd
Upload
251 views

CSS Anshul

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of documents written in a markup language like HTML. CSS allows separation of document content from document presentation, enabling the same markup to be styled differently. CSS has evolved from CSS1 to CSS3, adding new features, and is rendered by major browsers although Internet Explorer remains the worst. CSS can be used to style entire websites and make them accessible. There are three types of CSS - external, embedded, and inline style sheets. CSS enables grouping of styles and uses class and ID selectors. Limitations include inability to ascend parents and lack of expressions.

Uploaded by

api-3706009
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
251 views

CSS Anshul

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of documents written in a markup language like HTML. CSS allows separation of document content from document presentation, enabling the same markup to be styled differently. CSS has evolved from CSS1 to CSS3, adding new features, and is rendered by major browsers although Internet Explorer remains the worst. CSS can be used to style entire websites and make them accessible. There are three types of CSS - external, embedded, and inline style sheets. CSS enables grouping of styles and uses class and ID selectors. Limitations include inability to ascend parents and lack of expressions.

Uploaded by

api-3706009
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 14

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

You might also like