Introduction to CSS

CSS stands for Cascading Style Sheets.CSS is a language that you can use to define styles against any HTML element. These styles are set using CSS properties.For example, you can set font properties (size, colors, style etc), background images, border styles, and much more.Using CSS, We can define all our common styles in an external Style Sheet. This way, if we want to change every occurence of a style throughout our site, we only need to update one place. Till now, there are css1, css2, css3 versions are used.

Benefits of CSS

There are following benefits :

1. CSS saves time

   In html, we have to set the font face, size, colour, style etc for each and every element whenever it occurs on a page. With CSS, we only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.

2. Faster Page loading

   Using css we have to do less code means page is loaded fastly.

3. Easy maintenance

   To change the style of an element, we only have to make a change in one place.

4. Superior styles to HTML

   CSS has a much wider array of attributes than HTML.

Limitations of CSS

The known issue is Browser compatibility issue. Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.

Fortunately, browser compatibility is becoming less of an issue as the latest browser versions are much more standards-compliant than their earlier counterparts.

CSS IDs

The id selector is used to specify a style for a single, unique element. It is defined with a "#".

Example : #para{ text-align:left; color:blue;}

CSS Classes

The class selector is used to specify a style for a group of elements. class selector is most often used on several elements. It is defined with a "."

Example :.para {text-align:left;color:blue;}

When to use Classes ?

We should use classes when our style needs to be applied multiple times on the same page.

For example : you might have many h1 elements that need the same style applied.

When to use IDs ?

We should use IDs if only one element on the page should have the style applied and/or we need a unique identifier for that element.

For example : we might assign an ID to a div tag which contains our left menu. The styles for this ID could contain the position, background-color, float properties, size etc. We probably wouldn't want any other element on the page to use this particular style.