I often notice people tend to use stylesheets without knowing its structure meaning. That’s why, in this tutorial I will try to present you the CSS components structure.



The selector is the element that is linked to a particular style.In the following example the selector is “p”, so “p” is the element who’s margin properties will be “0″.

  margin: 0;

Class Selectors

The advantage of a class selector is that it can be applied to more than one elements according to W3C recommendation.

  color: red;

Having this, all paragraphs who’ll have “colored” class as attribute will inherit red color from stylesheet.

ID Selectors

The id attribute assigns a unique identifier to an element, so try assigning an id attribute to no more than just one element.

If you’ll assign a CSS id to more elements within a page you will fail the W3C Markup Validationwhich is very important for you, as a designer.

  color: red;

Contextual Selectors

p#colored span{
  color: blue;

This selector is applied to all “span” elements within the paragraph with “colored” id attribute.



Now that we know how a selector looks like let’s see what is a CSS property. CSS properties defines how the styles should look on the Web page or elsewhere.

Examples: margin, padding, color, border, background etc.

In this example, the h1 element has three properties: color, font-family and margin. These properties with theirs values defines how the h1 element will look.

  color: red;
  font-family: Verdana;
  margin: 10px 0;


Using the selectors properly you will not only have a cleaner markup but you will also have a more beautiful CSS code.

Posted by: Dhiraj kumar

You can support this website by sharing. Thank you!