What is CSS
CSS is an acronym for Cascading Style Sheets. CSS is a style language that defines layout of HTML documents. CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and a lot more things.
Why CSS was required?
HTML tags were originally designed to define the content of a document. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. As the Netscape and Internet Explorer started adding new HTML tags and attributes (like font and color attribute) to the original HTML specifications, it become pretty difficult to create Web Sites where the content of HTML documents was clearly separated from the document’s presentation layout. To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
What I Should Know Before Starting?
You should have basic understanding HTML 4.0 or XHTML 1.0
What CSS can do For Me?
You can control layout of many HTML documents from single style sheet
You can change layout at will, without messing with HTML code
Getting Started
CSS is made of three parts: a selector a property and value
Selector
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
h1
{
font-family:Times New Roman
}
Assigns Times New Roman font to all h1 tags.
If you wish to assign multiple properties, you can do it by separating properties by separating by a semicolon as shown below:
p
{
text-align:right;
color: green;
font-family: Times New Roman;
}
Above example shows how to define a right aligned paragraph, with a green text color.
Grouping Selectors
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be have font family Times New Roman:
h1,h2,h3,h4
{
font-family: Times New Roman;
}
Selector with Classes
With classes you can assign different styles to same type of HTML elements
p.red {color : red}
p.green {color: center}
You have to use the class atribute in your HTML document as shown below
<p class="red">
This paragraph will have red color.
</p>
<p class="green">
This paragraph will have green color.
</p>
Do not start a class name with numeral. It will not work in Firefox.
Writing Comments in CSS
Comments are as important as code itself, so now we will see how to write comment in CSS. Comment in a CSS file starts with “/*” and ends with “*/”. As shown in example below
/*Begin Header Type */
h1{font-family:Times New Roman; color: red}
h2{font-family:Verdana; color: blue}
h3{font-family:Arial; color: green}
/*End Header Type */
Inserting Style Sheet in Your HTML Document
<head>
<link rel=”stylesheet” type=”text/css” href=”BlueMariner.css” />
</head>
Where BlueMariner is the name of your CSS File.
CSS validator
To make it easier to observe the CSS standard, W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validate. CSS Validator can be also downloaded from W3C WebSite.
