What is CSS? Why CSS is used? How to use CSS?

In CSS, Tutorials by May 25th, 2012

793 Views

Ever heard about CSS andd wondered what is CSS, why CSS is used and how to use CSS. In this article, I will introduce you to the basics of CSS along with its usage. 

What is CSS?

CSS is the abbreviation for Cascading Style Sheets.

It is a file that is included along with a web page to control it’s appearance. In olden days, the styles of an element were defined inline, i.e. whether a heading should appear as bold or if a certain piece of text should appear in red color, etc. The styles let you define how to display HTML elements.

Why CSS is used?

The biggest advantage is that using Style Sheets can save a lot of time needed to maintain the styles of each and every element.  The styles give an excellent control over the appearance of different elements that make up the web page. So whether you want to change the text color or how a form button looks or as a matter of fact, the look of any element of a web page, they can be changed very easily from a centralized location and that is nothing but CSS.

How to use CSS?

Although the styles of an element can be specified within the web page directly inline or within the head section of a web page, it is best to include the styles in an external file and this file is the CSS. A CSS rule basically consists of two main parts. One is Selector and the other is a Declaration. There could be a single or multiple Declarations for each rule.

Selector: Selector refers to the HTML element that needs to be styled. For example: h1, p, div, etc. There are two types of selectors. ID and Class.

Declaration: A declaration consists of a Property and its corresponding value. They are enclosed in curly braces. Multiple declarations are separated with semi-colons.

Property: The property is the style attribute you want to change.

Value: The value can be a numeric value (example: 12 px) or a textual value (example: underline)

Example:

In the above example, “div” is selector. “align” and “color” are the properties of “div”. “center” and “black” are the corresponding values of the properties. The above method is the most general way of writing CSS for readability purposes. All the code can also be written on a single line (but generally avoided for readability purposes), like this:

ID Selector:

For example:

Class Selector:

For example:

There are basically 3 ways to insert CSS in a webpage.

  1. Inline
  2. Internal Style Sheet
  3. External Style Sheet

Inline:

Example:  

Internal:

Example:  

External Style Sheet:

Example:  

Hope this article helped you get in touch with what css is and why css is used. Different ways of how to use CSS are also discussed. So make sure you follow the recommended approach.