Techcss
Untitled Document

Text formatting using CSS

Dealing with the text in HTML was highly time taking job to styling the text with different tags at different places. so using CSS the text styling or formatting became a very easy job with methodical CSS formatting.

Handling the text in CSS involves with the list of following attributes:


Color

We can set the colour of text using "color:"
With CSS the color value can be coded by Hexadecimal Value [ex: '#cdcdcd'], RGB [ex: 'rgb(167,40,0)' ] or by direct color[ex: 'red']


Letter spacing

In CSS "letter-spacing" is used to maintain the space or gap between two letters.


Text Aligning

In CSS we can align the text using the "text-align" and the possible values are


Text Decoration

In CSS we can decorate the text in a meaningful display using the "text-decoration: value;" and the values may be as following list.


Text Indentation

To indent the first line of a paragraph in HTML document, the "text-indent:" is used in CSS.

The values of indentation can be specified in length or percentage.

Text indentaion does not work with <span> tag.


Text Transform

To transform or convert text to uppercase(capital letter), to lowercase(small letter), to capitalize(the first letter of sentence must be in capital letter) we can use "text-transform" in CSS styling.


White Space

You can control the whitespace in an (X)HTML element with the following:


Example: Text Formatting by CSS
<html>
<head>
<style>

</style>
</head>

<body>

<p>
<span style="color:#FF9900">This is a text color example in CSS coding. </span>
</p>
<p>
<span style="letter-spacing:8px">This line is the example of letter spacing
in css</span>
</p>
<p><span style="text-align:center">This paragraph is aligned using CSS. Alignment
can be 'left', 'middle', 'right' or 'justify'  although this paragraph is aligned
center.</span></p>
<p><span style="text-decoration:line-through">This text is decorated as line 
through</span></p>
<p style="text-indent:50px">This is a paragraph with indented first line.This is
a paragraph with indented first line.This is a paragraph with indented first 
line.This is a paragraph with indented first line.This is a paragraph with 
indented first line.This is a paragraph with indented first line.This is a 
paragraph with indented first line.This is a paragraph with indented first 
line.This is a paragraph with indented first line.</p>
<p><span style="text-transform:uppercase">This text is transformed to uppercase</span></p> </body> </html>
Output:

This is a text color example in CSS coding.

This line is the example of letter spacing in CSS

This paragraph is aligned using CSS. Alignment can be 'left', 'middle', 'right' or 'justify' although this paragraph is aligned center.

This text is decorated as line through

This is a paragraph with indented first line.This is a paragraph with indented first line.This is a paragraph with indented first line.This is a paragraph with indented first line.This is a paragraph with indented first line.This is a paragraph with indented first line.This is a paragraph with indented first line.This is a paragraph with indented first line.This is a paragraph with indented first line.

This text is transformed to uppercase