CSS3 Introduction

CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.


CSS3 Modules

CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added.

Some of the most important CSS3 modules are:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Introduction to Cascading Style Sheet (CSS)

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language (HTML).


Selector {property:vlaue; property:value;}


Selector= a tag like h1, p, table etc

property= height, width, margin, color, background, border etc

value = could be a number with pixel or point e.g. 50px OR some other value like #CCCCCC

You can add as many properties as you like, each property should be separated by ; “Semi Column”


h1 { color: white; background-color: #000000; margin:10px; }


How to link a style sheet with HTML document?

Use the <link> tag to in <head> tags to link a css file with a HTML file

<link href=”url” rel=”stylesheet” type=”text/css”>

Although rel and type attribute are not mandatory but it is the part of best practices and helps browsers to identify the document.


ID & Classes

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called “id” and “class”.

The id Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a “#”.

The style rule below will be applied to the element with id=”heading”:

#heading {
font-size: 24px;

How to Use

<h1 id=”heading”>This is the heading</h1>

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a “.”

In the example below, all HTML elements with will be center-aligned:

.center {text-align:center;}


How to Use

<h1 class=”center”>This is example text</h1>


CSS Box Model

In simple words

Every element in web design is a rectangular box.


All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.


Further Reading

CSS Introduction -W3Schools