Cascading Style Sheets

Cascading Style Sheets is a mechanism for controlling the presentation of Web pages.

With this new technology the web experience will be opened to visual browsers,aural devices,printers,braille devices and more.

CSS an Evolving Standard:

The web has come a long way in offering new features to designers that give them more control over web pages.W3C working group brought the control over web pages using cascading style sheets.

CSS-I:

Cascading Style Sheet-I was introduced alongwith HTML4.0.Many of the CSS-I attributes accomplished the same results that a simple HTML tag could do,but CSS-I offered much more in a consistent and powerful method that wasn't tied to each single page.

The advantages of stylesheets was that they could be referenced and controlled by means of scripting.

The CSS-I attribute for formatting control over items such as:

Fonts

Text Style,Size and Weight
Text Color and Background
Text spacing and Alignment
Margins and Padding
Borders
Bounding box controls
List elements style

CSS-P:

CSS-P was introduced in addition to CSS-I primarily for positioning the web page elements in exact positions on the page.This small set of extensions only included a few tags but accomplished a lot.

CSS-II-Designer's Precise Tool:

CSS-II is an advanced designing tool which has not yet been implemented in any of the major browsers.

New Features:

Core Styles
Media Types
Aural Style Sheets
Downloadable Fonts
Table Formatting
Fixed Positioning
Automatic Numbering
Text Shadows
Cursor Control

Style Sheets Types:

The designers can control an entire site using linked stylesheets,control a single page using embedded stylesheet and control a single tag element using inline stylesheet.Each tag doesn't need to have its style defined because it inherited from its parent.

Linked Stylesheet:

Linked Stylesheets exists as separate files that are linked to a page with the <link> tag.They have the css. extension and are referenced with an URL.Inside the CSS file the style attributes are contained within opening and closing <style> tags.

The page that needs this styles is linked by placing a single <link> tag within the <head> tags.The attributes within the <link> tag include :rel attribute,set to stylesheet;and href attribute,whose value is the URL to the CSS file and a type attribute.

The syntax is shown below:
<link rel=stylesheet href="text.css" type="text/css">

Embedded Stylesheet:

Embedded Stylesheet are placed within the HTML code of the page they are to be applied to.The syntax comes between opening and closing <style> tags.
Drawback of this is that they aren't hidden from browsers that don't support stylesheet unless they are closed within command tags like the following:

<style>

</style>

Inline Stylesheet:

Inline Stylesheets provide the finest level of control.Included in the core attributes for most tags is a style attribute.This attribute can accept the stylesheet keywords as a way to control the style of the tag contents.

The syntax look like:
<span style ="font-size:14pt; color: red">

Stylesheet Precedence:

The level of priority is established by how close the style definition is to the tag.For this order, linked stylesheets are lower than embedded stylesheets,which are lower than inline stylesheets.
If you accidentally include the same property in a linked stylesheet as an inline style then the priority goes to the definition closest to the tag which would be the inline style.

Classes:

One way of defining which tags get a stylesheet definition is by using classes.Stylesheets classes are defined by placing a period before a unique name.

This can come after a tag or by itself as in the following examples:
h1.myclass{color:blue}
.myclass{color:red}
The class should be mentioned as follows:
<h1 class=myclass>Text </h1>
<p class=myclass>Text </p>

Font control:

CSS-II has made improvements specially for fonts that make sytlesheets more powerful.

Font-family property:

This property tells the tag its fonts to use.The requested font needs to be on the user's computer for the font to be displayed correctly.

The syntax is :
body{font-family:arial,verdana,courier}

Font-style,Font-variant and Font-weight property:

The font-style property can accept normal,italic,oblique and inherit as values.
The font-variant property can accept normal,small-caps and inherit as values.
The font-weight property can accept normal,bold,bolder,lighter,inherit and numbers 100 through 900 as values.

The syntax is:
p{font-style:italic;font-weight:bold;font-variant:small-caps}

Text-control:

This gives design related to whole text content.
Here is an illustration to show all the text control properties such as text-indent,text-align,vertical-align,line-height,text-decoration,text-shadow,text-shadow,text-transform,letter-spacing and word-spacing properties:

p { text-indent:2.5em;text-align:center;vertical-align:middle;line-height:1.5em;text-decoration:overline;
text-shadow:red 3px 4px 5px;text-transform:uppercase;
letter-spacing:0.1em;word-spacing:1.5em}
Just look out for this transformation:

This is really a wonder to watch.

Color and Background:

What is a thing without colors,we want everything to be colorful with a pleasant background this is exactly what we can do using the above style property.The color and background properties let you specify text-color,the color or image behing your text and how the background is positioned.

Now just try out this for yourself and see the difference:
p{color:red;background-color:white;background-repeat:norepeat;background-attachment:fixed;background-position:3cm,3cm}
Get ready for this:

Nothing tastes better than Nescafe.

This example explains the importance of stylesheet:

Welcome to this Wonderland!!!

Disneyland is the place where everyone loves to visit once in their lifetime.

Positioning:

In web page the positioning of every details speaks its value,hence using CSS the required positioning of elements can be done in the best possible way.

Top of this page

Table