CASCADING STYLE SHEETS

SARAH KALEEM ( 02 ) AMMARA HUSSAIN ( 25 )

Outline . . . .

What is CSS? Need of CSS. CSS Saves a Lot of Work. CSS Syntax Three ways to insert CSS CSS Variations
CSS 1 CSS 2 CSS 2.1 CSS 3
Grouping selectors CSS Image Opacity / Transparency Borders

Limitations Advantages

What is CSS?
CSS stands for Cascading Style Sheets . Styles define how to display HTML elements. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. Control in the specification of presentation characteristics.

Need of CSS

Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. World Wide Web Consortium (W3C) created CSS. In HTML 4.0 All browsers support CSS today.

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

Three ways to insert CSS

External style sheet

An external style sheet is ideal when the style is applied to many pages.

Internal style sheet

An internal style sheet should be used when a single document has a unique style.

Inline style
In inline styles we use the style attribute in the relevant tag.

CSS Variations

CSS 1:
First CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996.

Features:
Font properties such as typeface. Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes

CSS 2:
CSS level 2 specification was developed by the W3C and published as a Recommendation in May 1998. Features: A superset of CSS 1, CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements. Concept of media types. Support for aural style sheets Bidirectional text New font properties such as shadows.

CSS 2.1:

CSS level 2 revision 1, often referred to as "CSS 2.1", fixes errors in CSS 2, removes poorly-supported or not fully interoperable features and adds already-implemented browser extensions to the specification.

CSS 3:
CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2. CSS3 Modules:
CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.

CSS 3 Modules
Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

Grouping selectors
In style sheets there are often elements with the same style. h1 { color : green; } h2 { color : green; } p { color : green; } To minimize the code, you can use group selectors. Example: h1,h2,p { color : green; }

CSS Image Opacity / Transparency

Creating transparent images with CSS is easy. The CSS property for transparency is opacity. CSS opacity property is a part of the W3C CSS3 recommendation. Code: img { opacity:0.4; filter : alpha(opacity=40); /* For IE8 and earlier */

Cont
IE9, Firefox, Chrome, Opera, and Safari use the opacity property for transparency. The opacity property can take a value from 0.0 - 1.0. IE8 and earlier use filter : alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border without using a design program, like Photoshop. CSS3 Rounded Corners: Adding rounded corners in CSS2 was tricky. We had to use different images for each corner. In CSS3, the border-radius property is used to create rounded corners.

Code for rounded corners

div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ }

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes: Code: div { box-shadow: 10px 10px 5px #888888; }

Limitations

Poor controls for flexible layouts Vertical control limitations Lack of column declaration Separation of content from presentation Bandwidth Page reformatting Improve content accessibility . More flexibility. Enable multiple pages to share formatting. Reduce complexity . Reduce repetition in the structural

Advantages

Thank you