The CSS code is based on selectors and properties. The selectors and properties are thoroughly examined in following chapters while here we are going to take a quick look at what they actually are.

A selector identifies a HMTL element or elements that its property values are going to apply to. It can be defined in various ways but most commonly a selector is a HTML tag directly, meaning that the following groups of values apply to all tags of this kind (i.e. <h2>) or it's a class / id attribute and all property values are going to be attached to the tags with the specified attribute names (i.e. <h2>, <p> and <li> with class="highlight").

Each selector needs a property or properties to be assigned to it in order to have styles applied. A property comes with following group information:

Value (for programmers the most important information):

Specifies property's value or values in a specific way (%, units, predefined words...) depending on the property itself (compare to initial and inherited). Values may be specified with following keywords:

  • < > represents data type;
  • [ ] used for grouping;
  • * indicates that preceding type occurs zero or more times;
  • + indicates that preceding type occurs one or more times;
  • ? indicates that preceding type is optional;
  • {A,B} indicates that preceding type occurs at least A and most B times;

Initial:

Specifies property's initial values (compare to value and inherited);

Applies to:

Lists all elements the property applies to;

Inherited:

Specifies property's inherited values (compare to value and initial);

Percentages:

If the property has value(s) in percentage it explains how it should be interpreted;

Media:

Specifies the media groups to which property applies to;

Computed value:

Describes the computed value for the property.

Vendor specific properties

Beside CSS regular property names, a property may be named as a vendor-specific extension. The keywords that begin with "-" or "_" are reserved for vendor specific extensions. The following formats are accepted:

  • '-' + vendor identifier + '-' + meaningful name
  • '_' + vendor identifier + '-' + meaningful name

To learn some of the known vendor-specific property names please go the "CSS References".

Example

CSS selector with properties:

 

›› go to examples ››