CSS: working with text

With CSS, you can set the style and appearance of the text. Similar to that used by the tag <FONT>, which specifies font properties. But styles have more properties and can reduce the code HTML.
Font properties
Changing the font style and its size is set by the properties of CSS, which are described in Table 1.
Table 1. Attributes of CSS for font control.
Property | Value | Description | Example |
---|---|---|---|
font-family | Font name | Specifies the font list | P {font-family: Arial, serif} |
font-style |
normal |
Normal font | P {font-style: italic} |
font-variant |
normal | Small-capitals | P {font-variant: small-caps} |
font-weight |
normal |
Normal bold | P {font-weight: bold} |
font-size |
normal |
Normal size |
font-size: normal |
Note: When the font size is set in absolute values, for instance, if a specific fort value is indicated in points or pixels, then changing this value by using the browser option View | Text size is impossible. If the font size is too small, then for the reader it's impossible to correct this by simple means.
Example 1 shows how to use parameters when working with fonts.
Example 1. Setting font properties in CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> h1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight: light; } </style> </head> <body> <h1>Header</h1> <p>Plain text</p> </body> </html>
The result is shown below.
Header
Plain text
Table 2 shows some style parameters for working with text and the results of their application.
Table 2. The result of applying different font parameters.
Example | Example | Example | Example | Example |
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Text properties
In addition to changing font settings, you also can control the properties of the text. Property values are given in Table 3.
Table 3. CSS properties to control the appearance of text.
Property | Value | Description | Example |
---|---|---|---|
line-height |
normal | Line spacing |
line-height: normal; |
text-decoration |
none |
Remove all design | text-decoration: none; |
text-transform |
none |
Remove all effects | text-transform: capitalize; |
text-align |
left | Text alignment | text-align: justify; |
text-indent |
precise | First line indent |
text-indent:15px; |
Below, table 4 shows some text parameters and their results.
Table 4. Result of applying different text parameters.
everything is included | centered text | not hypertext, this just plain text | line indent | height |
text-transform: capitalize; | text-align: center; | text-decoration: underline; | text-indent: 20px; | line-height: 1.5; |