HTML

In CSS there is a well known, yet oft misunderstood property called Font-Family. Today we will explore this important property and how we can use it to it's fullest. I'll admit that I spent a long time working on pages without really understanding this property. There are a lot of intricacies to it that unless you really understand typefaces, you may not fully grasp. I do not know typefaces very well, but I know which ones are used regularly, and I stick to those.

What is Font-Family

Simply, this property allows you to set what font will be used to display the text portion of the area you are controlling. So if you want to display in Time New Roman, you will tell the font-family that. But it does more than just that. You need to also tell it what to fall back to, in case the user does not have Times New Roman installed.

How does Font-Family Work?

Now for a little nitty gritty. Within your style sheet, you can define which font you want to display in. for instance:

font-family: times;

will display like this

Font-family allows for a comma separated list, so you don't want to just list one font. The last one listed is a fall back font and should be a generic font. There are five generic fonts: "serif", "sans-serif", "cursive", "fantasy", "monospace". So say we use "font-family: 'Times New Roman', serif". That will tell the browser to display in Times New Roman and if Times New Roman is not available, to use whatever serif font is set as default.

Since this is a comma separated list, you can have more items on there. Say you have a special font you really like that you want to use, if the reader have it installed. If they don't, courier will do. Then, if they don't have courier, then it must be monospaced. You would use this:

font-family: "The Coolest Font Ever", courier, monospaced;

Most people will not have the cool font installed, but most people would fall back on courier. Then, if by chance they don't have courier, they will most likely have a monospaced font.

What are generic fonts?

These are the 5 categories that every other font falls into. Some might fall into two. Here, let's define them:

A serif font has "tails" or serifs on the letters that give it a special flare. Also called roman. ie: Times, Roman, Georgia.
Sans-serif fonts have no serifs. Sans means without. Also called swiss. ie: Arial, Geneva, Helvetica.
Cursive fonts are made to look like cursive hand writing. Also called script. ie: Comic Sans MS, Lucida Handwriting.
Fantasy fonts are fancy fonts. Also called decorative. ie: Copperplate, Impact.
Monospaced fonts are fonts where each letter takes up the same widths. So this i and this m take up the same width. Also called modern. ie: Courier, Monaco.

Which font should I use?

I'm not going to tell you what font to use, but serifs can be hard to read on computer monitors, as can cursive and fantasy. Some people love monospaced, others hate them. Monospaced is great for proofreading. Certain typos jump right out at you. Monospaced is used by standard for type-set items or code snippets. Cursive and fantasy are good for accents. Serif is great for print and sans serif is great for screen.

Be careful about choosing your special font. It is best to choose a font that a lot of people have. The Coolest Font Ever may be your favorite font, but I don't have it installed, so I will not see it and it will default to whatever my default font is. If you want it to be a certain way, then you need to give a backup font and a generic font, at the very least. I avoid special fonts altogether.

In the last article I showed you how to clear an input box after a user selects it. Now we are taking that one step further and if they leave the form blank, we are returning the default value. Alternatively some other text can be added there as well.

Again this is a simple addition. This is the box we are after:

The code is as follows:

Add this to the script section you created before:

function returnMe(formfield){
 if (formfield.value=="")
  formfield.value = formfield.defaultValue
}

and this to the input box:

onblur="returnMe(this)"

The entire thing looks like this now:

<script type="text/javascript">
 function clearMe(formfield){
  if (formfield.defaultValue==formfield.value)
   formfield.value = ""
 }

 function returnMe(formfield){
  if (formfield.value=="")
   formfield.value = formfield.defaultValue
 }

</script>

and

<input type="text" name="searchbox" value="Keyword Search" onfocus="clearMe(this)" onblur="returnMe(this)"/>

In the input box, we added the onblur attribute. This tells us that when the item's focus is lost, ie the user click out of the box, or tabs out of it, then the returnMe function is run.

The returnMe function is much like the clearMe function. Now, it says that if the current value is blank, we change the current value to match the default value.

Alternatively, we could have different text be put there. Say we change it so that it says "Use Me, Man!" We would simple change the line that says

formfield.value = formfield.defaultValue

to

formfield.value = "Use Me, Man!"

But that does not really draw attention to the box. Lets make the font red, and the background yellow. This will draw attention to their mistake.

function returnMe(formfield){
 if (formfield.value==""){
  formfield.value = "Use Me, Man!"
  formfield.style.color = "red";
  formfield.style.background = "yellow";
 }
}

Now, notice that we have three lines following the if statement. Because there are more than one, we wrap them in { }. Otherwise the browser will assume it is just the one line and the other two will be run whether the if statement is true or false. Lets look at the two new lines.

formfield.style.color = "red";
formfield.style.background = "yellow";

The first style refers to the font color. The second the background color. You can put most CSS styles here. You could also change the font-size, border, width and more with this attribute.

[Updated per comment below]

Thanks John for pointing out an error. Once the form is correctly entered, the form should return it's color to normal.

A simple way to do this is to just add a else statement, like this:

function returnMe(formfield){
 if (formfield.value==""){
  formfield.value = "Use Me, Man!"
  formfield.style.color = "red";
  formfield.style.background = "yellow";
 }
 else{
  formfield.style.color = "black";
  formfield.style.background = "white";
 }
}

The problem with this is that if they click in and then out, this leaves the text. To fix this, you can update clearMe() like this:

function clearMe2(formfield){
 if (formfield.defaultValue==formfield.value || formfield.value == "Use Me, Man!")
 formfield.value = ""
}

|| means "or" so we are comparing the value to the default value or the one we used to change it to.

Have you seen how sometimes text boxes will have some default text in them that when you click on them goes away. Would you like that for your site, but don't know how? This brief tutorial will give you the details you need to get it done. It is a fairly simple piece of JavaScript to do it.

For an example of what we are trying to do:

First, I'll show you the code, then if you are interested, you can read on to get an explanation of what it all means.

Put this in the head section of your page (it can go in the page itself, but the head is a better place:

<script type="text/javascript">
 function clearMe(formfield){
  if (formfield.defaultValue==formfield.value)
   formfield.value = ""
 }
</script>

And this is the input box that goes into you form:

<input type="text" name="searchbox" value="Keyword Search" onfocus="clearMe(this)" />

With our input box, we need a name to reference it by. In this case, it is called searchbox. The value tells us what the default value will be. Finally, onfocus tells us that when this box is made active, by clicking on it or tabbing to it, or some other means, then the function clearMe is called and sent the value of this. this is a special JavaScript property that sends a reference to the html property it is laid in. In other words, it means "This HTML piece".

The script is really simple, just an if statement. You could just include it directly in the onfocus, but that does not lend to reusability, so it is best to stick a function in the head. We will dissect it line by line.

<script type="text/javascript"> - Tells the browser that the following script is in JavaScript. It ends with </script>. So everything between the two must be in JavaScript.

function clearMe(formfield){ - This starts the function. The name of the function is give and then in parenthesis are any variables that are passed to the function. In this case the function is named "clearMe" and it is passed one variable called "formfield".

if (formfield.defaultValue==formfield.value) - Is a simple if statement. This simple says that if the form field (passed from the input box) has the same default value and current value then we proceed. If not, we skip the next line of code. Since there is no { after the statement, only one line will be used. If you wanted to have multiple lines used for the if, then you would enclose them in { and }, just like the function.

formfield.value = "" - If the if statement above was true then this line changes the current value of the form field to be blank.

} - ends the function. The function is surrounded in { and } so the browser knows where it begins and ends.

</script> - As I mentioned above, this tells the browser that we no longer are using a scripting language and to go back to HTML.

Next, I'll take this one step further and show you how to return the default value if they leave the form field blank.

When programming a web site, it is often suggested that we stick to the standards, but what are those standards, and why should we follow them? When I develop my site, I look at it in the browser. It works, so why should I bother to make it standards compliant?

You don't have to follow the standards to make a site work. Some standards are a but hard nosed and might make it difficult for you to do the page the way you want, so why not just hack away and make it look the way you want it to?

What are Standards

Standards are a specific method to follow when programming. For HTML the standards are put forth by the World Wide Web Consortium. There are several versions of the HTML standards. These standards state what the code means, how it is to be interpreted, what the properties of it are, how it needs to be programmed, etc.

Why Use Standards

Using standards means that the page will look similar in every browser. If the browser follows the standards properly, then the page should look the same if every browser. See Browser Standards for more on browsers.

Many times a page is programmed to look right in one browser (FireFox or Internet Explorer, usually). This can block out some of your potential readers who are using the competitor. Sticking to the standards will ensure a greater amount of compatibility between browsers.

Which Standard Should I Use

Future proofing is also important. If you use some proprietary software, what is to say that software will be around in 5 years? Standards change, they evolve, but if you pick the right standard your document will be around for a very long time. ASCII is one such standard. ASCII has been around since the beginning of computers. If you write a document in ASCII, that document will still be readable in 100 years, most likely. Do you have any documents in Word Perfect Format? That format is not around any more and while there are still programs that will read them (OpenOffice) the standard is no longer supported.

Picking the right standard for the job is also important. I've seen people use Word documents on their web pages. Yes, most people will be able to open these documents, but the bulk of your web pages should be in an HTML standard. Which standard you use is an important question.

HTML has 4 major revisions, but the XHTML standard as well. I prefer to program in XHTML 1.0 Strict, but you might prefer transitional, or HTML 4.0. I would not go with any of the earlier versions of HTML at this point. You will see a post soon about what all these different standards mean, that is well beyond the scope of this document.

Browser Standards

Unfortunately the browsers to not all interpret the standards the same way. FireFox is more standards compliant that Internet Explorer, but IE 7 has come a long way and is fairly compliant now. The others range from fairly compliant to not so compliant. While sticking with the standards will make it look the closest in all the browsers, you need to look at each browser to see own they differ and make any changes you need. You will need to look into cross browser compatibility if you want it to look really good in every browser. This is an important task that you should take the time to do.

I have been doing some contract work on a site that I have to make look right in FireFox, IE 7 and IE 6. That means a lot of CSS hacking. In the process I've learned some interesting facts that I'll be sharing. The first is the different ways that FF and IE handle Horizontal Rules .

If FireFox, by default, the border of the hr is displayed. In IE, it is the inside. So if you want a 1px hr, you have to use style it so that it displays right in both. In otherwords, you have to explicitly tell it what you want the border and backgrounds to look like. Below is what I ended up with:

hr {
border: none;
background-color: #c4c4c4;
color: #c4c4c4;
height: 1px;
}


The first line tells FF to not display a border. The second line tells FF what color to make the line. The third tells IE. Notice they are the same color code. The last line says how high the line is. I had to spend a little time futzing to figure out why the line was thicker in FF than in IE, so I thought I'd share what I found in case someone else is having the same issue.