CSS

                                     CSS Tutorial

CSS is used to manage the style of a web document in a effortless and straightforward technique. CSS stands for Cascading Style Sheet. This tutorial gives complete understanding on CSS.

What is CSS?

Cascading Style Sheets, warmly referred to as CSS, is a easy design language proposed to make straight forward the process of making web pages presentable.

CSS handle the seem and think component of a web page. use CSS, you can manage the color of the text, the style of fonts, the space among paragraph, how columns are sized and laid out, what background images or colors are used, as well as a diversity of further belongings.

CSS is simple to study and appreciate but it provides influential control over the appearance of an HTML document. Most commonly, CSS is joints with the markup languages HTML or XHTML.

Advantages of CSS:

 CSS saves time - You can mark CSS one time and then use again similar sheet in numerous HTML pages. You can classify a style for each HTML element and apply it to as many Web pages as you desire.

 Pages load faster - If you are by means of CSS, you do not need scripting HTML tag attributes each instant. Now write one CSS rule of a tag and narrate to all the happening of that tag. So small code means quicker download times.

 Easy maintenance - To create a global modify, purely alter the style, and all elements in all the web pages will be modernized robotically.

 Superior styles to HTML - CSS has a lot wider array of attribute than HTML so you can give distant enhanced look to your HTML page in relationship of HTML attributes.

 Multiple Device Compatibility - Style sheets authorize content to be simplified for more than one kind of device. By using the comparable HTML document, various version of a website can be presented for hand held devices such as PDAs and cell phones.

 Global web standards - Now HTML attribute are life form deprecated and it is being suggested to exploit CSS. So it’s a good idea to begin using CSS in all the HTML pages to make them compatible to future browsers.

Who Creates and Maintains CSS?

CSS is formed and retain through a cluster of people contained by the W3C called the CSS Working Group. The CSS Working Group creates credentials called specifications. When a

Specification has been talk about and officially approve by W3C members, it becomes a recommendation.

These approved specifications are called recommendations because the W3C has no control       over the genuine execution of the language. Independent companies and organizations create that software.

CSS Syntax – Selectors:

A CSS included of style rules that are understand by the browser and then practical to the equivalent elements in your document. A style rule is made of three parts:

·       Selector: A selector is HTML tags at which style will be apply. This could be any tag like <h1> or <table> etc.

·       Property: A property is a type of attribute of HTML tag. Put cleanly, all the HTML attributes are transformed into CSS properties. They could be color or border etc.

·       Value: Values are allocated to properties. For example color property can have value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows:

Selector {property: value ;}

Example: You can define a table border as follows:

 table {border: 1px solid #C00;}

Here table is a selector and border is a property and known value 1px solid #C00 is the value of that property. You can describe selectors in a variety of straightforward ways based on your relieve.

The Type Selectors:

This is the similar selector we have seen above. One more example to give a color to all level 1 headings:

h1

 {

Color: #36CFFF;

}

The Class Selectors:

You can describe style rules based on the class attribute of the elements. All the elements having that class will be arranged according to the classify rule.

.black

 {

Color: #000000;

}

This rule provided the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example:

h1.black

{

color: #000000;

}

This rule provided the content in black for only <h1> elements with class attribute set to black.

You can apply more than one class selectors to given element. Consider the following example:

<p class="center bold">

This paragraph describes how to actually <p> tag is work.

</p>

The ID Selectors:

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#black

{

color: #000000;

}

This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example:

h1#black

{

color: #000000;

}

This rule renders the content in black for only <h1> elements with id attribute set to black.

The true power of id selectors is when they are used as the foundation for descendant selectors,

For example:

#black h2

{

color: #000000;

}

In this example all level 2 headings will be displayed in black color only when those headings will lie within tags having id attribute set to black.

The Child Selectors:

You have seen descendant selectors. There is one more type of selectors which is very similar to descendants but have different functionality. Consider the following example:

<body>

p

 {

color: #000000;}

</body>

This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> etc. would not have any effect of this rule.

The Attribute Selectors:

You can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that has a type attribute with a value of text:

input[type="text"]

{

color: #000000;

}

The advantage to this method is that the <input type="submit" /> element is unaffected, and the color applied only to the desired text fields.

There are following rules applied to attribute selector.

·       p[lang] - Selects all section elements with a lang attribute.

·       p[lang="fr"] - select all section elements whose lang attribute has a value of exactly "fr".

·        p[lang~="fr"] - Select all section elements whose lang attribute contains the word "fr".

·       p[lang|="en"] - Selects all section elements whose lang attribute contains values that are  exactly "en", or begin with "en-".