Thursday, 23 April 2015

, , ,

CSS Text Formatting

No comments  
HTML text can be styled using CSS. Text formatting properties are used for this purpose.

Text Color

The color property is used to color the HTML text. In CSS, color options can be given by three different ways:
  • HEX value - #000000
  • RGB value - rgb(0,0,0)
  • Color name - Black
For example:
<!DOCTYPE html>
<html>

<head>
<style>
h1.color {color:red;}
p.color {color:blue;}
</style>
</head>

<body>
<h1 class="color">This is a Heading</h1>
<p class="color">This is a paragraph</p>
</body>
</html>

Direction

The direction property is used to denote the text direction or the direction in which the text is written.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.dir {direction:rtl;}
</style>
</head>

<body>
<p>This paragraph is in default direction.</p>
<p class="dir">This paragraph is from right to left.</p>
</body>
</html>

Letter Spacing

The letter-spacing property is used to increase or decrease the space between the characters in a text.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
h1.letter_space {letter-spacing:3px;}
h2.letter_space {letter-spacing:-3px}
</style>
</head>

<body>
<h1 class="letter_space">This is a Heading</h1>
<h2 class="letter_space">This is a Heading</h2>
</body>
</html>

Line Height

The line-height property is used to specify the height of each line.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.small {line-height:50%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p class="small">This is a paragraph
This is a paragraph
This is a paragraph</p>
<p class="big">This is a paragraph
This is a paragraph
This is a paragraph</p>
</body>
</html>

Text Align

The text-align property is used to horizontally align the text.

For example:

<!DOCTYPE html>
<html>

<head>
<style>
h1.align {text-align:left;}
h2.align {text-align:center;}
h3.align {text-align:right;}
</style>
</head>

<body>
<h1 class="align">This is a Heading</h1>
<h2 class="align">This is a Heading</h2>
<h3 class="align">This is a Heading&lt/h3>
</body>
</html>

Text Decoration

The text-decoration property is used to specify the decoration added to the element.

For example:

<!DOCTYPE html>
<html>

<head>
<style>
h1.decoration {text-decoration:overline;}
h2.decoration {text-decoration:line-through;}
h3.decoration {text-decoration:underline;}
</style>
</head>

<body>
<h11 class="decoration">This is a Heading</h1>
<h21 class="decoration">This is a Heading</h2>
<h31 class="decoration">This is a Heading</h3>
</body>
</html>

Text Indent

The text-indent property is used to specify the indentation of the first line of the text.

For example:

<!DOCTYPE html>
<html>

<head>
<style>
p.indent {text-indent:50px;}
</style>
</head>

<body>
<p class="indent">CSS is used to control the style and layout of multiple 
web pages. It defines how to style HTML elements. An HTML element can be 
 displayed with different styles using CSS.</p>
</body>
</html>

Text Shadow

The text-shadow property is used to add shadow to text element.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
h1.shadow {text-shadow:5px 5px #ffffff;}
</style>
</head>

<body>
<h1 class="shadow">This Heading have Shadow</h1>
</body>
</html>

Text Transform

The text-property is used to specify the capitalization of the text element.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is a Paragraph</p>
<p class="lowercase">This is a Paragraph</p>
<p class="capitalize">This is a Paragraph</p>
</body>
</html>

Unicode Bi-Directional Text

The unicode-bidi property is used along with the direction property to set whether the text should be overridden to support multiple languages.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.dir_bidi {direction:rtl;
unicode-bidi:bidi-override;}
</style>
</head>

<body>
<p>This paragraph is in default direction.</p>
<p class="dir_bidi">This paragraph is from right to left.</p>
</body>
</html>

Vertical Align

The vertical-align property is used to set the vertical align of a text element.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
img.top {vertical-align:top;}
img.bottom {vertical-align:botoom;}
</style>
</head>

<body>
<p>This <img class="top" src="Birds.jpg" />paragraph is  at the top of the 
 image.</p>
<p>This <img class="bottom" src="Birds.jpg" />paragraph is  at the bottom
  of the image.</p>
</body>
</html>

White Space

The white-space property is used to specify how to handle white spaces inside an HTML document.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.white_space {white-space:nowrap}
</style>
</head>

<body>
<p class="white_space">This is a paragraph. This is another paragraph. This 
 is yet another paragraph and so the number of paragraphs continues.</p>
</body>
</html>

Word Spacing

The word-spacing property is used to increase or decrease the white space between words.

For example:
<!DOCTYPE html>
<html>

<head>
<style>
p.word_space {word-spacing:20px}
</style>
</head>

<body>
<p class="word_space">This is a paragraph.</p>
</body>
</html>

0 comments:

Post a Comment