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.

1.Selectors

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″.

p
{
  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.

.colored
{
  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 Validation which is very important for you, as a designer.

#colored
{
  color: red;
}

Contextual Selectors

p#colored span
{
  color: blue;
}

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

Result:

2.Properties

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.

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

Conclusion

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