Changing Font Attributes in HTML
Tutorial by Charlie
This tutorial will run through how to change the font color, size, face and style using just one tag! It couldn't be easier, so take a quick look.
So you've got a webpage, and let's say your code looks something like what's shown below:
<html> <head> <title>My Page</title> </head> <body> <h1> This is my page title</h1> <p>And here I have a paragraph of text, but I want to change the color of this word...</p> <p>SUPERCALIFRAGILISTICEXPEALIDOCIOUS</p> </body> </html>
And as it says there, you want to change the color of that word. Maybe even change some other attributes for it aswell. We do it with the <font></font> tags. Let's make some red text...
<p><font color="red">My Red Text</font></p>
Or maybe some bold red text...
<p><font color="red">My <b>bold</b> Red Text</font></p>
In the examples above, we used the <font color="red"> attribute to make the text red, then closed it when we'd had enough red text, then we used the <b> tag to make a word bold, and closed that when we'd had enough. Note that when closing the font tag we just used </font> we didn't need to use </font color="red">. Remember also, especially if you're a Brit like me, that HTML uses American spelling of words like color (as opposed to colour) and center (as opposed to centre). You can substitute <b> for <i> if you want italic text instead of bold text, or maybe use both at once! But what about size?
<p><font size="+1">This text will be bigger</font></p> <p><font size="-2">This text will be smaller by a factor of 2</font></p>
That's fairly self-explanatory really, so then we come to what font we have...
<p><font face="verdana">This text is in the font face Verdana</font></p> <p><font face="arial">This text is in the font face Arial</font></p>
There you go, that was pretty simple too wasn't it? As long as your computer has that font installed on it, it will display the text in the font of your choosing. So let's string it all together and make some large, bold and italic green text in the font sans-serif...
<p><font color="green" face="sans-serif" size="+3"><b><i> This is my big green bold and italic text in sans-serif! </i></b></font></p>
Easy! Now you try it out for yourself. When you're done with that, why not learn about HEX codes when choosing colors.
