![]() | BASIC TEXT FORMATTING! | ![]() |
Sponsor Links Free Image Hosting Your source for free image hosting - upload your images! Poker Strategies and Tips Poker, online poker, poker terms, poker accessories, poker tips and tricks. Photoshop Tutorials Over 3,000 tutorials for Photoshop, Flash and 3DS Max! 6,000 Free Fonts Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com Buy Website Visitors 1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed. Reading Tarot Cards Videochat with certified tarot readers & psychics - unlimited tarot cards readings! Affiliate Software Start an affiliate program and design to maximize affiliates' productivity PPC Search Engine Low cost advertising for your website! Technical Service Provider Your number one source for computer repairs and network solutions | LESSON 1-03-04: Changing Text Size, Text Color & Font Face Web Design Lessons > Lesson 1-03-04: Changing Text Size, Text Color & Font Face
In this lesson of our free online web design course, we are going to add more flavor to our text by changing its color, size and font type. To do that, we're going to use the <font> tag along with "size", "color" and "face" attributes. Copy and paste the below HTML code into your notepad:
As our text indicates, we have created a red text with a size of 5, written in the "Arial" font by using the <font> tag and the "color", "size" and "face" attributes. Now, save your file as HTML and double-click it to open in your web browser. You should get the below output:
The font tag has only these three attributes - color, size and face. Color can be anything from black to white. You can use the name, or the color hex code (i.e. #FF0000,#559A2E, etc.) to indicate the color. The size can vary from 1 to 7, where 1 is the smallest and 7 is the biggest. A Word About Font FacesFont types (i.e. font "faces") are a bit of a grey area - there is a huge number of font faces on the internet, but very few of them can be used effectively; as most font faces can not be found on most end-users' machines. That means, if you use the rare face "Aircut" in your site, many people won't be able to view your site like you do, as they probably do not have the "Aircut" face installed on their computers. To negate this, you can define more than one font face (i.e. substitute font faces) for your text by separating them with a comma. For example you can use <font face="aircut,arial"> and the end user's browser will first look for the font face "Aircut", and if that face is not available, it will use "Arial" instead. The most commonly used font faces are: Times New Roman, Arial, Verdana, Courier, Mono, Serif and Sans-Serif. I generally prefer "Verdana". Setting Attributes Of The <Font> TagNow that we've talked about font faces, let's resume our free online web design course by delving deeper into setting the attributes of the <font> tag. When writing a <font> tag, you don't need to include all three attributes. You can use the <font> tag even if you only want to change the color of a certain text and not the size or the font face, for example. For that you need to include only the "color" attribute:
The output is:
Or you might wish to change the size of a certain text. For that you ought to use only the "size" attribute of the <font> tag:
In this case, our output would be:
Or maybe, you want to change the font face of your text. For that purpose, you can use the "face" attribute alone:
And we have this output:
You can also use two attributes at the same time:
To get an output like this:
Anyway, I am sure you get my point... :) Sidenote #1: Check out my web design resources page to download a superb eBook! Sidenote #2: If you enjoyed this lesson, please link to it :) Our basic text formatting lesson is over. Proceed to the next lesson of online web design course to learn about web colors and color hex codes.
|