CSS Basics Introduction

What is CSS?

CSS stands for Cascade Styling Sheet. It simply tells a browser how to lay out content. HTML is the basic language that all web browsers understand. It defines different elements as seen in a browser, like text content, links, titles and subtitles, images and so on. CSS is basically the design (format) of these elements. It allows for the formatting of the entire web page or the smallest element on the page.

Why was CSS created?

It was only from HTML 4.0 onwards that CSS became available. It was created by the World Wide Web Consortium (W3C) to solve the problem of formatting individual elements in HTML. While the format (background, font size, font color and so on) of these elements can be defined in the HTML, it becomes a laborious process. CSS makes it simple. CSS predefines the format of the different elements and the formatting can change when certain conditions are met. In this way, many elements can share the same format without having to code the format for each element. These formats or styles are stored in an external file and referred to by the HTML when the content is being loaded and laid out in the browser. These external files use the .css extension. One of the other many benefits of using Cascade Styling Sheets is that the look of an element or several elements, or even an entire website, can be changed by editing the .css file without interrupting the core content. With the advent of CSS3, formatting of elements took on a new dimension allowing for transition effects and animation, among other features.

How is CSS coded?

The CSS syntax involves two main parts:
  1. The HTML element that is to be formatted referred to as the selector.
  2. The property and value of the formatting referred to as the declaration.
In the example below, the H2 element (selector) is red in color and a font size of 16 pixels. In this line there are two declarations – color and size. Declarations end with a semicolon and a group of declarations end with curly brackets. It is also possible to use the same declarations for several selectors simultaneously. It is always advisable to include comments to describe the element which is being formatted. Comments will not be read by the HTML and must be included between /* and */.