Getting Started with CSS

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:

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:

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:

Selector with Classes

With classes you can assign different styles to same type of HTML elements

You have to use the class atribute in your HTML document as shown below

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

Inserting Style Sheet in Your HTML Document

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.