Even if your website is blanketed in graphics, perhaps to the extent that its primary focus is the graphics, you will still have to deal with text. And any time you need to handle text, you'll probably want to know how to do things like change font size, put words in bold or italics, change text colours ("colors" in American English), and even change the font itself. This is the topic of this chapter of the Dreamweaver CS5 tutorial.
For the newcomer who has only just arrived at this page, you may want to start at the first chapter of the Dreamweaver CS 5 tutorial. The current chapter assumes that you have completed all the steps of the previous two chapters, and indeed have all the prerequisite knowledge and skills taught there. (Incidentally, if you are new to making websites, and are here to find out what it involves, the article How to Make / Create Your Own Website: The Beginner's A-Z Guide may be a better starting point.)
By the end of this chapter, you will be able to change fonts, use bold and italics, and modify the size and colour of your text content Adobe Dreamweaver CS5. This chapter also introduces you to Cascading Style Sheets ("CSS") and shows you how you can take advantage of it to style your text.
You have met the term "CSS" in passing before, first when you created a 2 column website from one of Dreamweaver's pre-packaged templates, and then later when you centred your site logo in the middle of your home page.
However, before we move on to the rest of the tutorial series, it's a good idea to get a better understanding of what this "CSS" thing is. Although, theoretically, a visual editor like Dreamweaver insulates you from having to deal with a lot of the technical low-level stuff like CSS, HTML and other such mumbo jumbo, a little knowledge about what goes on behind the scenes as you work goes a long way in helping you work more intelligently and confidently.
Cascading Style Sheets, or "CSS" for short, is the name of the underlying technology that Dreamweaver uses to control the appearance of your website. As you work in Dreamweaver to do things like centre your logo (last chapter), change fonts, text size and colours (this chapter), Dreamweaver actually generates CSS code in the background to do the job.
You normally don't see the actual CSS code created by Dreamweaver. It is automatically inserted into a CSS file called "twoColLiqHdr.css" (if you used the default name in chapter 1) for you. This is the reason why you must always make sure you use "File | Save All" (introduced last chapter) when you make any kind of visual change to your web page. Otherwise Dreamweaver will only save the HTML file (the actual web page) you're currently working on, and not save the CSS file as well. It is also the reason why you need to make sure to click the "Yes" button when Dreamweaver asks you whether it should upload your dependent files during a "Site | Put" (introduced in chapter 1) operation. Otherwise your CSS file on your website will not be published, with the result that any changes to the appearance of your website, however assiduously applied, will not be shown in your actual web page.
The lines of CSS code controlling the appearance of your web page are, unsurprisingly, called "CSS rules". They are rules in the sense that web browsers are obligated to follow those rules in rendering (ie, displaying) your web page. For example, when you centred your logo in chapter 2, you created a rule that indirectly ordered the web browser to put an equal amount of blank space on the left and right of your picture (effectively putting your image in the centre of your page).
CSS rules can be applied to anything on your web page. To make it easier to apply a CSS rule to an element on the web page, we normally label the element we want to change with some arbitrary name. That way, we can easily refer to that specific object by label in our CSS rule. We call such labels "classes" in CSS.
For example, we labelled your site logo in chapter 2 "logo" (by selecting "logo" from the Class field in the PROPERTIES panel), and created a CSS rule to put anything labelled "logo" in the centre of the page. Or, in more accurate technical lingo, we assigned your site logo a class of "logo", and created a CSS rule to centre any picture with a class name of "logo".
Yes, I know. The above paragraph is a bit of revisionist history. The truth is, we actually created the CSS rule for a class named "logo" first. Then we assigned the class to our actual logo. In fact, this seemingly backwards way of working, where we create the rule for a label first, then label the object later, is what we will do in Dreamweaver for the most part, mainly because it makes our job easier.
By the way, the "object" or "element" that I mentioned above can be anything appearing on your web page. It can be pictures, snippets of text, words, whole paragraphs, the left or right columns or even the entire web page. And you can assign many different objects on your website the very same label (class).
Don't worry if the above is a bit confusing. Things will clear up as we actually carry out the procedure below. I just wanted to give you an overview of what we're about to do, as well as an explanation as to why we're doing what we're doing. If you've got a headache trying to visualise what I just said, don't bother (to visualise). Just move on to the next section.
The following steps apply whether you want to change fonts, adjust the size of the text, or change the colour of your words. Note that these steps deal with the changing of your text styles on specific snippets of text or bigger paragraphs of text. If you want to change the default font used on your entire web page, or the entire left or right column, you will find the procedure in a later section (below). However, you will still have to read this section, because those sections don't provide some of the essential background knowledge and skills taught here. (Sorry. But there's just too much information to repeat everywhere.)
Start up Dreamweaver and doubleclick the "index.html" filename in the FILES pane on the right. This opens the home page that you have been working on in the last 2 chapters.
Click "Format | CSS Styles | New...". If you remember the convention used here, this means to click "Format" from the menu bar. Then, when a drop down menu appears, click the "CSS Styles" item. Following this, click the "New..." item in the submenu that appears.
A dialog box, entitled "New CSS Rule", will appear. Select "Class (can apply to any HTML element)" from the drop down box underneath "Selector Type". Do this whether or not it is already selected.
If there is any existing text in the "Selector Name" field, delete it. To do this, just click once in the field, and use your backspace or DEL key to get rid of everything in that box.
We will be entering the name of a class into this field. This "class" is the label that I mentioned earlier. It's the class that we'll be assigning to the pieces of text for which you want the font changes made (whether it is to change the font itself, or change the text size, etc). To make it easier to understand what I'm talking about here, let's suppose that you want to change the font for all your product names appearing on your website. To do this, you can enter a class (label) like "productname" (without the quotes) into this field. Later, you will assign this "productname" class to every instance of product names on your site.
In other words, the name you enter in this field is actually any word of your choosing. You'll have to make it up yourself. The class name should begin with a letter of the alphabet. The rest of the name can contain letters and numbers but must not include any punctuation marks or spaces. For example, "productname" and "welcomemessage" are acceptable names for classes, but not "product name" or "welcome message".
Try to make the name descriptive of the content and not the appearance. For instance, "companyname" is better than "bigarialfont", since in the future, you may decide that your company name should not appear in Arial but in Times New Roman.
In any case, don't spend too much time trying to figure out a class name. It is just a descriptive label for you to use to make font changes and the like. It is not actually displayed in the web browser so you don't need to come up with anything fancy. If you're really stuck and can't think of a name, just use generic things like "subheadings", "productnames", "productfeatures", "welcomemessage" (all without the quotes) and the like.
Once you've decided on a class name, type it into the Selector Name field.
Click the "OK" button.
A new dialog box, with a title of "CSS Rule Definition for .[your class name] in twoColLiqLtHdr.css", will appear, where "[your class name]" is the name you entered into the Selector Name field.
Notice that the right side of this dialog box lets you change many aspects of the fonts on your web page. For example, you can select a font from the "Font-family" drop down box, change the text size from the "Font-size" fields, put text in bold using the "Font-weight" field, put text in italics through the "Font-style" field, and change the colour of your text with the "Color" box. I will discuss each of these items separately in the paragraphs below. Please read what I have to say about these fields before you go wild on a customisation frenzy.
When you click the "Font-family" drop down box, you will notice that each line in the list contains
multiple fonts, such as "Verdana, Georgia, sans-serif".
They are listed this way because not all computers have the same fonts installed. If you select, say,
"Times New Roman, Times, serif", your visitor's web browser will use Times New Roman to display your text
if it's available on that computer. If Times New Roman is not installed in his/her computer, the browser will use the next font
given in the list, which, in this case, is Times. If that is also not available, the browser will use any serif font it can find on
the computer. In other words, web browsers will go down the list, giving the first font priority, and using the next
one on the list only if the previously listed font is not available.
For this reason, if you actually want your web page to be displayed using (say) Times New Roman, you should select the line "Times New Roman, Times, serif" and not the line "Georgia, Times New Roman, Times, serif" even though Times New Roman is listed in both series. Otherwise, your page may end up being displayed using Georgia on most of your visitor's computers (which was not your intention).
Dreamweaver only lists a few series of fonts in its default list. You can add new items to the list, if you wish, by selecting the "Edit Font List...", although you should note that if the font you want is not found in Dreamweaver's list, there is a strong chance that many of your visitors will not have it on their computers. In such an event, your website will only look good on your own computer, but will appear ugly on everyone else's system. For example, if you got the font from my Free Fonts page, it's unlikely that the majority of your visitors will have the same font on their computers. To learn more about choosing fonts for your website, as well as what "serif" and "sans serif" mean, please see Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website.
For the curious, since you're using the two column liquid template, the default font series used for your web page is "Verdana, Arial, Helvetica, sans-serif". And so that you don't have to write to ask me, thesitewizard.com currently uses "Arial, Helvetica, sans-serif". Both these sets of fonts are considered by many webmasters as safe bets since the fonts listed are found practically everywhere.
To change text size, enter a number into the "Font-size" field. For example, you can enter "120" (without the quotes). The adjacent field on the right will immediately be enabled. Click the drop-down box for that field and select the appropriate unit of measure for your new font size, eg "%" for percent. Entering "120%" in this way means that your text will now appear 20% larger than its existing size.
Although you can use other units of measure besides "%", for things like web pages, it's best to stick to using either "%" (percent) or "em". Things like "pt" (point), which you may be familiar from using wordprocessors like Microsoft Word, are better suited to the print medium than to the computer monitor. In case you're wondering, your current text size is regarded as 100%. Setting it to 90% means that it becomes 10% smaller than its current size. Conversely, setting it to 110% means that it becomes 10% larger.
If you want to change the colour of your text, click the square box beside the word "Color". This box is actually a clickable button. A colour picker window will appear, letting you choose a new colour for your text.
Although you can underline any text you want by checking the box here, it's generally best not to underline ordinary text on your web page. By convention, underlined text on web pages is almost universally used only for links, and you will confuse your users if you underline things for emphasis. Use bold or italics to create emphasis instead.
You do not have to create a new CSS rule just to put isolated words in bold or italics. The bold and italics options in the "Font-weight" and "Font-style" fields are meant for instances where you are applying other stylistic changes to your text as well. For example, it is useful if you're changing the fonts for your paragraph headings and want to make the text bold at the same time. If you only want to put certain words in your paragraphs in bold or italics to emphasize those words in a sentence, like this, read the section entitled How to Make the One-Off Bold and Italics Text below specifically dealing with that.
When you've finished with the text style changes, click the "OK" button. This dismisses the dialog box, but nothing will have changed on your web page. This is because you haven't assigned the class to any piece of text yet.
Now select the text you want modified. One way to do this is to drag your mouse over the words to highlight it.
In the PROPERTIES panel at the bottom of the Dreamweaver window, click the drop-down box beside "Class". A box will appear, listing all the different classes that have been created so far. You should be able to find the class you created somewhere in the list. (You may have to scroll up or down that list to find your new class.) Click the class name.
This assigns the class you created to the piece of text you selected. The font change on your web page should be immediate, although if your changes are very small (eg, increasing the text size to 101% from the default of 100%), they may not be sufficiently distinct for you to notice any difference.
Repeat with any other pieces of text that you want to have the same class (and thus also the same text style). That is, highlight another snippet of text that you want to have the same font changes applied, and select the same class name from the "Class" box in the PROPERTIES panel.
You can assign the same class to as many pieces of text on your web page as you wish. For example, if you want every instance of your company name on your web page to have the class "companyname" (with its, say, Courier New font setting), then, one by one, highlight the company name and assign the "companyname" class to that snippet. Repeat for the next occurence of your company name until every instance has the "companyname" class. Every piece of text that has that class name assigned to it will share the same font changes (or size changes or colour changes or whatever) that you made for that class.
If you want a different text style for some other block of text, you'll have to create a new class for it. That is, go back to the step where you used "Format | CSS Styles | New..." and make a new class with the different text style settings (fonts, colours, sizes, whatever).
What if, after doing the above, you have a change of heart about the text style options you've used for your page? For example, what if you decide that Comic Sans wasn't a good choice for your company name after all, and you want Times New Roman instead?
To change the settings you made earlier, click somewhere in the middle of a block of text that has previously been assigned the class you created earlier. Do not select the text — just click to put your cursor somewhere in the middle of that block. Try not to put the cursor at the very first character, in case you accidentally place it outside the block. You can verify that your cursor is in the correct spot by looking down at the PROPERTIES panel. If you do it correctly, the "Class" field in that panel will show the name of the class you want to change.
Now look at the right hand side of Dreamweaver, at the CSS STYLES panel (see picture). Locate the part of the CSS STYLE section
that says 'Properties for ".[your class name]"' where "[your class name]" is the actual name of
the class you created. If your Dreamweaver window (or computer monitor) is too small that you cannot really see much of
that portion, click the scroll bar at the side of that 'Properties for ".[your class name]"' to move its
content up and down. (Note: if your window is big enough so that the entire 'Properties for ".[your class name]"'
section is shown, there will be no scroll bar, since there's nothing more to see.)
If you made a font change for that class, you should be able to see a line in that section that says "font-family" followed by the name of the font you set earlier. If you made other changes, you will be able to see the other properties you set in that section as well, such as font-size, etc.
To modify those fields, just click the value portion of those fields. For example, if you have set the Comic Sans MS font for your class, and have now changed your mind, click the word Comic Sans MS to change it into a drop-down box which you can modify. Actually, you can also doubleclick the word "font-family" to create the same effect. Note: my use of "font-family" here (as well as in the picture) is just an example. If you didn't change the font, but changed the font size instead, you will see "font-size" in that section, which you can doubleclick to make modifiable.
If you want to change the font for your entire web page, you do not have to create a new class just for this purpose. Since your page is based on one of Dreamweaver's pre-packaged templates, you can use the class that Dreamweaver has already pre-assigned to the content of your whole page. All you need to do is to modify this existing class to use the new font.
The simplest way to do this is to click "Format | Font" and select the new font you want.
In the "New CSS Rule" dialog box that appears, select "Class (can apply to any HTML element)" for the Selector Type field.
Remove any existing text in the Selector Name field by deleting it. Then enter "container" (without the quotes) into that field. (Yes, the name of the pre-assigned class is "container".)
Click the "OK" button.
Your entire web page should reflect the change immediately.
If you want to change the font for the entire left or right columns, do the following. We will take advantage of the fact that Dreamweaver has already assigned the class "sidebar1" to the left column, and the class "content" to the right column, for pages based on the particular template that you're currently using.
Click "Format | Font" and select the font series you wish to use.
Select "Class (can apply to any HTML element)" for the Selector Type field.
Delete any existing text in the Selector Name field. Enter "sidebar1" (without the quotes) if you want the font change to be applied to the entire left column. Alternatively, enter "content" (without the quotes) if you want it to be applied to the entire right column.
Click the "OK" button.
Your entire web page should reflect the change immediately.
Sometimes, you may want to emphasize a word or phrase in your content. You do not have to create an entire class just to do this.
Simply highlight the word, phrase or sentence that you want to put into bold or italics. As before, you can do this by either dragging your mouse over the text you want, or holding down the SHIFT key and moving the arrow keys.
Look at the PROPERTIES panel at the bottom of the Dreamweaver window. Notice that there are 2 characters,
"B" and "I" just to the right of the Class fields. These are actually
clickable buttons. If you want your selected text in a bold font, click the "B" button in that
panel. If you want your text in italics, click the "I" button. The changes should be immediate.
Note: if you are an experienced wordprocessor user, the same keyboard shortcuts that you use to make text bold or put it in italics (Ctrl+B and Ctrl+I in Windows) also work in Dreamweaver. If you don't understand this paragraph, don't worry: just stick to clicking the "B" and "I" buttons mentioned above.
Save your web page and its associated CSS file with "File | Save All". (Note the use of "Save All" instead of "Save".) Then publish it to your website with "Site | Put". Remember what I said about the importance of clicking "Yes" when Dreamweaver prompts about your dependent files. Then check your home page in a web browser.
Congratulations! Your home page, now with both graphics and appropriate text styling, is well on its way to being completed. Don't worry, I know it's not finished yet. But it's already developing into something that you can be proud of.
In the next chapter, you will learn how to change the background of your web page. This includes changing the colours of the background or using an image as its backdrop.
Copyright © 2010-2013 by 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 Dreamweaver 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 Colours in Dreamweaver CS5
