Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) is the mechanism for adding style (fonts, colors, spacing, backgrounds, margins, lines, height, width etc) to HTML documents. It describes how to display HTML elements. This page contains information about CSS and describes the basic overview of Cascading Style Sheets or  CSS. Summary of the article:

• What is Cascading Style Sheets (CSS)?
• CSS ID and Class
• Ways to Insert CSS
• Internal Style Sheet
• External Style Sheet
• Inline Style Sheet

What is Cascading Style Sheets (CSS)?
Cascading Style Sheets or (CSS) is a style sheet language used to define how to display HTML elements. A style sheet consists of a list of rules. Each rule or rule-set contains one or more selectors and a declaration block. Each declaration block contains a list of declarations in braces. Each declaration itself has a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}

CSS ID and Class
ID Selector
The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with“#”. The style rule below will be applied to the element with id=”para1″:
Example:
#para1
{
text-align:center;
color:red;
}

Class Selector
The class selector is used to specify a style for a group of elements. It is different from the id selector. The class selector is used on several elements. This allows us to set a particular style for many HTML elements with the same class at a time. The class selector uses the HTML class attribute, and is defined with a “.”
Example:
.center {text-align:center;}

Ways to Insert CSS
There are three ways of inserting a style sheet:

1. Internal style sheet
2. External style sheet
3. Inline style

Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the

External Style Sheet
An external style sheet is perfect when the style is used in many pages. With an external style sheet, you can change the outlook of an entire web site by changing one file within a very short time. Each page must link to the style sheet using the tag. The tag goes inside the head section:

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}

Inline Style Sheet
By mixing content with presentation an inline style loses many of the advantages of style sheets. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

 That’s all about CSS.