Text handling in CSS

[Inigo]

If there is an essential aspect of CSS that is the new approach introduced for the management of the text. First there was the <font>: pages heavy and difficult to manage. Today, something that can transform a website into a perfect example of a typeface, and finally agrees, at least in part, the power and flexibility of a word-processor. The properties that define how the text appears on the screen are many and we decided to split the argument into two classes. We start from the basic properties. Are those that define the following aspects:

• the font to use
• its size
• its consistency
• the spacing between paragraphs
• text alignment
• its decoration (underline, etc.)

font-family

Font-family property is used to set the font of your text. It applies to all elements and is inherited. The men of the W3C have created a mechanism that allows the author to set fonts in CSS is not a single one, but a list of alternate characters. The mechanism works like this:

p {font-family: arial, Verdana, sans-serif;}

When the page is loaded, the browser will attempt to use the first font on the list. If this is not available will use the second. In the absence of this too will use the main font family sans-serif font on the system. The explanation for this is simple: to tackle the problem of fonts on different software platforms. So, when you set the font-family you can use any font you want, but never forget to include a statement at the end of a generic family. They are five (in parentheses report the default fonts on Windows systems on each):

• serif (Times New Roman)
• sans-serif font (arial)
• cursive (Comic Sans)
• fantasy (Allegro BT)
• monospace (Courier)

The names of the font on the list should be separated by commas. Characters with names consisting of several words should be placed in quotation marks. If you use families as strange and unusual fantasy or cursive use more than one generic family. This should always be put at the end, otherwise it is practically useless to the definition of specific fonts.

selector {font-family: <font 1>, <font2>, ....,< family generic>;}

[Inigo]

font-size

Along with font-family ownership is considered essential in the definition of text, which defines the size. Applicable to all elements and inherited.
Syntax :

selector {font-size: <value>;}

The values of the text size can be expressed in various ways. For a discussion on the use of different methods and the implications in terms of accessibility and cross-browser compatibility you should read the article "Set the font size with CSS: advantages, problems and solutions". The different systems can be distinguished according to the dimensions that define in absolute terms or relative. Absolute size means that it does not depend on any other element and is defined by the unit of measurement used. Relative size means that it is calculated based on the relative size of the text element. Are absolute values:

• the seven keywords xx-small, x-small, small, medium, large, x-large, xx-large
• those expressed in the following units: pixels (px), centimeters (cm), millimeters (mm), points (pt), picas (pc), inches (in), x-height (ex). Of all these units the only ones to be proposed to the text are points and pixels. We recommend using only the first CSS for print.

Relative values:

• keywords smaller and larger
• expressed in em (em-height)
• expressed in percentage

Examples -

p {font-size: 12px;} 
div.trial{font-size: 50%;} 
# Div1 {font-size: large;} 
h2 {font-size: 1.2em;}

[Inigo]

font-weight

Serves to define the size or "weight" of the visual text. It applies to all elements and is inherited. Syntax

selector {font-weight: <value>;}

The weight of a visual character can be expressed as a numerical scale or keywords:

• numeric values from 100 to 200 - 300 - 400 - 500 - 600 - 700 - 800 to 900 listed in ascending order (from light to heavy)
• normal. Default value. And 'the normal appearance of fonts, and is equal to the value 400
• bold. The character takes the appearance that we define in general bold. Equivalent to 700
• bolder. Relative measurement. This specifies that a particular piece of text to appear heavier than the text of the relative
• lighter. Measure. The text will be lighter than the element relative

Examples -

p {font-weight: 900;} 
div {font-weight: bold;}

font-style

Set the characteristics of the text according to one of these three values:

• normal: The text retains its normal
• italic: format text in italics
• oblique: almost like italic

The property applies to all elements and is inherited. Syntax

selector {font-style: <value>;}

Line-height

With line-height you can finally use our pages a system worthy of the name spacing. The property, in fact, serves to define the height of a line of text within a block element. But the effect is precisely that much coveted by all web designers: a way to set a space between the lines. The property applies to all elements and is inherited. Syntax :

selector {line-height: <value>;}

Its Values :

• normal. The browser will separate the lines with an area considered "reasonable." Should correspond to a numerical value between 1 and 1.2
• numeric value. By using numerical values like 1.2, 1.3, 1.5, you get this result: the row height will be equal to the font size multiplied by this value.
• a numeric value with units of measurement. The row height will be equal to the size specified.
• percentage. The row height is calculated as a percentage of the font size.

The advice is to never use the percentage of units to carefully evaluate the use of explicit and rely without any problems to the numerical value.

[Inigo]

font

The font properties can be compared to the background. This is a shorthand property used to set a single statement all the main features of the text. The properties defined in abbreviated form with fonts are:

• font-family
• font-size
• line-height
• font-weight
• font.-style
• font-variant
• system fonts

Syntax

selector {font: <values>;}

Some indications for use. The values for individual properties should not be separated by commas. Comma separated values which it is defined for the font-family. Even in this case font names consist of several words should be enclosed in quotation marks. As for the order, the declaration should always end with the couple font-size> font-family. The value of the property line-height is set so very, followed by its value to the font-size bed and separate the two with a slash:
font-size/line-height

Use system fonts

Inside the property you can set font, instead of the normal list of characters, a value corresponding to the so-called system fonts. This is the font we use on our operating system to control the appearance of interface elements like menu bars, icons or status bar. In particular, the keywords related to the system fonts are 6 and include:

1. caption: font used for buttons and drop-down menu
2. icon: the font used for the description of the icons
3. menu: menu font used in the various windows
4. message-box: used for the alert box with messages and other system
5. small-caption: smaller font for the controls
6. status-bar: the font used for the status bar

If you intend to use a system font is not necessary to specify values other than the keyword. Our text, in practice, will inherit the settings in the operating system on a font and size.