Table of Contents

CSS – Introduction

”;

CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML elements as a separate file known as CSS file having .css extension.

What is CSS?

CSS stands for Cascading Style Sheets, used to describe the presentation and design of a web pages.
Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used.
CSS can control the layout of multiple web pages all at once.

CSS Styling Example

Following is layout of a webpage, click the button below to add CSS styling to the page and see difference between a webpage with and without CSS.

Webpage Layout

Click to Add Style

You can toggle between styled version and unstyled version of this page using above button.

Why Use CSS?

CSS Saves Time: You can write CSS once and then reuse same sheet in multiple HTML pages.
Pages Load Faster: If you are using CSS, you do not need to write HTML tag or attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
Easy Maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can get a far better look to your HTML page.
Multiple Device Compatibility: For the same HTML document, different versions of a website can be presented for different screen widths
Global Web Standards: Now most of the HTML attributes are being deprecated and it is being recommended to use CSS.

CSS Syntax

Syntax of CSS consist of selectors and declaration used to apply styles to HTML elements.

selector {
    property: value;
}

The selector targets the HTML element/elements that you want to style.
The declaration block contains one or more declarations enclosed in curly braces {}.
Each declaration consists of a property and a value separated by a colon :. Declarations are separated by semicolons ;.

There are several types of selectors available in CSS, commonly used selectors are classes, IDs and tags. To know complete list of selectors visit CSS Selectors article.

CSS History and Versions

Current version of CSS3 and early versions were CSS1 and CSS2. As of now CSS is continuesly evolving and adapting new capabilities that full fills the current website”s requirements.

CSS-versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.

CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. It has divided into documentations is called as Modules and here each module having new extension features defined in CSS2.

CSS3 Modules

CSS3 Modules are having old CSS specifications as well as extension features.

For a quick guide on types of style used in CSS, visit our CSS cheat-sheet

Print Page