Cascading Style Sheets [c.s.s]

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the

layout, colors, and fonts

SYNTAX:CSS has a simple syntax and uses a number of English

keywords to specify the names of various style properties.A style sheet consists of a list of rules. Each rule or rule-set

consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;)

selector [, selector2, ...][:pseudo-class] { property: value; [property2: value2; ...]}/* comment */

USE:Prior to CSS, nearly all of the presentational

attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.

SOURCES:

One of the goals of CSS is also to allow users a greater degree of control over presentation; those who find the red italic headings difficult to read may apply other style sheets to the document. Depending on their browser and the web site, a user may choose from various style sheets provided by the designers, may remove all added style and view the site using his or her browser's default styling or may perhaps override just the red italic heading style without

altering other attributes.

h1 { color: white; background-color: orange !important; }

h2 { color: white; background-color: green !important; }

where possible values for [media type] include the following:

Value Suitable Forall All devices.aural Speech synthesizers.braille Braille tactile feedback devices.handheld handheld devices.print material to be printed.projection Projected presentations.screen Computer screens.tv TV-type device

Advantages:

*Flexibility

*Separation of Content from Presentation

*Site-wide consistency

*Bandwidth

*Page reformatting

Limitations:

*Poor layout controls for flexible layouts *Selectors are unable to ascen*Vertical control limitations *Absence of expressions *Lack of orthogonality*Control of element shapes *Lack of column declaration *Cannot explicitly declare new scope

independently of position *Pseudo-class dynamic behavior not

controllable*Inconsistent browser support

Color property:The color property allows webmasters to define the color of an element

in a CSS stylesheet.

This property takes values in 3 forms:# Hexadecimal code# RGB# Color nameThe general syntax for the color property is as follows:

Hexadecimal code:{color:#XXXXXX;} -where X is a hexadecimal code.

RGB:{color:rgb(X,Y,Z); } where X, Y, and Z are numbers between 0 and 255 OR

Color name:{color:[color_name];}

Text-decoration

p {text-decoration:underline;} -for underlining

p {text-decoration:underline;} -for underline

p {text-decoration:line-through;}-line through

text-align

p {text-align:left;} -This sentence illustrates what it looks like to be left-justified.

p {text-align:right;} -This sentence illustrates what it looks like to be right-justified.

p {text-align:center;} -This sentence illustrates what it looks like to be centered.

p {text-align:justify;} -This sentence illustrates what it looks like to be fully-justified.

text-transform

p {text-transform:capitalize;} -this is a LAWYER

p {text-transform:uppercase;} -this is a LAWYER

p {text-transform:lowercase;} -this is a LAWYER

word-spacing

The word-spacing property controls the amount of space between words. For example, with a CSS declaration of,

p {word-spacing:5px;}

The following HTML,

<p>Words here are separated by 5px.</p>

renders

Words here are separated by 5px.

Float propertyOne of the commonly-seen layout, especially in large websites displaying ads, is

wrapping the text around an advertising block. This is accomplished using the float property.

The float property has three possible values: 'left', 'right', and 'none'. Let's take a look at the following examples:

#leftfloat { float:left;}

The following html:<span id="leftfloat"><img src="yp.jpg"></span>This example illustrates how float:left

affects the appearance of a block. Notice how the image "floats" to the left

This example illustrates how float:left affects the appearance of a block. Notice how the image "floats" to the left.

Making table

In HTML code, you will commonly see the table tag followed by border, cellpadding, and cellspacing attributes. This would be unnecessary if we use CSS.

The table, th, tr, and td selectors can use many of the properties we have defined previously in this tutorial such as, but not limited to, those for text, font, border, color, and background.

Let us create an example,

table { border: 0; font-family: arial; font-size:14px;}th { background-color:yellow;}td { border-bottom:1 solid #000000;}.fail { color:#FF0000;}

Style sheet codes

Following html codes:<table> <tr> <th>Student Name</th> <th>Score</th> </tr> <tr> <td>Stella</td> <td>85</td> </tr> <tr> <td>Sophie</td> <td>95</td> </tr> <tr> <td>Alice</td> <td class="fail">55</td> </tr></table>

Student Name ScoreStella 85Sophie 95

Alice 55

would render the following:

Links :

The default style for a link is blue font with an underline. This is, however, not always ideal. There are times when we want links to have a different style. This can be achieved using the following selectors:

a:link: Specifies how the link looks if the page it links to has not yet been visited.

a:visited: Specifies how the link looks if the page it links to has already been visited.

a:hover: Specifies how the link looks like when the user mouses over the link.

a:active: Specifies how the link looks like when the user clicks on it.

Let's take a look at the following declaration:

a:link {color:#FF0000; text-decoration:none;}a:visited {color:#0000FF; text-decoration:none;}a:hover {font-size:20; color:#00FF00; text-decoration:underline;}a:active {color:#FF00FF; text-decoration:underline;}

What this means is the following:

1) When the page is first loaded, the font color is red.

2) Once the link is visited, the font color becomes blue.

3) When you mouse over the link, font size becomes 20, font color becomes green, and an underline appears.

4) When you click on the link, font color becomes pink, and the underline remain

Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows:

.[Class Name] { property:value; ...}

For example,.navbar {color:#0000FF;}

To apply this style to the HTML, using the following code:<p class="navbar">This is a sample using a Class selector.</p>The above HTML code renders:This is a sample using a Class selector.

Class

Media types:One can apply different CSS stylesheets for different media types

(devices). For example, a stylesheet can be applied when a document is rendered on the screen, and a different stylesheet can be applied when that same document is to be printed. The syntax for specifying the media type for a stylesheet is as follows:

External Link<link rel="stylesheet" href="style.css" type="text/css"

media="[media type]">

Embed<style type="text/css" media="[media type]">

Import@import url("style.css") [media type];

Box model:

The box model is an important concept in CSS. It dictates how elements are laid out. The box model is shown beside:The innermost component is the content. Padding is applied outside the content area.

css-cursors

{ cursor: crosshair; } Mouse cursor is set to crosshair{ cursor: pointer; } Mouse cursor is set to pointer{ cursor: text; } Mouse cursor is set to text{ cursor: move; } Mouse cursor is set to move{ cursor: wait; } Mouse cursor is set to wait{ cursor: help; } Mouse cursor is set to help{ cursor: progress; } Mouse cursor is set to progress

wed{ cursor: all-scroll; } Mouse cursor is set to all-scroll{ cursor: col-resize; } Mouse cursor is set to col-resize{ cursor: row-resize; } Mouse cursor is set to row-resize{ cursor: e-resize; } Mouse cursor is set to e-resize{ cursor: ne-resize; } Mouse cursor is set to ne-resize