XHTML and CSS - text-align, text-indent and Changing Background Color
text-align, text-indent and Changing Background Color
The first thing I want to tech you in this tutorial, is how to properly align text center justified, you can also make text left justified witch it is by default, or make text right justified, first we need a page to work with.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <h3>This is the title</h3> </body> </html>
As you can see the title is on the left side, we don't want the title on the left side so let's make it centered. To center the title, write the element you want to work with in this case that's h3 and then the property, the property we want to change is text-align. You can use the value left, right and center, center is what we're going to be using here.
<html> <head> <title> This is the title. </title> <style type="text/css"> h3 { text-align: center; } </style> </head> <body> <h3>This is the title</h3> </body> </html>
As you can see now the title is centered. Next I'm going to add in some content to show how to use the text-indent property.
<html> <head> <title> This is the title. </title> <style type="text/css"> h3 { text-align: center; } </style> </head> <body> <h3>This is the title</h3> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
Now we will indent the text in the paragraph to do this we need to use the text-indent property, you can indent the text by a percentage or the number of pixels you want to indent the text by, we're going to be using pixels in this tutorial all you need to do to use a percent is use a percent sign rather than px.
<html> <head> <title> This is the title. </title> <style type="text/css"> h3 { text-align: center; } p { text-indent: 25px; } </style> </head> <body> <h3>This is the title</h3> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
Now as you can see your paragraph is indented, next we're going to change the text color and background color of the entire page, to do this we need to edit the body element.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { } h3 { text-align: center; } p { text-indent: 25px; } </style> </head> <body> <h3>This is the title</h3> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
First we'll change the background color, to do this you need to use the background-color property and we are going to set this to blue.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { background-color: blue; } h3 { text-align: center; } p { text-indent: 25px; } </style> </head> <body> <h3>This is the title</h3> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
Now when you view your webpage you'll see that the background is blue and the text is black and hard to see so we need to change the text color to something that we can see better. To do this we need to edit the color property in the body and we can change the color to white.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { background-color: blue; color: white; } h3 { text-align: center; } p { text-indent: 25px; } </style> </head> <body> <h3>This is the title</h3> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
Now as you can see the text is much easier to read.

Page generated in 0.0061 seconds.