Friday, March 20, 2009

Manipulating text using CSS

We can use the CSS "text" and "font" properties to manipulate the appearance of the text displayed on our site. Here is a compilation of commonly-used properties. You can refer to the full compilation here.

Property

Description

Values

color

Sets the color of a text

You can use HTML color codes, as well as pre-defined values like "red", "yellow", etc.

background-color

Sets the background color of the text

You can use HTML color codes, as well as pre-defined values like "red", "yellow", etc.

font-family

A prioritized list of font family names for an element

List of font types

font-size

Sets the size of a font

small, medium, large, length, %

font-style

Sets the style of the font

normal, italic, oblique

text-align

Aligns the text in an element

left, right, center, justify

text-indent

Indents the first line of text in an element

length,%

How to use these properties?

<html>
<head>
<style type="text/css">
p {
font: italic 12px arial;
text-align: center;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a paragraph using CSS</p>
This is a paragraph not using CSS

</body>
</html>

This is what you will see on the page:

This is a paragraph using CSS


This is a paragraph not using CSS

Notice that we can also use font to define all the properties related to the font (i.e. style, size, and font family).

No comments:

Post a Comment