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 1 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.
Near the top of the BlueGriffon window, there is a line with buttons that say "! !! C B I U",
and a drop-down box containing the words "Variable width" somewhere in the 3rd row (if you count all the
rows below the menu bar as toolbars).
To put your selected text in bold, click the "B" button on the toolbar. To put it in italics, click
the "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" 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
appearance.
Select the text the same way you did earlier.
Notice that there are two circles in the lowest toolbar at the top of BlueGriffon. One has a black spot in the centre, and the other a white one. 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.
If you want to change the default text size of the words in every paragraph, click to put your text cursor somewhere in one of the paragraphs in the right column (ie, not in your title or section headings, but among the normal words).
Click "Panels | Style Properties" from the menu. A panel with the title "Style Properties" will appear.
At the top of the panel, you should see a drop down box for the "Apply styles to" field. Click the down arrow and select "All elements of the same type". A text box will appear next to the drop down box, and it should say "p". (If it doesn't say "p", it means you did not put your text cursor in one of the paragraphs in your right column. Click the "x" button at the top of the Style Properties panel to close it and return to the first step and try again.)
Click the line that says "General" to expand the section under it. (Note: that line acts as a sort of toggle. If you accidentally click it while it is expanded, it will collapse. If so, just click it again to expand it.)
Notice that there is a field called "Size" in the section below. Click the drop down arrow to see some of the options available. You can use predefined sizes like "Small", "Medium", "Large" (etc) or you can select custom sizes like "0%". Doing the latter will cause all the text to alarmingly disappear from your page. Don't worry, your words are still there. They are just 0% in size at the moment. To fix this, click to put your cursor in the text field and change the "0%" to a more appropriate number, where "100%" means the current size of the font (before you messed with it), "120%" means that the text will become 20% larger than it currently is, and "90%" means that the text will shrink by 10%.
Important: do not put any space between the number and the unit of measure. Values like "120%" and "1.2em" are correct, while "120 %" and "1.2 em" are not. In addition, I suggest that you stick with relative units like "%" and "em" rather than units like "pt" which is often used for the printed page. If you are unfamiliar with the units provided, stick with "%" which is easy to understand, and works everywhere.
You can now close the "Style Properties" panel, either by clicking the "x" button at the top of the panel, or by clicking "Panels | Style Properties" from the menu.
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 colour of your web page.
Copyright © 2012-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »
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 https://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 or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Change the Fonts, Text Colour and Font Size on Your Website using BlueGriffon
