One of the things you may want to do as you develop your website is to modify the appearance of the text on your web pages. For example, you may want to use a different font for the words, or you may want to put some text in bold or italics. Or perhaps you may even want to change their colour ("color" if you use US English). This chapter shows you how you can do these things using the BlueGriffon web editor.
Please note this is the third chapter of the BlueGriffon tutorial series. If you are not familiar with BlueGriffon, you may want to start from chapter 1 since I will assume that you already know the things that I've covered in the previous chapters. In addition, if you are completely new to web design, it may be best to begin with the article How to Create / Make a Website.
By the end of this chapter, you will be able to change the appearance of the text on your web page. This includes changing fonts, using bold or italics, and modifying the colour of the text.
Select the text that you want to place in a different font. To do this, drag your mouse over the text to highlight it. For those who have forgotten what "dragging your mouse" means, move your mouse pointer so that it is just before the first character of the text to be selected, then click your left mouse button. Continue to hold down that button and move your mouse over the other words on your page till you reach the end of the portion you want to change. As you move your mouse, you will notice that the text is highlighted, indicating that it has been selected. Release your mouse button when you reach the end of the snippet you want to modify.
As soon as you release your mouse button (and perhaps even while you're dragging your mouse), BlueGriffon will pop-up a small window. This window disappears after a while, and will also disappear if you perfom any other action on your page. It's actually possible to change fonts and do other things with your selection directly from this window, but since it's transient and may disappear before you can use it, we will ignore it for now and use a different method to change your fonts. In other words, if you see this pop up window, just ignore it. (You don't have to do anything to it. Just pretend it's not there. It'll go away by itself.)
Those who are observant will have noticed that most items in that pop-up window can be found in the three toolbars
near the top of the BlueGriffon window. In particular, the "
! !! C B I U" characters can be
found in the 2nd row of toolbars just under the menu bar. The drop-down box containing the words "
can be found in the 3rd row (if you count from the top).
To put your selected text in bold, click the "
B" button on the toolbar. To put it in italics, click
I" button. In fact, as you will probably remember from chapter 2, you can hover your mouse pointer
over any of those buttons to get a pop up tooltip with a short description of what the button does.
To change the font of the selected text, click the drop down box that currently says "Variable width". If none of the drop-down boxes say "Variable width", move your mouse pointer over every drop-down box till you come to one that has a tooltip of "Choose a font".
The drop-down box will expand, showing you all the fonts that are currently installed on your computer. Beware, however, of choosing unusual fonts that only you (and a relatively few people in the world) have installed. When you use a certain font on your page in this way, your font does not actually get uploaded to your website. All it does is to insert the name of the font you choose into your page. If you specify a font that your visitor does not have, their web browser will display your page in some default font (typically Times New Roman).
If you want to choose fonts that the majority of computers in the world have, select one of the 3 entries in the 2nd section near the top of the drop-down menu: that is, the section that says "Helvetica, Arial", "Times New Roman" and the "Courier". These are standard font selections that webmasters regard as safe bets since they are present on all Windows and Mac computers.
By default, your page uses "Arial, Helvetica, sans-serif". That is, if your visitors have the Arial font on their computers, the text on your page will be displayed in that font. Failing that, your page will be shown using the Helvetica font (which looks like Arial to the untrained eye). If even that is not available, the web browser will use any sans-serif font available on that person's computer. This is the same series of fonts that thesitewizard.com uses on its pages as well, since it produces the same appearance (font-wise) on nearly every Windows and Mac computer in the world, and creates an acceptable equivalent on Linux computers as well.
The moment you choose a font or click "
B" or "
I", your text should immediately change its
If you want to change the colour of your text, you will have to use the pop-up window that you previously ignored in the section above.
Select the text the same way you did earlier.
The pop-up window will appear when you complete your selection. This time, don't ignore it. Notice that there are 2 circles at the rightmost edge of the pop-up window. If you hover your mouse over the left circle, you will see a tooltip that says "Foreground". Clicking this circle will open a colour selection dialog box. Click the colour you want, followed by the "OK" button. The text you selected will change colour immediately.
Incidentally, the right circle in the pop-up window allows you to change the colour of the background behind your text. However, this will only change the background of the part of the page containing the text that you have selected, so don't use this method if you want to change the background colour of your entire page. I will show you a different method of changing the background in the next chapter.
For those whose reflexes are slow, and the pop-up window disappears before you can click the "Foreground" circle, just select the relevant piece of text again. This will cause the window to appear again. Yes, I know, a transient pop-up window is not ideal for beginners who are not accustomed to how things work (or those with physical handicaps), but as far as I can tell, there is no other provision in BlueGriffon's graphical user interface (at least in version 1.5.2) for the beginner to invoke the colour picker. That is, the foreground and background circles do not appear in the toolbar the way the font selection does.
When you're through with your modifications, save your page, start up FileZilla,
and publish your
index.html page as you did in the previous chapters.
As you should always do when completing a chapter in this tutorial series, start up your web browser and visit your website to make sure that your web page appears as it should. This will allow you to see if your site actually appears correct in a real web browser. Don't rely on the appearance you see in BlueGriffon (or, for that matter, any other web editor); the primary function of a web editor is to help you design web pages. They are not full-fledged web browsers and do not behave 100% like a web browser.
If you have used a font other than the default font, or one of "Helvetica, Arial", "Times" or "Courier" in the "Choose a font" drop down box, see if you can get access to a different computer and check your website on that machine as well. By "different computer", I mean a computer using a completely different operating system. For example, if you are using a computer that runs Windows, try to find a Mac and check your site there. If you are using a Mac, get access to a Windows machine and test your site from there. Be warned though that this doesn't guarantee that your site will appear the same on all computers, since it's possible that those two machines just happen to have the same extra fonts installed. (This is not as unusual as you may think; certain software, like Microsoft Office, install extra fonts onto the computer. If both computers have the same version of Office, they will have those same extra fonts that other machines don't have.)
In the next chapter, you will find out how you can change the background of your web page, either by additing background images or by changing its colour, or both.
I'm currently in the process of writing the next chapter. If you want to be informed when the chapter is published, please subscribe to thesitewizard.com's news feed. It's free, and no email address or other information is needed. Read this article if you don't know how to do it. Another way is to manually check thesitewizard.com's home page from time to time. I announce all new articles in the "What's New" column of that page.
You are here:
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: