Cascading style sheets are a new way of formatting your page layout, text, fonts, images, and almost anything you put on the page.They allow you to position things on your page down to the exact pixel. Also, if a style is declared in the head section of a page, a change to the style changes the style on the entire page.

What is CSS?

* CSS stands for Cascading Style Sheets
* Styles define how to display HTML elements
* Styles are normally stored in Style Sheets
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save you a lot of work
* External Style Sheets are stored in CSS files
* Multiple style definitions will cascade into one

Suppose that you created a style for a heading tag, <H1>. In your style, you set the color of your H1 tags to red. Now if you have 10 H1 tags on the page, and decide you would rather have your headings be blue, you would no longer need to go back and change the font color for each heading. All you have to do is change the style of your H1 tags from the color red to blue. Changing the style once will adjust all of your H3 tags and they will now be all blue instead of red, with alot less work.

Syntax

The CSS takes the following syntax

selector {property: value}

eg:-body {color: blue}

This can be applied to a group also
h1,h2
{
color: #000000;
}
Adding Styles to Elements with Particular Attributes

input[type="text"] {background-color: red}

The id Selector

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

The style rule below will match the element that has an id attribute with a value of “black”:

#black{color: black}

The style rule below will match the p element that has an id with a value of “para1″:

p#para1
{
text-align: center;
color: red
}
Comments in CSS

/* This is a comment */
p
{
text-align: center;

}

Inline Styles:

Inline styles are added directly to the element to be styled with the style attribute:

<p style=”color: red;”>

Inline styles are CSS styles that are applied to one element using the style attribute.

1. We write the style properties all one line .then we separate multiple properties with a semi-colon

eg:- background:#112344; color:#223555; border: solid black 1px;

2. Now you place that line of styles inside the style attribute of the element you want styled.

<p style =” background:#112344; color:#223555; border: solid black 1px;”>
Advantages and disadvantages of Inline Styles

Advantage

1) Inline styles have the highest precedence because of the cascade.

Disadvantages

1)They can over-ride things you didn’t intend them to do as they are most specific in cascade.

2)It’s impossible to style pseudo-elements and -classes with inline styles. For example, with external and internal style sheets, you can style the visited, hover, active, and link color of an anchor tag. But with an inline style all you can style is the link itself, because that’s what the style is on.

External style sheets

External style sheets (CSS) allow you to use one style sheet on multiple Web pages – so when you change the look for your site, you change the CSS in one.

Advantages and Disadvantages of External Style Sheets

Advantages

1)Since External style sheets are written in a single page it is easy to change the style and look of websites without much trouble.You need to make changes only in a single page and to a single portion.

2)To use the styles effectively we can group them easily.

Disadvantages

* External style sheets can increase the download time, if they are extremely large.

* If you only have a small number of styles, they can increase the complexity of your site.

* Like with table rendering, you have to wait until the entire style sheet is loaded before the page can display.

* External style sheets get big very quickly as it’s hard to tell when a style is no longer in use, because it’s not deleted when the page is removed.

LINKING TO PAGE

Each page which uses CSS must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

Your style sheet should be saved with a .css extension

Suppose that style.css is the name of the page where you put your styles.

<head>
<link rel=”stylesheet” type=”text/css”
href=”style.css” />
</head>

The browser will read the style definitions from the file style.css and format the document according to it.
body { background : #FFFFFF;}
p {margin-left: 20px}

Internal style sheets

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>
<style type=”text/css”>

p {margin-left: 20px}

body {background : #FFFFFF;}
</style>
</head>

Multiple Style Sheets

A group of properties can be applied to a tag

eg:-body {
background : #FFFFFF;
border: #000000 ;
border-style: solid;
border-width: 0px;
padding: 10px ;
vertical-align: middle ;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 400 ;
color: #000000;
font-size:6;

}
Inside the tables for a all columns or rows you can specify the styles

td {
empty-cells : show;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 400 ;
color: #000000;
text-align: center;
}