CSS: Styling Text

 

Styling text in CSS is very flexible and precise. Not only you can specify font size in “pixels”, “points”, "%" or “ems” but also you can control other font properties including upper or lowercase, indentation, text height, line height, text direction, and many more as shown here:

 

Font Family        P {font-family:"Times New Roman",Georgia,Serif;}

Generic Family

Font Family

Description

Serif

Times New Roman
Georgia

Serif fonts have small lines at the ends on some characters

Sans-serif

Arial
Verdana

"Sans" means without - these fonts do not have the lines at the ends of characters

Monospace

Courier New
Lucida Console

All monospace characters have the same width


Font Style

Style

Example

Description

Normal

p {font-style:normal;}

The text is shown normally

Italic

p {font-style:italic;}

The text is shown in italics

Oblique

p {font-style:oblique;}

Very similar to italic but less supported.

Bold

p {font-weight:bold;}

The text is shown in bold

 

Font Size

Unit

Example

Description

Pixel

h1 {font-size:40px;}

Firefox, Chrome, and Safari can resize the text, but not Internet Explorer.

ems

h1 {font-size:2.5em;}

em unit allows browsers to resize text. pixels/16=em

Percentage

body {font-size:100%;}
h1 {font-size:2.5em;}

To show the same text size in all browsers, and allows all browsers to resize the text.

 

Text Color

Style

Example

Description

HEX value

h1 {color:#00ff00;}

#RRGGBB, where the RR (red), GG (green) and BB (blue). Values are between 0 and FF.

RGB value

h2 {color:rgb(255,0,0);}

RGB (Red, Green, Blue). Each parameter defines the intensity of the color and can be an integer between 0 and 255.

Color name

body {color:blue;}

Only 147 color names are predefined

 

Text Alignment

Alignment

Example

Description

Center

h1 {text-align:center;}

Text aligned to center.

Left

p {text-align:left;}

Text aligned to left.

Right

p {text-align:right;}

Text aligned to right.

Justified

P {text-align:justify;}

Each line is stretched to create equal width.

 

Text Indentation

Style

Example

Description

text-indent

p {text-indent:50px;}

Text indented for 50 pixels.

 

Background

Background

Example

Description

Background Color

body {background-color:#b0c4de;}

Add background color to the body of the web page.

Background Image

body {
background-image: url ("images/bg.jpg");
}

Insert bg.jpg as the background image of the page.

Repeated Background
Image

body
{
background-image: url ("images/bg.jpg");
background-repeat: repeat-x;
}

Insert bg.jpg as the background image of the page and repeat it on x axis.

 

Styling Links

Style

Example

Description

Links

a {text-decoration:none;}

Styling all states of links.

Link

a:link {text-decoration:none;}

Styling the link initial format.

Visited link

a:visited {text-decoration:none;}

Styling the visited links.

Link hover

a:hover {text-decoration:underline;}

Styling the mouse hover status.

Active link

a:active {text-decoration:underline;}

Styling the active link.

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>