Have Fun!


Text and Font using HTML and CSS in Dreamweaver

    ●  Learn how to add colors to a <p> tag.

Learn About:

<font> tags hex color codes in HTML <style> tags hex color codes in HTML

  •   This tutorial is part of the Art Genre Project and the Fan-Tasitic Web Design Project.

Step #1: Open your Page in Dreamweaver ~

Open your index page in Dreamweaver and hit Split to reveal both code and display views …


Step #2: Big Text ~

Look for some text on your page that's big! (but not one using the h1 tag).

big text website

… and find the code in split view.

big text highligh

Step #2: Size Code ~

Click inside the p tag …

… and hit the space bar.

Step #3: Code Hints ~

Notice the code hints that show up …

code hints

Step #4: Style ~

Start typing the word "style" and notice the code hints complete the code for you …

Step #5: Font-Size ~

Hit the letter f and scroll down to font-size

font size code hint

Choose the  font-size tag and experiment with different sizes …

font size large

Lots of choices!

10px, 12px, 14px, 16px, 18px, 24px, 36px, large, larger, x-large, xx-large, medium, small, smaller, x-small, xx-small, 120%, 150%

Experiment here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small

Step #6: Color! ~

MILLIONS of colors are available for your text!

Go on-line and search for colors, find the HTML color code, and copy the Hex Number.

hex code

Now add the HEX code to the font-size: large code you already wrote. Just click after the size designation, but IN FRONT of " shown below …

cursor right there

… and, lastly, add a semi-colon ;

Type C O L and choose color:

… and paste your HEX code or use the Eyedropper Tooleye dropper tool to select a color from the box provided.

Here is the code so far …

<p style="font-size:xx-large; color:#990000">This text is HEX color #990000.</p>

This text is HEX color #990000.

Step #8: Font Family ~

The next code you need is font-family. Add another semi-colon ; IN FRONT of "

Hit space to bring up the code hints and search for font-family …

font family

… and choose one of the available fonts.

font choose

Step #9: Use a Combination of these Styles ~

Using the above styles, incorporate them into your work:

There are many options available!


This sentence is written in Comic Sans.

But don't use too many fonts

because it’s confusing

and maybe not worth the hassle

but keep trying :)

Last Step: Save and Attach ~

Save, upload your page, attach the link, and continue working …

Other Resources: http://www.tizag.com/htmlT/font.php and http://www.echoecho.com/csslinks.htm and http://www.echoecho.com/csstext.htm