Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS: working with text

CSS: working with text

Currently 0 out of 5 Stars.
1
2
3
4
5

Rating: 0/5 (0 votes cast)

Sep 27th 2012 10:15 am 270680 0813

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 italic oblique	Normal font Italic Oblique type	P {font-style: italic}
font-variant	normal small-caps	Small-capitals	P {font-variant: small-caps}
font-weight	normal lighter bold bolder 100-900	Normal bold Light faced font Half-bold Bold 100-light font, 900-most bold	P {font-weight: bold}
font-size	normal pt px %	Normal size Points Pixels Percent	font-size: normal font-size: 12pt font-size: 12px font-size: 120%

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 double precise %	Line spacing	line-height: normal; line-height: 1.5; line-height: 12px; line-height: 120%;
text-decoration	none underline overline line-through blink	Remove all design Underline Overline Strikethrough Blinking text	text-decoration: none;
text-transform	none capitalize uppercase lowercase	Remove all effects Start With Uppercase ALL UPPERCASE all lowercase	text-transform: capitalize;
text-align	left right center justify	Text alignment	text-align: justify;
text-indent	precise %	First line indent	text-indent:15px; text-indent:10%;

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;