SmartGirl
Newsletter Resources Search Site Map Contact
Speak Out Express Yourself Spread the Word Issues
Bookmark and Share
Home > Express Yourself > HTML Tutorial > 4. Make it pretty
    HTML Tutorial  
   

Steps
  1. Overview
  2. About the Internet
  3. Hello, HTML
  4. Make it pretty
    1. Changing the background
    2. Coloring the text
  5. Adding pictures
  6. Fancy layouts
  7. Show it to the world
Step 4. Make it pretty

Coloring the text

The black text on the orange background is a little Halloween-ish. No fear! We can change the color of the text similar to the way we changed the background color. For this, we use the <font> tag again. Here's how:

<font color="purple">This text is purple.</font>
will show up in the browser as
This text is purple.

As we mentioned earlier, there are other attributes to the <font> tag such as face, which changes the style of the text, and size, which can have a value between 1 (the smallest) and 7 (the largest).* Note that this is the opposite of the heading tags where <h1> was the largest size and <h6> the smallest. Confusing much? :)

<font face="Comic Sans MS" color="purple" size="6">I'm the Jolly Purple Giant.</font>
will show up in the browser as
I'm the Jolly Purple Giant.

Change the color of your text in the HTML Playground so that it stands out more on the orange background. Go back to the last lesson for color codes and names by clicking on the Previous button below.

*FYI: Some of you might have noticed that we're using the <font> tag to change the size of the text instead of one of the heading tags like we did earlier. This is because when you use the heading tags, the browser leaves empty space above and below the text of the heading to make it stand out more. That doesn't happen with the <font> tag. Experiment in the HTML Playground and see for yourself!

 
Previous   Next


HTML Playground
Your Code


The Results

 
   
    SecretBuilders Crush Barometer Fortune Teller Smart Scope Dream Dictionary Mash Quiz