Among the things that web designers typically want to do with their site is to change the appearance of the text in some way. For example, they may want to change the typeface (ie, font) used, or adjust the size of the text, or more commonly, to put some words in bold or italics. All these things can be easily accomplished in Expression Web.
Please note that this is the third chapter of the Microsoft Expression Web tutorial. If you have arrived here from outside thesitewizard.com, you may want to start from chapter 1, since I will assume that you already know the things previously covered. In addition, those who are completely new to setting up websites should read How to Make / Create a Website as well, since there is more to creating a site than using a web editor.
By the end of this chapter, you will be able to use bold and italics, change the typeface and text size for both the entire web page as well as for individual snippets of text. You will also learn what CSS is, as well as how and when to create and use CSS classes.
If you had accepted the defaults in chapter 1, when you created your home page with the Layout Wizard, your page will be displayed using the Arial font, or if that is not available, Helvetica (which looks similar to Arial), or if the latter is also not available, any sans serif font.
This series of fonts, often specified as "Arial, Helvetica, sans-serif", is used on many sites on the Internet, including this very page on thesitewizard.com that you are reading. This is because it leads to text that is reasonably readable on a computer screen, using fonts that are found on most systems. Specifically, the Arial font is found on Windows, Mac and the iPhone. And on systems without either Arial or Helvetica (eg, Android phones), another sans serif font will be used. For example, on newer Androids, the Roboto font, which looks somewhat like Helvetica and Arial, will probably be used.
However, those who don't wish to use this series of fonts can change it using the following procedure. You should also carry out the steps below if you only want to change the text size (ie, if you want to make the words on your page bigger or smaller).
Open your web page in Expression Web.
Click somewhere in the main content section of the page, to put your text cursor amidst your words. (It doesn't really matter where, but if you find the instruction too vague, click to put the text cursor immediately after the first word in the first paragraph.)
Look at the bottommost panel on the right side of Expression Web. You should see the Manage Styles panel that looks like the picture below.
Notice that the "Manage..." (actually "Manage Styles", but the space is too small for the entire phrase) tab in the panel is the active tab in my picture. If this is not true for yours, click that tab to select it.
The topmost entry in that panel should be a radio box with "body" as the label. Right click "body". That is, move your mouse pointer so that it is over the word "body" and click the right mouse button.
In the menu that appears, click "Modify Style..."
The familiar "Modify Style" dialog box, which you have already encountered in chapter 2, will appear. The "Font" line in the left column should be selected. Look at the right side of the box to find the "font-family" field. By default, as mentioned earlier, the "Arial, Helvetica, sans-serif" series of fonts should be listed there (unless you have changed this in the Layout Wizard when you created your home page in chapter 1).
Click the drop down arrow for that box to see a list of possible choices that you can put into the field, and select the font or series of fonts you want. By "series of fonts", I mean the items that list a number of fonts in a single line, like "Times New Roman, Times, serif". They operate the same way that "Arial, Helvetica, sans-serif" do, that is, the first font in the list is used if it's available, else the next one is, and so on. Such lists allow you to specify alternatives if a particular font is not installed on your visitor's computer, thus ensuring (as far as it is possible) that your page looks more or less the way you want it to even on a different system.
Warning: be careful about choosing fonts that only you (and few others) have. For example, if you have gone to one of the many free fonts sites around on the Internet and installed some fancy font that you have fallen in love with, Expression Web will faithfully list it as a separate entry in this drop down box. However, it will probably be a mistake to select that font, since your visitors will be unlikely to have it installed on their computers. If you choose a series of fonts (or even worse, just one font), none of which your visitors have, their web browser will use the system default font (which varies from system to system and user to user).
If you want to change the size of all your words on the entire page, you can do so with the "font-size" field.
Although Expression Web allows you to use different units to specify the font sizes, I recommend that you stick to using either percentages ("%") or the "em" unit. (If you don't know what "em" is, use percentages.) The other units (like points, centimetres, inches, etc) are more appropriate for the printed page.
By default, since nothing is specified in the font-size field, your page defaults to "100%". As such, if you want the words to be (say) 20% bigger, you will have to change the font size to "120%". Or, if you want them smaller by (say) 10%, you will need to set it to "90%".
Put the number (but not the "%" unit) into the empty field beside "font-size". When you do that, the drop-down box beside the field will be activated, allowing you to select "%" (the last entry). As mentioned above, even though you may be familiar with units like "pt" from your use of word processors like Microsoft Word (which are meant for the printed page), I suggest you stick to things like "%" and "em" for websites.
Click the "OK" button to dismiss the dialog box.
The page should show the change immediately. If the effect is not what you intended, you can go back and redo the above steps to modify the font or text size till you are satisfied.
Look at row of tabs near the top of the Expression Web window. Notice that there is now an additional tab beside your "index.html" tab, namely, the "styles.css" tab. The changes to your font was made directly to the "styles.css" file created in chapter 1. This means that when you save your work in this chapter, you not only have to save the "index.html" file, but you also need to save "styles.css", otherwise the font changes you make here will be lost.
The simplest way to make sure that you save all your work before quitting, no matter how many files you open, is to use "File | Save All" from the menu instead of the usual "File | Save" that you did in chapters 1 and 2.
Do that now. That is, click "File" from the menu bar, followed by "Save All" in the drop-down menu that appears. I recommend that you always use this method to save your work from this point onwards. Starting from this chapter, some of the things taught will involve Expression Web modifying both the "index.html" and "styles.css" files. In fact, as the tutorial series progresses, you will add yet another CSS file and many other HTML files as well (unless you intend your website to be a one-page wonder), so you might as well get used to invoking "File | Save All" so that you don't accidentally forget to save something.
So far, we have treated the changes you have made to your web page as though they were something accomplished by Expression Web. For example, we centred ("centered" in US English) your logo in chapter 2 by invoking a dialog box and changing a field here and there.
In reality, most of the visual effects on a web page are produced using a set of instructions known as "Cascading Style Sheets", or "CSS" for short. Under the hood, when you did all the clicking and changing of values in the various fields, Expression Web inserted certain CSS rules into your page. These rules are simply lines of instructions meant for web browsers. They are "rules" in the sense that browsers are required to "obey" them when displaying your site.
Think back to how you centred the logo earlier. You selected your logo, and then clicked the style line in the tag properties to invoke the "Modify Style" dialog box. Then you set the left and right margins for the logo to "auto". In so doing, you were actually (indirectly) creating CSS rules that compel web browsers to put an equal amount of space on the left and right of your logo. This in turn caused it to be centred, since anything with the same amount of space on both sides is effectively in the centre.
Notice that these rules did not affect any of the other pictures on your page. This is because we deliberately invoked the Modify Style dialog box only for your logo. We did this by selecting the logo, and only modifying the "style" line for the logo's own "Tag Properties".
When you modified the font or text size for your entire page, we did things differently. Instead of invoking the "Modify Style" box from the "Tag Properties" panel for a specific paragraph, we invoked it for "body". On a web page, "body" is the all-encompassing container into which the content of your page is placed. If you set a rule for "body", it applies to everything on your page. That's why the settings you made earlier changed all the text on the page, even though you didn't select anything with your mouse before calling up "Modify Style".
But what if you want some parts of the page to have a larger font size, or perhaps even a different font altogether? This is possible too, since the rules you set for those specific portions will override the general rule that is applied to the entire page.
The way to do this is to create a CSS rule that sets (for example) the new font. Then specify that the rule is to apply to everything having a certain label. For example, you can say that your rule is to be used for everything that is labelled "sectionheading". Once this is done, go through your page and mark all the (say) section titles with the label "sectionheading". The web browser will then use the rule for "sectionheading" (which specifies the new font) for everything so labelled.
This type of "label" is referred to as a class in webmaster lingo. It is a "class" in the sense of "category" or "classification" (and not "classroom"). When you label something on your page with that class, you are saying that it belongs to the category of things to which the rules of that class apply.
Don't worry if you find the previous 2 paragraphs difficult to understand. I'm merely giving you an overview of what you are about to do in the next section. Once you have tried it out, what I said will become clearer.
Let's say that you want all instances of your company name to be set in the Comic Sans font and be 25% larger than the rest of your words. Note: this is just an example. I'm sure you have something more sensible in mind that you want to change. If so, do that instead of modifying the font for the company name. I have to use something concrete for my example here, otherwise the instructions below will be too vague to be useful.
Click "Format | New Style" from the menu. This brings up a dialog box with the title "New Style".
Since we are changing the appearance of your company name, we will start by creating a class
(category) called "companyname". Type ".companyname" into the "Selector field. Do not type
the quotation marks, and don't forget to start the name with a full stop ("period"). Note that
you must begin with a full stop to signal that you are creating a rule for a class.
Incidentally, if you are not changing your company name, but some other thing, make up some other
class name that describes what you are modifying, eg ".copyrightnotice" if you are changing the
font for your copyright notice, or ".sectionheading" if you
are changing the size of the section headings. The first letter after the full stop must be a
letter of the alphabet. The subsequent characters can be either letters or numbers, but cannot
be punctuation marks or the space character, so, for example, ".copyrightnotice" is acceptable
but ".copyright notice" is not.
Now it's time to make the rules you need for this class. If you want to change the font, click the down arrow for the "font-family" field and select the appropriate font. If you want to adjust the font size, enter the new size in the "font-size" field and change the unit of measurement beside it to either "%" or "em". If you don't know what these fields mean, go back and reread the section on changing fonts and text sizes for your entire page. They are the same fields.
When you are done, click the "OK" button. Nothing will appear to change on your page.
That's okay, because you have only created the rule(s) for a class called ".companyname" (or
whatever you called it), but you haven't actually assigned that class to anything yet.
Now drag your mouse over the text you want changed, highlighting it. For example, if you really wanted to change the font for your company name, drag your mouse over its first occurrence in your paragraph to select it.
Look at the "Manage Styles" panel at the bottom right of the Expression Web window. This is the one you used earlier to select "body". This time, though, click the "Apply Styles" tab to select it. (It's next to the "Manage Styles" tab.)
You should see a section in the panel with the heading "Current page", and your bespoke class listed under it (see picture).
Click that class. (In my case, this is ".companyname", as you can see from the picture above.) Note: click the class name itself, and not the down arrow that appears beside it when your mouse hovers over the area. The result should be immediate, and the selected text will change its appearance accordingly.
Repeat the procedure for the other instances of your company name (or whatever it is you want to change).
Note that you do not have to recreate the same rule again. The rule you made earlier still exists and will apply
to everything of that class. Just select the relevant text on the page, and click ".companyname"
(or whatever your class is called) in the "Apply Styles" panel.
When you are done, save your work.
At this point, you may be wondering why you did not have to create a class for the rules you made for your logo and other pictures in chapter 2, or the font change for the entire page at the beginning of this chapter.
CSS doesn't really require that you create a class for the stuff that you want to set rules for. Classes are meant for your convenience. They are handy when you have multiple items on your page for which you want the same rules applied. For example, if you wanted all instances of your company name styled in a certain way, and the name appears all over your page, separated by other words that use a different font, classes come in extremely handy. Instead of individually setting rules one by one for each instance, you can create a class that has all those rules. Then assign that class to every instance of your company name.
How is this better than going to each occurrence of the company name and individually making rules for each instance separately (the way you did for your pictures in chapter 2, without creating a class)? After all, you still have to go through your entire page to mark each occurrence with the class name.
Firstly, if you have multiple rules (eg, changing the typeface as well as the text size) that you want to make to each occurence, using classes allow you to set the rules only once, saving you the labour of making the same set of rules repeatedly throughout your page. Secondly, it puts the rule(s) in a single location where it can be changed easily. To understand the value of this, ask yourself what happens if you decide to use a different font from what you set earlier. For example, let's say you have a change of heart, and decide that Comic Sans really isn't an appropriate font for a company's name since it lacks gravitas. With a class, all you need to do is to change the rule for that class, and everything belonging to that class on your web page will automatically appear in the new font without any further effort from you. You don't have to go through your entire page again the way you would if you had set the rule piecemeal for each occurence of the company name.
Note that you don't need to worry about creating a class that is used by only one item on the page. There is nothing prohibiting that. For example, you may be wondering if it's okay to create a class that makes the copyright notice in your footer appear in small print, since the only thing using that class is the notice. As I said, that's fine.
Technically, there are other facilities in CSS and HTML that are meant for things that are used only once. For example, we used one such facility for your pictures in chapter 2 and you will see another method used in chapter 4. But like all things in CSS, use of any feature is optional. And there's more than one way to skin a cat.
Now that you understand the usefulness of classes, we have to address the situation where you need to make changes to an existing class. For example, after setting the font for your company name to Comic Sans and text size to 125%, what if you now want it in Times New Roman and the size at 100%?
Click to put your text cursor somewhere in the midst of the words that belong to the class you want to change. If you have multiple items on the page with that class name, you can put your text cursor into any one of them. It doesn't matter which, as long as they belong to that class.
Click the "Manage Styles" tab in the bottom right panel to re-enable the "Manage Styles" tab. (Remember that you switched to the "Apply Styles" tab earlier, so you need to switch back.)
Scroll down the "CSS Styles" section of the panel to locate the name of the class you want to modify. You can do this by clicking the scroll bar on the right of the panel. The class you created is probably near the bottom, located under the "Current Page" subheading, so you will likely have to scroll all the way down.
Right click the name and select "Modify Style..." from the menu that appears.
The "Modify Style" dialog box will appear. Make sure that the correct class is stated in the "Selector" field. If it is not, it means you accidentally right-clicked the wrong line in the "Manage Styles" panel. In such a case, click the "Cancel" button and go back to the previous step and try again.
Make the changes to the font and font sizes as need.
Click the "OK" button when you are done. The font and/or text size changes should be immediate, and every part of the page that belongs to that class will show the change.
It is not necessary to create a class just to put words in bold or italics. You can do it in pretty much the usual way you do in other Windows software.
Simply select the text that you want to emphasize (eg, by dragging your mouse over it), then click the "B" or "I" buttons on the toolbar just underneath the main menu (see picture). The "Ctrl+B" and "Ctrl+I" keyboard shortcuts available in word processors also work here. (If you don't know what the previous sentence means, just use the buttons on the toolbar.)
You may also notice that there is a "U" button on the toolbar, which when clicked, causes the selected text to be underlined. In general, try not to underline text as a means of emphasis, since, by convention on the web, underlined text is used to indicate a clickable link.
Once you have saved your work, test your page in a web browser as before.
In the next chapter, you will learn how to change the background of your web page. This includes modifying its colour as well as (optionally) using a picture as a backdrop.
Copyright © 2016-2017 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 Expression Web 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 Fonts, Text Size and Use Bold and Italics in Expression Web
