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”.
The advantage of a class selector is that it can be applied to more than one elements according to W3C recommendation.
Having this, all paragraphs who’ll have “colored” class as attribute will inherit red color from stylesheet.
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.
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.
Using the selectors properly you will not only have a cleaner markup but you will also have a more beautiful CSS code.