Font sizes are listed in points, pixels or percentages, such as 18pt, 18px or 110%. Here are some examples of different sizes:
- 18 pixel font using font-size:18px
- 18 point font using font-size:18pt
- 150% font using font-size:150% - this is a percentage of the current font size.
Font size can also be listed as a size relative to the default font using smaller or larger - which decreases or increases the font by 1.5 times the previous size. If the font is 10pt and you use font-size:larger you will get a 15pt. font.
There are also incremental font sizes relative to the default font: xx-small, x-small, small, medium, large, x-large, xx-large:
The 'font-weight' property selects the weight of the font. The values 100 to 900 form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Not every font is available in all nine weights. For simplicity I recommend just using bold since normal is the default, and not all fonts come in 9 weights. It is also more descriptively correct to use this than it is to use <strong> although both will work.
The 'font-style' property is used for italics. The value is italic (style="font-style:italic;") It is also more descriptively correct to use this than it is to use <em> although both will work. And with both font-weight and font-style normal is used to return the font to the default (not bold or not italic)
This sets the color of the font. You can use either hex codes for RGB or the sixteen recognized color names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.) (You can also use background:colorname to have a background color, such as background:black which is how I displayed the aqua, lime, silver, white and yellow)
If you want your posts done in a particular font, you can list it first, with your second choice second, etc. If you want to make sure it's a particular style of font even if your readers don't have the particular font you have, you can list a font type such as sans-serif (e.g. verdana, arial and helvetica), serif (e.g. Times, 'Times New Roman' and Georgia) cursive (e.g. 'Shelley Allegro', Zapf-Chancery), fantasy (e.g. Western) or monospace (e.g. Courier). The browser will select a font that fits the generic category. If the font is more than one word (such as comic sans ms) you have to enclose it in a single quote: 'comic sans ms'
Putting it together: if you want a large font size (say 24px) in Red with a black background in Trebuchet MS (with verdana as a backup font and the generic sans-serif) and bold use the following style sheet tag and attributes:
Which will look like this
<span style="font-size:24px; color:red; background:black; font-family:'Trebuchet MS',Verdana,sans-serif; font-weight:bold; font-style:italic;">. . .
- Create a message that utilizes everything you have learned so far:
- line and paragraph breaks (from lesson 1)
- bold, italic (using what you learned in this lesson)
- styles and text alignment (from lesson 3)
- fonts and colors (from lessons 4, 5 and 6)
- links - to email, web pages and forums (from lessons 7 and 8)
- graphics (from lesson 9)
- tables (from lessons 10 - 15)
- styles to override Delphi's style. (from this lesson)
- If you are a DelphiPlus member using the WYSIWYG editor, you need to click SOURCE before typing in any code.
- If you are a DelphiAdvanced member, check the box at the bottom of the input window that says "Check here if HTML tags are in the message"
- If you are a DelphiBasic (free) member, you will need to upgrade to be able to use HTML in your messages.
- You can post your homework or ask questions about this lesson as a reply to this message.
Want to know how I made the lists? Easy.
<ul> starts an unordered (bulleted) list and
<ol> starts an ordered list. You then list each item using the
<li> tag. Be sure to close all of your tags.
Here is an example of an unordered list:
Which produces this:
- First Item
- Second Item
- Third Item
Now you try it with an ordered (numbered) list.
EXTRA EXTRA Credit: Create an unordered list that includes an embedded ordered list.