CSS Beginner - Selectors,Properties & Values

CSS Selectors, Properties, and Values

Whereas HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and external style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific tag.
 

 

For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or backgroud color
A value is given to the property following a colon (NOT an 'equals' sign) and semi-colons separate the properties.

body {
 font-size: 0.8em;
 color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.
So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 0.8 ems in size and navy in colour.

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 (such as 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 (such as font-size: 12px) is the unit for pixels.
pt (such as font-size: 12pt) is the unit for points.
% (such as font-size: 80%) is the unit for... wait for it... percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
When 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.

A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed to view the web page how the hell they like, which includes the font size and the size of the screen.
Because of this, it is generally accepted that 'em' or '%' are the best units to use for font-sizes (and possibly even heights and widths, which we shall come across in the CSS Advanced Tutorial), rather than 'px', which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.