Chapter Twelve

Styles Part II

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

Text-align

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>
  <head>
    <title>Styles</title>
  </head>
  <body>
<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>
  </body>
</html>

*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:

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>

<head>

<title>Styles</title>

</head>

<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>

</body>

</html>

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:

the equal sign after the word style (=),
to include your value (color, size, etc) in quotation marks (“),
to separate each command with semi-colons (;),
to end the opening tag with an angled bracket (>).

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:

Inline

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

Internal

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

External

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

More Styles

style=

text-align:

background-color:

Cascade Style Sheets

Privacy Statement Managing Files

Create Folders

Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Chapter 6 Review #1 Chapter 7 Chapter 8 Chapter 9 Review #2 Chapter 10 Chapter 11 Chapter 12 Final Reivew