CSS Beginner tutorial 3 : CSS Selectors, Properties, and Values

Selectors are the names given to styles in internal and external style sheets. For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or background-color etc. A value is given to the property following a colon and semi-colons separate the properties. For example


body {
   font-size: 0.7em;
  color: blue;
}


Above code will apply the given values to the font-size and color properties to the body selector. When this is applied to an HTML document, text between the body tags will be 0.7 ems in size and blue in colour. Another example

#desc {

   font-size: 0.5em;

  color: red;

}

The above code will apply the values to all HTML elements having id equal desc. (e.g having id="desc" attribute).

Lengths and Percentages :
There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.


em ( e.g font-size: 2em ) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.


px (e.g font-size: 12px) is the unit for pixels.


pt (e.g font-size: 12pt) is the unit for points.


% (e.g font-size: 80%) is the unit for percentages.


Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches). In case if a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

See Also