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.
Forms are a pain. They are often ugly and hard to make look the way you want them to. Let's talk about styling them a little to make them less ugly.
First, we need to decide what we want. In this case, we want a box that is 200px wide, the font is 11px Georgia in a dark olive green. And we want it to have a bit of an inset/drop shadow look. I had seen these on the web, but didn't know how to create them. I then realized it was just a border treatment and after some experimentation I got it right. I also spent a bit of time searching Google, but I must not have been searching for the right thing. Everything I saw on drop shadows talked about using an image. You don't need one for this simple treatment.
The box final:
If you can read HTML and CSS just look at this code and figure it out. If you need more information, read on.
ok. Now that we know what we a building, let's start with the box.
The advanced exams of 646-204 and 70-649 are hard for someone who has done neither 70-620 nor 642-901 and hence is not a great candidate for SY0-101.
Basics
<input> is the tag that says to make an input box.
There are a couple of types of input boxes, we are just dealing with text boxes in this treatment, so we tell it to be of a type="text".
We should give it a name, so that we can address it with JavaScript or do some Ajax to it later, or if we are sending it somewhere, the receiving script will need to know what it is. I will not go into scripting the receiving bit today. name="textbox" is a simple name. You should give yours something more descriptive. No spaces; letters and numbers only is best. Some other characters are allowed, but best to stick to letters and numbers. If you feel the need for a space, use an underscore (_)
And then some text to go inside. This is just the default text. It can be deleted by the user before they submit the form. I'll show you how to have the default text deleted when they click to use it in another article within the next few days. value="I'm an input box" sets the value, or text to go in the box.
Last we have a / at the end. This is for XHTML compliance. If you are using HTML 4.0 you do not need the /, but you will find that all the code I give uses XHTML 1.0 strict. Validation is important, and using well implemented standards allows everyone to view it. Basically the / says that there will be no end tag. It is a shortcut for
So far we have this:
<input type="text" name="textbox" value="I'm an input box"/>
Style tag and width
We are using a style tag for this. There is another, often better, way of dealing with CSS, using a CSS file and class. That is for another entry. Today, we will just use a style tag. If you know how to use classes, feel free.
To start off the style, we will add a width of 200 px. px is short for pixels and is 1 "dot" on your screen. It is the smallest bit that can be displayed. Here is a 1 px red dot:
style="width:200px" is what we use. style= tells the browser to use CSS for this element only. width is a CSS property saying to make the element this wide. In CSS we use : to separate property from the declaration. You could pretend it is an equals sign if that helps you. 200px says it is 200 pixels wide.
We now have this:
<input type="text" name="textbox" value="I'm an input box" style="width:200px"/>
Font
Now, lets treat the font inside the box. Here we will expand our style to include all the font styling.
We want it 11 pixels tall. We can use the font-size property to do this: font-size: 11px
We said we wanted it to be in Georgia font. Not everyone has Georgia, so we set a backup font as Times New Roman. If it can't find that, any times font. Then any serif font. Sans serif have not of these: font-family: Georgia, "Times New Roman", Times, serif
Last, we set the color. A dark olive green: color:darkolivegreen.
We add them all to the style tag, separating each with a semi-colon (;)
We now have this box:
<input type="text" name="textbox" value="I'm an input box" style='width: 200px;font-size: 11px;font-family: Georgia, "Times New Roman", Times, serif;color: #666' />
Drop Shadow
Last we have the drop shadow to put together. For this, we use a border. The border should be 2 pixels wide and solid. Lets start by making the main border: border:2px solid #eee.
Notice that this makes a nice thick border, but it is not a drop shadow or inset. It is in fact very light and hard to see at all. To make it look like a drop shadow, we need to change the top border and left border colors. We will use a darker color for this: border-left: 2px solid #999;border-top: 2px solid #999. Now lets put it all together.
by email 
by RSS
