CSS: working with text

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)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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; 


 

Read also

Formatting text in HTML

Formatting text in HTML

Font size in HTML

Font size in HTML

Text alignment in HTML

Text alignment in HTML

Details about "float" property

Details about "float" property

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation