Among the things that webmasters find that they need to do from time to time is the task of changing the appearance of text in some way. For example, you may decide that you want to use a different font, make your words appear larger or smaller, change their colour ("color" in US English), or, more commonly, put some words in bold or italics. Dreamweaver provides various facilities that you can use to accomplish these things.
If you have arrived at this article from outside thesitewizard.com, please note that this is the 3rd chapter of the Dreamweaver CS6 tutorial. Those who are new to Dreamweaver may prefer to start at the first chapter. However, if this is the first website you're making, you'll probably find it easiest if you begin with How to Make / Create Your Own Website: The Beginner's A-Z Guide.
By the end of this chapter, you will have learnt ("learned") how to change fonts, text colour and size, as well as put words in bold and/or italics.
So far, we have treated the changes you've made to the appearance of your web page as though they have been something magically accomplished by Dreamweaver itself. For example, in chapter 2, we centred ("centered") your logo by invoking a dialog box in Dreamweaver and changing a field here and there. And then, after a few more flourishes, involving an additional click or two, lo and behold, your logo was centred.
In reality, most visual effects on web pages are produced using a set of instructions called "Cascading Style Sheets", or "CSS" for short. Under the hood, when you did all the hand-waving with Dreamweaver, the latter inserted certain CSS rules into your page. These CSS rules are simply lines of instructions meant for web browsers. They are "rules" in the sense that web browsers are obligated to "obey" them when displaying your site.
When you used the CSS Rule Definition dialog box in chapter 2, you created a rule that essentially said you wanted the left and right margins of anything labelled "logo" to have an equal amount of space. Then you used the Properties panel to label your picture "logo". This caused the labelled picture to be placed in the centre of the page, since anything that has an equal amount of space on its left and right is in effect centred.
In webmaster parlance, these labels are known as classes, and they can be applied to any number of objects on your web page. For example, if you have multiple pictures on your web page, all with the same width as your site logo, you can even label all of them "logo". And they will all end up with the same rules applied to them: that is, they will all be centred. To put it in a more technical way, you can assign multiple elements on your web page the same class. Any rules you create for that class will be applied to all of them.
This sequence of creating some rules for a particular class, and then labelling an object on your page with that class, is in essence what you will need to do whenever you want to change the appearance of anything on your web page. And when I say "anything", I don't just mean pictures but also text and layout. Indeed, the fact that your web page appears to have two columns is the result of CSS rules telling the web browser to arrange things that way.
Those of you who find long lectures soporific will probably be wondering (with a deep sense of dread) why I'm telling you all this. After all, isn't one of the reasons you use a visual editor like Dreamweaver so that you can avoid having to muck around with all this migraine-inducing mumbo jumbo?
While it's true that you can probably get away with not knowing the above, in my experience, webmasters tend to be better off if they have at least an inkling of how their website really works. It makes some of the steps you need to take more logical. This, in turn, leads to fewer mistakes. The background information also helps when mishaps occur, since you'll have at least some idea of what went wrong.
In any case, you'll be creating a number of CSS rules beginning with this chapter, albeit indirectly, through Dreamweaver's menus and dialog boxes. As such, even if you dozed off through most of the above explanation, you'll at least know what this mysterious "CSS" thing is for.
If you've quit Dreamweaver since the last chapter, start it up again and open the home page that you've been working
on since chapter 1. You can do this by double-clicking the "index.html" line in the Files panel.
As mentioned in my brief introduction to CSS earlier, you will first need to create a CSS rule. Do this by clicking "Format | CSS Styles | New..." from the menu. Recall from the earlier chapters that this means to click "Format" from the menu bar, followed by "CSS Styles" from the drop-down menu and "New..." from the submenu that appears.
You will now create a new class using the "New CSS Rule" dialog box that appears. As I mentioned earlier, you can regard this "class" as just a fancy name for a label. You will associate whatever font changes (or colour changes, or text size changes, etc) you want with this label (class), so that when you label some piece of text later on in this chapter, that piece of text will be displayed using the rules you make here.
Click the drop-down box for the "Selector Type" field (the topmost field) and choose "Class (can apply to any HTML element)". If the field already shows that option, just go on to the next step.
Click the single-lined blank space for the "Selector Name" field. This will place the blinking text cursor in the field. You will now need to give a name to the class.
A class name is just some arbitrary name that you make up. For example, if you wanted to use the Times New Roman font for all occurrences of your product names on your web page, you could create a class called "productname" and put a rule that says anything with this class is to be displayed with the Times New Roman font. Then you can search your page to find all instances of your products, and assign those words the "productname" class. This will cause both Dreamweaver and your visitors' browsers to show those words in Times New Roman.
As you may have guessed, you don't actually have to use "productname" for your class. The latter is just an example that I invented for the purpose of this tutorial. Feel free to coin some other name. However, note that all class names must start with a letter of the alphabet. The rest of the name (other than the first letter) can comprise either letters or numbers, but cannot include punctuation marks or spaces. So names like "companyslogan" and "productname" are fine, but not "company slogan" or "product name", since the latter two contain spaces.
It's generally considered good practice to use names that describe the content they are associated with. For example, if your plan is to put all your product names in Times New Roman, it's better to call the relevant class "productname" rather than "timesnewroman". That way, if you change your mind later and want to use Comic Sans for your products, all you have to do is to change the rule associated with the class, and all your web pages that use that class will be automatically updated. If you use "timesnewroman", you'll end up either with an inappropriate class name (where your "timesnewroman" class actually changes the font to Comic Sans), or you'll be forced to go through all your web pages to change the labels (class) to a new one. To put it another way, a name like "productname", which describes the content, is more future-proof than a name like "timesnewroman", which describes the specific appearance (rules).
Anyway, once you've decided on the name, just enter it into "Selector Name" field. Don't waste too much time dreaming up the name. It's just a descriptive label to make it easy for you to change fonts and stuff like that, so don't get stressed over it. If you're really stuck, just use generic names like "companyname", "productname", "productfeatures", "subheadings", "longdroningparagraph", etc.
Make sure that the drop-down box for the Rule Definition field (at the bottom of the dialog box) contains "twoColLiqHdr.css". If it doesn't, click the down arrow and select "twoColLiqHdr.css" from the list. This "twoColLiqHdr.css" line refers to the CSS file that Dreamweaver generated for you when you created the 2 column liquid layout in chapter 1. Selecting this option in the drop-down box will cause Dreamweaver to store the CSS rules you create for this class in that same file.
Click the "OK" button.
The CSS Rule Definition dialog box will appear. The title of the dialog box should say something like "CSS Rule Definition for [your class name] in twoColLiqLtHdr.css", where the actual class name that you entered earlier will be shown in place of "[your class name]".
This dialog box is where you actually create the rules for this particular class. The earlier one merely lets you decide on the name of the class. This is where the real work gets done. If the dialog box seems familiar, it's because you've encountered it before when you created the "logo" class in chapter 2, to centre your logo.
By default, the "Type" line in the left column should be selected. If it is not, click it to select it.
The right side of the dialog box should show numerous fields that you can customise, including things like the font (the "Font-family" field), font size, font weight (eg to create bold text), font style (to create italics), the text colour (through the "Color" box), and various other things.
Before you go on a customisation frenzy however, please read my explanations below.
Click the drop down arrow for the "Font-family" field. Please do this even if you have no intention of changing the font. That is, even if you only plan to change the font size or something else, you should still do this step, otherwise the following explanation will not make any sense. Don't worry. You can always click the same arrow again to get rid of the drop down list box without selecting anything.
Notice that each line of the list shows multiple fonts. For example, you should be able to see a line that says "Georgia, Times New Roman, Times, serif" and another that reads "Arial, Helvetica, sans-serif", and so on. Multiple fonts are listed per line because there is no guarantee that the font you want is available on your visitors' computers. For instance, if you select the line "Arial, Helvetica, sans-serif", and your visitor does not have the first font ("Arial") on his/her computer, the web browser will automatically try to use the second font specified ("Helvetica"). And if that is not available, it will try the third. And so on until the end of the list. In the case of the "Arial, Helvetica, sans-serif" series, the third thing mentioned ("sans-serif") merely means that if the browser can't find any of the preceding fonts, it is to use any sans serif font it can find. If even that is not available, then the web browser is free to use whatever font it wants.
The way web browsers process lists of fonts has two implications.
Firstly, if you want your text to be displayed in, say, the Times New Roman font under ideal conditions, you should select a line that puts "Times New Roman" as the first item in the list. For example, you should select the line that says "Times New Roman, Times, serif" rather than "Georgia, Times New Roman, Times, serif". Selecting the latter will mean that your web page will be displayed in the Georgia font for visitors who have Georgia installed on their computer, even if they also have Times New Roman, since web browsers give preference to the earliest available font listed.
Secondly, if you use the "Edit Font List..." line to add new fonts to the list, and you use a font that only a few people have on their computers, your web page will be displayed using some other font for the majority of your visitors. For example, if you have installed a new font from, say, thefreecountry.com's Free Fonts page, and add it to Dreamweaver's font drop-down box, chances are that your web page will only appear with that particular font when viewed on your computer. Everyone else in the world will probably see your page displayed in Times New Roman (the default font used by many web browsers if it can't find any of the fonts specified).
In case you're wondering, since you're using the two column liquid layout from Dreamweaver, the font series currently used on 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 popular with webmasters partly because they are present on most (if not all) Windows and Macintosh computers, and partly because they are very legible on a computer screen. That is, they are engineered in a way that makes it easy for people to read a lot of text without straining their eyes or slowing down their reading.
Now that you have enough facts, if you want to choose a different font, just click the appropriate line. For those who only expanded the drop down box because I asked you to, and don't actually wish to change anything, just click the drop down arrow again to remove the list.
The "Font-size" field comprises two boxes. You are supposed to enter a number in the first box and a unit of measure into the second. For example, if you want the text to be 20% larger than it currently is, enter "120" (without the quotes) into the first box, then click the down arrow for the second box and select "%".
Although a number of different units of measure are available for you to select, for things like web pages, it's best to stick with relative units like "%" and "em", or if you really must have a fixed unit, the pixel ("px"). The other units, like "pt" (which you may be familiar from using wordprocessors), "cm", "mm" and "in", are more suited for printed media.
If you're using "%" as your unit, 100% refers to the current size of the text. As such, 130% means that the text will become 30% larger than its current size, and 80% means that it will be 20% smaller.
Changing the text colour involves clicking the rectangular box next to the word "Colour" or "Color". This box is actually a clickable button, although it does not look like it. A colour picker window will pop up, allowing you to click the colour you want to use.
If you change your mind about changing colours, just hit the ESC key (on your keyboard) to get out of the colour picker window. Don't click somewhere else in the dialog box in the hope that this action will dismiss it. Doing so will cause the colour under your mouse pointer (wherever it happens to be) to be selected. If this warning comes too late for you, and you've already clicked somewhere, you'll probably notice that the button will reflect the new colour and some seemingly gibberish sequence of characters (like "#FFF") will be inserted into the field beside the button. To get rid of your accidental selection, click to put the text cursor into that field, and delete those gibberish characters with the Backspace or Delete key (on your keyboard). (It's not actually gibberish; it's the textual representation of the colour you selected. For example, "#FFF" means "white".) Then click some other field in the dialog box (to move your cursor away from the colour field). You will notice that the button reverts back to the default colour it had before your mistake.
If you're changing the font or its colour, and also want to put your words in bold or italics, or underline them, it's possible to do this from within this dialog box. "Bold" can be selected from the "Font-weight" field, "Italics" from "Font-style", and the "underline" checkbox can be found in the "Text decoration" list.
Having said that, if your aim is only to put some words in bold or italics to emphasize them in a particular sentence, there's no need to create a new class just for that purpose. There's a better (and simpler) way to do that, which will be explained later in this chapter.
As for underlining, unless you have a good reason for it, most webmasters actually avoid underlining text for emphasis. By convention, on the Internet, underlining is usually reserved for links. This is by no means a rule, of course. But over the many years in which websites have existed, users have come to expect that any underlined text represents a clickable link. Maintaining this convention is considered good practice, since it will give your visitors an easier time navigating your site. If you want to emphasize something, use bold or italics instead.
When you've completed everything you need to do in this dialog box, click the OK button.
The dialog box will disappear, and you'll probably be disappointed to find that nothing has changed on your page. If so, remember that you have only created the CSS rules for a new class. You haven't actually assigned that class to anything yet.
To apply your changes to a piece of text on your page, first select that snippet of text. Selecting text, if you will remember from the previous chapters, simply means highlighting it. And you can do it by dragging your mouse over the words you want.
Go to the next step without doing anything else on your page, otherwise you might accidentally remove the selection.
Click the drop down box for the "Class" field in the Properties panel, and select the class you just created earlier. For example, if you created a class named "productname", click the line that says "productname" in the drop down list that appears.
The text you selected will immediately take on the characteristics you defined earlier.
If you have tried changing the size, and don't notice any visible change, it may mean that the size difference you made are too small to be depicted on the screen. For example, putting a size of "101%" or "99%", where the difference is only 1%, will probably result in nothing appearing to happen. In addition, if your text completely disappears, it may mean that you have accidentally set the text colour to white ("#FFF" in the colour field). White text on a white background does not lead to an enriching reading experience.
You can also select other pieces of text on your page, and assign them the same class. That is, a class can be assigned to as many objects on your web page as you want. (Note that "objects" in this context just means something on your web page. It can be a picture, words, phrases, sentences, paragraphs, the whole column, the whole page, or whatever.) For example, if you have listed many different products on your web page, and want every mention of your product to be displayed using the rules you created earlier, simply repeat the above procedure for every instance of your product name: that is, just select the word, phrase, sentence, paragraph (or whatever), click the "Class" field in the Properties panel, and choose the appropriate class.
If you want something to have a different appearance (eg, if you want yet another font for a different snippet of text), just create a new class and specify the appearance you want in the rules for the class. Then select (highlight) the text as before and assign it the class you created.
After assigning the CSS class to an object, and looking at the result, you may decide that you need to use a different font, colour, size, etc. Dreamweaver allows you to change the rules that you created earlier.
Put your text cursor within a piece of text to which you previously assigned the class. For example, if you had previously assigned the "productname" class to all instances of the words "Super Widget 1000" on your page, and now want to modify the font used, click your mouse somewhere in the middle of one of the occurrences of "Super Widget 1000", such as after the letter "u" in "Super". This will cause the text cursor to appear in that location. (This is just an example. It doesn't really have to be after the second letter. It can be after the first letter, or the 3rd. In fact, if you feel really wild, it can even be after the 4th letter. Or the 5th. And so on. Just make sure that your cursor is placed within one of the words that belong to the class you want to change, otherwise the next step won't work.)
Now look for the "CSS Styles" panel on the right side of Dreamweaver (see picture). Look at the section in that panel that starts with the bold heading "Rules". These are the CSS rules that apply to the location where your text cursor is currently at.
If your "CSS Styles" panel is too short, and does not have enough space to show anything, expand it by dragging the line dividing the CSS Styles panel from the "Business Catalyst" panel downwards. That is, click the left mouse button while the cursor is pointed at the dividing line, and while continuing to hold the button down, move the mouse downwards. Your mouse pointer should change into a two-headed arrow when it is over the dividing line showing you that you can resize the panels. Then, as you move your mouse, the CSS panel will increase in size at the expense of the panels below it. If this forces your Files panel below to become too small, consider collapsing the "Business Catalyst" panel by doubleclicking the words "Business Catalyst".
(The "Business Catalyst" panel is not needed in this tutorial, and can be safely collapsed. In fact, for our purpose, all it does is occupy valuable space. If you find you ever need it in the future, simply doubleclick the tab again to expand it.)
Look for the class that you want to modify in the lines just under the "Rules" heading and doubleclick it. Depending on how much space you have allocated for the CSS Styles panel, you may have to click the up or down arrows in the scroll bar on the right side to see everything. For example, if you have created a class called "productname" that you want to modify, doubleclick the line that starts with the word ".productname" (circled in my picture above). (It doesn't matter where you doubleclick as long as it is within the line containing your class name, since any click will automatically select the whole line. If in doubt, just doubleclick your class name itself.)
The CSS Rule Definition dialog box for that class will appear. Look at the title. It should say "CSS Rule Definition for .productname in twoColLiqLtHdr.css", except that the name of your class will be shown instead of ".productname". If the title states the name of a class that is not the one you want to modify, it means that you have accidentally doubleclicked the wrong line. In such a case, click the Cancel button to dismiss the dialog box and try again.
Otherwise, just change whatever you want in the dialog box. This is the same window you encountered earlier when you created the rule, so it should contain all the rules you previously set for this class.
When you've finished making the changes, click the "OK" button.
Your web page will immediately show the changes. If you have assigned this class to multiple pieces of text, all of them will reflect the changes. (That's the beauty of using the CSS class system. You only need to change things in one place, and all objects belonging to that class will automatically be modified.)
If you want to change the default font used by Dreamweaver for all the text on your web page, you do not have to specially create a new class. Simply do the following.
The simplest way to do this to click "Modify | Page Properties" from the menu.
The "Page Properties" dialog box will appear. Look for the "Page font" field on the right side. It should show "Verdana, Arial, Helvetica, sans-serif". Click the drop down arrow for the box and select the font you want.
Click the "OK" button.
To change the font for the entire left or right columns, all you need to do is to modify the existing class that Dreamweaver has created for that particular column. In other words, there's no need to create a new class for this purpose. To produce the visual effect of having two columns, Dreamweaver created a number of default classes for your layout, including one that encompasses all the content in the left column, and one the right.
Click somewhere in the column in question. That is, if you want to change the font for all the text in the left column, click somewhere in the left column (I suggest somewhere within the paragraph of text that begins "The above links demonstrate a basic navigational...", etc). Likewise, if you want to change the font for your right column, click somewhere in that column.
For the left column, doubleclick the line that begins with ".sidebar1" in the Rules section of the CSS Panel. If you're customising the right column, doubleclick the line that begins with ".content".
This will invoke the CSS Rule Definition dialog box for either ".sidebar1" (if you're changing the font for the left column) or ".content" (if you're changing the right column).
Make your changes and click the "OK" button when you're through.
On occasion, you may want to emphasize some word or phrase by putting it in bold or italics. As mentioned earlier, you don't have to create an entire class for this purpose.
Select the text you want to emphasize.
In the Properties panel (at the bottom of Dreamweaver), click the "B" icon if you want to put your
words in bold, and the "I" icon if you want them in italics. (The "B" and "I" icons
can be found to right of the Class field. As you will probably have surmised from my words, these 2 letters are actually
clickable, although they look neither like icons nor buttons.)
Alternatively, for those who are familiar with the keyboard shortcuts used in
word processors like
Microsoft Word, you can also use the standard Ctrl+B and Ctrl+I (for Windows users) keystrokes to accomplish the
same thing. If you don't understand this paragraph, don't worry; just stick to clicking the "B" and
"I" icons in the Properties panel.
Save your work by clicking "File | Save All" from the menu. Notice that I said to use "File | Save All" and not "File | Save". This is important because all the CSS classes and rules that you created were inserted into the CSS file ("twoColLiqLtHdr.css") and not the "index.html" file. If you only use "File | Save", you will only save your modified "index.html" file, but not the (also modified) CSS file. The end result is that none of the visual changes you make will be seen on your website when you publish it.
Upload your web page as you did in the previous chapters, making sure to click "Yes" when Dreamweaver prompts "Should dependent files be included in the transfer". Then start your web browser and go to your website.
You should see all the changes you made reflected on the site. If only some of the changes you made appear, and not others, it means that you either failed to use "File | Save All" to save your work earlier, or you forgot to click "Yes" in response to Dreamweaver's prompt to transfer your dependent files.
Another possibility, if you are really sure you saved your CSS file and uploaded the latest copy, is that your web browser is showing you an old copy of your website. Web browsers sometimes store a copy of websites you visit on your computer so as to be able to respond faster to your commands. While this is actually a good thing for the most part, making your web browsing experience more pleasant, it can sometimes work against you when you end up seeing old copies of portions of your site. To force the web browser to really show you the new page, hit the "Reload" button in your browser. (The "Reload" button is the one with the circular arrow icon in many browsers.)
Note that it's not always the web browser's fault when you see old versions of your web page. It may sometimes be the fault of your broadband provider (called Internet Service Provider, or ISP). Some ISPs cache copies of the pages you visit using something known as "proxies". If they don't configure their proxies correctly, you may end up seeing new copies of your "index.html" alongside old copies of your CSS or image files. The only solution available to you at your end (short of complaining to your service provider) is to use the "Reload" button on your web browser, and hope that the proxy takes a hint when your browser asks for the page again.
In the next chapter, you will find out how you can change the background of your web page. This includes changing its colour as well as adding images to form the backdrop.
Copyright © 2013-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 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 Colour and Size with Dreamweaver CS6
