CSS Selectors, Properties, and Values
While HTML has tags, CSS has ‘selectors‘. Selectors mean the names that describe styles in internal and external style sheets. In this CSS Elementary Tutorial we will be focusing on HTML selectors, which are just the names of HTML tags and are applied in order to change the style of a given tag.
‘Properties‘ for each selector appear inside curly brackets, which just look like terms color, font-weight or background-color.
The property following a colon (NOT an ‘equals’ sign) receives a value and the properties are sewparated by semi-colons.
body { font-size: 0.8em; color: navy; } This code will set the chosen values to the font-size and color properties to the body selector.
So, in general, in case this is applied to an HTML document, text that is written between the body tags (which comprises the content of the entire window) will have 0.8 ems in size and navy in color.
Lengths and Percentages
Values used in CSS can be expressed by a number of property-specific units, but still there are some general units that are applied in a number of properties and, before we go on, it is good to have a look at them.
em (such as font-size: 2em) is the unit that defines the calculated size of a font. “2em”, for instance, defines two times the current font size.
px (such as font-size: 12px) is the unit that defines pixels.
pt (such as font-size: 12pt) is the unit that defines points.
% (such as font-size: 80%) is the unit that defines percentages.
Other units comprise pc (picas), cm (centimetres), mm (millimetres) and in (inches).
In case a value is zero, there is no need to state a unit. For example, using border: 0 you don’t specify any border.
A web page is a dinamic, fluid medium. By definition it is flexible and the users must be free to view the web page the way they wish, which comprises the font size and the size of the screen as well. In consequence, it is a common rule that ‘em’ or ‘%’ are the best units applied for font-sizes (and maybe even heights and widths, which we shall get familiar with in the CSS Advanced Tutorial), rather than ‘px’, which can make text on most browsers non-resizable, and should not be used too often, for example, to define border sizes.