CSS - Text Formatting
Here you learn how to format text using CSS.
Text Decoration
With text decoration you can format the text to have an underline, overline, or a line through it.External CSS File
This your external CSS file named "stylesheet.css".|
.text1 { text-decoration: line-through; } .text2 { text-decoration: overline; } .text3 { text-decoration: underline; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="text1">This crossed-out text.</span><br><br> <span class="text2">This overlined text.</span><br><br> <span class="text3">This underlined text.</span><br><br> </body> </html> |
||
This how it looks
|
This crossed-out text. This overlined text. This underlined text. |
||
Text Indent
External CSS File
|
.text4 { text-indent: 30px; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="text4">This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels.</span><br><br> </body> </html> |
||
This how it looks
|
This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. This text is indented by 30 pixels. |
||
Text Align
Text-align formatting allows you to align the text four differnet ways - left justified, right justified, center justified, and justified (aligned to both left and right).External CSS File
This your external CSS file named "stylesheet.css".|
.text5 { text-align: right; } .text6 { text-align: center; } .text7 { text-align: justify; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <p class="text5">This text is right aligned. This text is right aligned although it is not popular. This text is right aligned. This text is right aligned although it is not popular.This text is right aligned. This text is right aligned although it is not popular. This text is right aligned. This text is right aligned although it isn't popular. This text is right aligned.</p><br><br> <p class="text6">This text is center justified.<br>The text in this example is center justified.</p><br><br> <p class="text7>This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right.</p><br> </body> </html> |
||
This how it looks
|
This text is right aligned. This text is right aligned although it is not popular. This text is right aligned. This text is right aligned although it is not popular.This text is right aligned. This text is right aligned although it is not popular. This text is right aligned. This text is right aligned although it isn't popular. This text is right aligned. This text is center justified. This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right. This text is justified - which means it is aligned to both the left and right. |
||
Word and Letter Spacing
The most popular use for letter spacing would be for headers that use a very big font. When big fonts are used the letters sometimes look too far apart and some designers like to format them so that they are closer together.External CSS File
This your external CSS file named "stylesheet.css".|
.text8 { word-spacing: 10px; } .text9 { letter-spacing: 4px; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="text8">This text has word spacing of 15 pixels.</span><br><br> <span class="text9">This text has letter spacing of 4 pixels.</span><br> </body> </html> |
||
This how it looks
|
This text has word spacing of 15 pixels. This text has letter spacing of 4 pixels. |
||
Text Transformation
The only use for this I can think of is if you have a form where users submit data and you want to output it on the page and make sure the output is formatted in a specific way.External CSS File
This your external CSS file named "stylesheet.css".|
.text10 { text-transform: capitalize; } .text11 { text-transform: uppercase; } .text12 { text-transform: lowercase; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="text10">This text is converted to all capitalized first letters.</span><br><br> <span class="text11>This text is converted to all uppercase.</span><br> <span class="text12>This text is converted to all lowercase.</span><br> </body> </html> |
||
This how it looks
|
This text is converted to all capitalized first letters. This text is converted to all uppercase. This text is converted to all lowercase. |
||
Bookmark this page:
|
