Site Development
Downloads
Help!!
Home
|
It might be helpful to review the <font> Tag Tutorial if you are not familiar with font characteristics. This tutorial will show you how CSS has replaced the <font> tag in most circumstances. Font-FamilyOne of the first things you should decide on when styling a font is the "typeface" or actual shape of the letters. CSS refers to this as the "font-family" property. Lets style both the <h2> header and the <p> text of the following sample:
<html> Now lets add some style beginning with a font-family. I want the header to be in Tahoma. If Tahoma is not available, I want to use Arial. Failing both, I'll fall back on the generic "sans-serif" value.
<html> Now the <h2>'s text will be in the Tahoma, Arial, or generic sans-serif font face. The element is "h2" and the property is "font-family". The value is actually a list of values with each value separated by a comma ( , ). You can also add a space if you want. The list goes from most desired font-family to least desired and ends with a generic option. In practice, a common font-family is generally selected as the first preference and a generic alternative is provided. On the other hand, you can make your list of values for font-family as long as you want. Just remember to separate the values with commas. Now lets choose a font-family for the paragraph. Lets choose "Times New Roman", a common serif font, and use "serif" as a generic option. In the page's <head> code:
<style type="text/css"> That's pretty much it for font-family. Now a font-family has been chosen for all of the <h2> and <p> text on the page. No further coding is needed to apply the font-family selection. Font-SizeNow lets size the text for our header and paragraph. To do this we'll use the "font-size" property and "point" values ( pt ). You can also use pixel values ( px ) for sizing fonts. We'll be adding a second declaration to both of our style rules. You separate (delimit) the declarations with semi-colons ( ; ).
<style type="text/css"> Click here to see what we've got so far. You'll see that I used a really big font-size for the header, even bigger than an <h1> header. The <p> font-size is very small. I did this to emphasize the sizing. You'll also notice that the correct font-family is being used in both cases. It is important to remember not to use a space between the digits and letters of the "font-size" value. Use "30pt", not "30 pt". The extra space will cause Netscape to ignore the entire style rule and may not be rendered properly in IE. This applies to values in HTML tags as well. You may have noticed that I put a semi-colon ( ; ) after both declarations. The semi-colon after the font-family list is essential. I didn't really need to put one after the last declaration. The semi-colon is only needed to delimit (separate) declarations. I put one at the end of all of my declarations so if I add on more declarations later, I won't forget the semi-colon -- a common mistake. It doesn't hurt to add a semi-colon at the end of the last declaration in a style rule. I consider it a good coding practice. You may want to resize the font-size before moving on. Play around a little. Not all fonts support all sizes. In that case, the nearest sized version of the font is used. In practice, you'll be fiddling with this a lot before making a final decision. Considering the power of CSS, it's time well spent. And, remember, it's easy to correct if you change your mind later. Just one or two lines of code and a whole page (or even site) is completely transformed. Font-WeightThe "font-weight" property refers to the thickness of the lines making up the letters of a font-family. They come in different thicknesses that have their own value system. The system uses a number value only. These values range from 100 - 900. There is no extension like "pt" or "px", just the number. A value of 100 is very light and 900 is the thickest. 500 - 600 are good for reading text like paragraphs. Lets "lighten" our <h2> text a bit and "thicken" our <p> text.
<style type="text/css"> Check out the new look here. Compare this to the last example. You'll notice that the header got a lot thinner and the small <p> font got a lot thicker (for it's small size). Different fonts support different weight ranges. Many don't have a full 900 thickness available. In that case, the closest weight available is used. Again, fiddling is required. The above three font properties -- font-family, font-size, and font-weight -- will be used with about every page you code. These are the Big Three font properties. There are two others explained below that you should also know, even if they are not used as much as the Big Three. Font-StyleThere are three font-styles: italic, bold, and normal. The "normal" value is the default. If you don't want your text italicized or emboldened, then you can just ignore using this property. On the other hand, if you're styling a tag for emphasis, this property can come in handy. I'm going to italicize the header of our sample page:
<style type="text/css"> I think you sort of know what italicizing does. This will italicize all <h2> headers on the page. Generally, you can use font-weight to make a font bolder without using the font-style. Another important use of font-style is to remove italics from elements that use them by default like the <i> tag. Lets say you wanted to make your <i> tag text red and not italicized. You could style the <i> tag like this:
<style type="text/css"> Now your <i> text will not be italicized. It will be normal and red. Just keep in mind that the default font-style for most tags is "normal" and you can just leave out a font-style if it's not needed. Again, boldness can be styled with "font-weight" more precisely than with using the <b> tag alone. Font-VariantThe font-variant is hard to explain so here's an example: These first few words use font-variant: small-caps. It produces upper-case letters that are the same height as the lower-case letters. In this case, "These first few words", are in small-caps. There are some pages that use a traditional magazine layout that employ small-caps for the first line of text in an article. This is still very popular in print newspapers and magazines. To use small-caps just add font-variant: small-caps; to your declarations. The font-variant property only has two values: small-caps and normal. So, if you aren't using small-caps, you can just leave this property out. It's also important to note that not all fonts support small-caps. If the font being used does not support small-caps, font-size and font-weight can be used to mimic the effect. We'll cover this later. See how useful and powerful CSS is? You'll never need to code a <font> tag again. Practice making pages with lots of bulk text and headers. Try styling the various tags you colored in the previous lesson. Oh, and don't forget to add a little color along with your other font declarations. Make an effort to use different fonts, especially the common ones like Arial, Times New Roman, and Tahoma. See how big and how small you can get them. Test the limits of different fonts. This will let you practice your coding while giving you useful knowledge for future use. When you're ready, we'll see how to use CSS to make margins and alignment just like the ALIGN attribute -- except you don't have to code all of those attributes, just and extra line or two in your <style> tags. |
To Next Beginning CSS Lesson
Back To Beginning CSS Index