What is CSS (Cascading Style Sheet) and its advantages?

Introduction to CSS

Cascading Style Sheet (CSS) is the broad term to refer several methods of applying style elements to HTML pages. CSS provides the facility to control the style of a web document in terms of changing background, text, link colours, margin controls, padding setting and placement of objects on a page.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the colour of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colours are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

Let us take an example of bike manufacturing. First of all, a frame of bike gets ready in an industry and that basic frame can be compared with HTML, which also provides a basic structure to your program. After the completion of basic frame of bike, then bike is painted, seats install, mirrors install etc. to make bike to look beautiful. This beautification of bike can be compared with CSS which also make your program beautiful by setting some properties like background colour, text formatting, etc. This was just a brief introduction of CSS.

Syntax of Style Sheet

You can use any method to deliver your CSS to HTML documents, the syntax is going to be similar in all cases. Style sheets are made up of specific parts. These parts include the following:

Selector

Selectors receive the attributes you assign to the CSS. These are usually HTML elements such as header (H1, H2….H6), paragraph (P) etc.

Property

A property defines a selector. For example if you write a paragraph P, then you can assign properties to this paragraph like margins, font setting, background, color etc.

Value

Values define properties. Lets say you have a header H1 as your selector, and you have included a font family as its property. Then the font face you actually define is its value.

The combined properties and values make up a declaration. Let us take an example to set properties of H1.

H1{
   font-family:verdana, times, arial;
  }

Note that the curly brackets are used to contain the declaration of properties of H1. This syntax will work only with embedded or linked styles. The inline style is used within the quotes. An example of inline CSS is shown below:

<H1 style="font-family:verdana, times, arial;">Hello world!</H1>

Advantages of Cascading Style Sheets

CSS is the widely used language over internet to beautify the web pages. There are some advantages of using CSS in your web pag

1. CSS saves much of your time

The CSS code once written may be used foe different pages. There is no need to write code again and again. For example, if you set the properties of H1 tag, then use the properties in all H1 tags if you want to give same type of properties to your H1 tag.

2. Your web page loads faster

As discussed in step one above, there is no need to write different codes for your same tag, it also make the program less heavier. Lesser the code faster is the page loading.

3. Maintenance of code is easy

As there is no need to write same code again and again, so, the maintenance of code is easier whenever it is required to change the code, you have to just change your code at one place only.

4. Multiple device compatibility

The contents are optimised for more than one device which means CSS written for one system can easily run on another system.