Learning HTML for Kids!

What’s on this page?


Home Table of Contents The Code Resources About 

Chapter Twelve

Styles Part II

There are two more style elements I want to cover: text-align and background-color.


You can tell your browser to align your text to the right, to the center and to the left*. It’s all done with the text-align command.

It’s pretty simple. Let’s add it to the code we’ve done so far.

Step One

Open style.html. Add the highlighted code listed below.

<!DOCTYPE html>
<h1 style="color:red;font-size:15px;
text-align:right;">Headline One</h1>
<h1 style="font-family:Arial,Helvetica,sans serif;font-size:40px;
text-align:center;">Headline One</h1>
<h1 style="color:blue;font-family:Arial;font-size:60px;
text-align:left"> Headline Two</h1>

*Note: You really don’t have to enter text-align:left as this is the default alignment.

Step Two

Save the file.

Step Three

Go to where you saved the file and open it.Your browser should look like this. If not, you know what to do–go back and check your code.

Back-ground color

The last style we will talk about is background-color. This goes into the opening tag of <body> like so:

<body style="background-color:coral">

Let’s take the code from the page above and add some background color (see highlighted code). By now you should know how to open your style.html file and make the changes.

<!DOCTYPE html>




  <body style="background-color:khaki">

<h1 style="color:red;font-size:15px; text-align:right;">Headline One</h1>

<h1 style="font-family:Arial,Helvetica,sans serif;font-size:40px; text-align:center;">Headline Two</h1>

<h1 style="color:blue;font-family:Arial;font-size:60px; text-align:left"> Headline Three</h1>



Save the file again and open it up  in your browser to see what it looks like:

If we wanted to change the red title to white, how would you change the code?

Style Syntax

Remember that all those punctuation marks are important when you are writing your code. In the Style attribute, you have to remember:

Remember, one missing mark and your page won’t display properly.

Cascade Style Sheets (CSS)

When I originally wrote this tutorial back in 1998 for my son’s fifth-grade class, we were limited to very specific code to do things. If we wanted to change the look of a page, we would have to mark up each element–line for line sometimes. It was rather tedious (slow).

In the meantime, a group of very smart folks came up with an idea. Why not create a file that contained formatting code that could be used throughout the whole website. Thus, the birth of CSS.

There are three ways to “style” with CSS:


We have already done this in Chapters 11 and 12, by using the style attribute .


You list all your formatting by using the <style> element and placing it in the <head> section of the code.


You can create a separate file and link it to the webpage or website. This is recommended for a multiple-paged website. Keeps things very organized.

For more information on CSS go to the Resources page.

Final Review

Privacy Statement
Learning HTML for Kids
© 1999-2015 by Jill Jeffers Goodell 

Table of Contents 

More Styles




Cascade Style Sheets