This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
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 control the appearance of many HTML pages.
can
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 tag within the 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 , 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 tags and it should be enclosed within the and 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 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
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 : <style>.tech{font-weight:bold;}
this uses the style rule
this doesn’t uses the rule
ID Selector: <style>#tech{font-weight:bold;}
this uses the style rule
this doesn’t uses the rule
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