XHTML Lessons (Read-Only Folder)  -  Lesson 16 - Font Sizes and Review (2093 views) Notify me whenever anyone posts in this discussion.Subscribe
 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host12/13/04 2:56 PM 
To: All  (1 of 30) 
 11620.1 

Lesson 16 - Font Sizes and Review

font-size:

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:

  • font-size:xx-small
  • font-size:x-small
  • font-size:small
  • font-size:medium
  • font-size:large
  • font-size:x-large
  • font-size:xx-large

font-weight:

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.

font-style:

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)

color:

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)

font-family

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:

<span style="font-size:24px; color:red; background:black; font-family:'Trebuchet MS',Verdana,sans-serif; font-weight:bold; font-style:italic;">. . .</span>

Which will look like this

Your Homework:

  • 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.

Bonus!

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:

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

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.

  • Edited 12/13/2004 3:00 pm ET by Sheryl (MSCHAR)
 
 Reply   Options 

 
From: Angela (ANGEHOWE) DelphiPlus Member Icon12/17/04 5:23 PM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (2 of 30) 
 11620.2 in reply to 11620.1 

I decided to put this here instead of Lesson 15.

A list... what to list...

  • There's the holiday shopping still to finish
  • Baking the cookies, pies, and fudge
  • And singing Christmas Carols!
  • A partridge in a pear tree
  • Two turtle doves
  • Three French hens
  • Four calling birds
  • Five golden rings
  • Six geese a-laying
  • Seven swans a-swimming
  • Eight maids a-milking
  • Nine ladies dancing
  • Ten lords a-leaping
  • Eleven pipers piping
  • Twelve drummers drumming
  • Best of all is the Eggnog (with Rum!)

 

 
From: Angela (ANGEHOWE) DelphiPlus Member Icon12/17/04 5:30 PM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (3 of 30) 
 11620.3 in reply to 11620.2 

And my list didn't work... trying it with the </li> tag on the other side of the <ol>

  • There's the holiday shopping still to finish
  • Baking the cookies, pies, and fudge
  • And singing Christmas Carols!
    1. A partridge in a pear tree
    2. Two turtle doves
    3. Three French hens
    4. Four calling birds
    5. Five golden rings
    6. Six geese a-laying
    7. Seven swans a-swimming
    8. Eight maids a-milking
    9. Nine ladies dancing
    10. Ten lords a-leaping
    11. Eleven pipers piping
    12. Twelve drummers drumming
  • Best of all is the Eggnog (with Rum!)

 

 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host12/22/04 11:39 PM 
To: Angela (ANGEHOWE) DelphiPlus Member Icon  (4 of 30) 
 11620.4 in reply to 11620.2 

I don't know if the filter did this or not but your first attempt has this in your nested list:

<ol style="color: #483d8b;text-transform: capitalize;">
</ol></li><li>A partridge in a pear tree</li>


Happy Holidays
(Carpenter 1974)
Delphi Forums Staff

Upgrade to DelphiPlus or DelphiAdvanced

Healthy Living
Char's Web Publishing Tutorials
Downsize Your Sig

Adversity has the effect of eliciting talents which in prosperous circumstances would have lain dormant.
--Horace

 

 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host12/22/04 11:41 PM 
To: Angela (ANGEHOWE) DelphiPlus Member Icon  (5 of 30) 
 11620.5 in reply to 11620.3 

I need to test this out. The way you have it in this lesson worked, but would not pass a strict XHTML validator. If my test doesn't work, then I will know the filter isn't handling nested lists right and I will report it.

  • There's the holiday shopping still to finish
  • Baking the cookies, pies, and fudge
  • And singing Christmas Carols!
  • A partridge in a pear tree
  • Two turtle doves
  • Three French hens
  • Four calling birds
  • Five golden rings
  • Six geese a-laying
  • Seven swans a-swimming
  • Eight maids a-milking
  • Nine ladies dancing
  • Ten lords a-leaping
  • Eleven pipers piping
  • Twelve drummers drumming
  • Best of all is the Eggnog (with Rum!)
Edit - Now I see what happened in your first message, which you had done correctly. The filter added the which it shouldn't have done.


Happy Holidays
(Carpenter 1974)
Delphi Forums Staff

Upgrade to DelphiPlus or DelphiAdvanced

Healthy Living
Char's Web Publishing Tutorials
Downsize Your Sig

Adversity has the effect of eliciting talents which in prosperous circumstances would have lain dormant.
--Horace

  • Edited 12/22/2004 11:43 pm ET by Sheryl (MSCHAR)
 

 
From: Angela (ANGEHOWE) DelphiPlus Member Icon12/23/04 5:55 AM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (6 of 30) 
 11620.6 in reply to 11620.4 

Yep, that was a filter thing. After it did that, I went to Dee and we ran some tests with a validator. The way the filter is forcing tables isn't valid XHTML. Here are two sample lists that Dee originally made here that have been validated. The filter won't leave the valid code as is, and modifies it. The code that's not valid XHTML makes it through the filter unchanged.

The good news is that the filter *did* remove the </ol></li> from my original code when it put it where it wanted it, and that made the rest of the table retain the intended format.

 

 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host12/23/04 10:34 AM 
To: Angela (ANGEHOWE) DelphiPlus Member Icon  (7 of 30) 
 11620.7 in reply to 11620.6 
I reported this last night and hopefully it will be fixed soon!


Happy Holidays
(Carpenter 1974)
Delphi Forums Staff

Upgrade to DelphiPlus or DelphiAdvanced

Healthy Living
Char's Web Publishing Tutorials
Downsize Your Sig

Adversity has the effect of eliciting talents which in prosperous circumstances would have lain dormant.
--Horace

 

 
From: Dark Angel (Raven_Star) DelphiPlus Member Icon1/3/05 9:03 PM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (8 of 30) 
 11620.8 in reply to 11620.1 

This is really complicated now.

I'm hoping this is size 10,
in gold,
Tempus Sans ITC (or Times),
bold,
with a black background.

Raven_Star@DelphiForums.com
I'm hoping my email address works.

Now for a table...

Headers This Is Col 1 This Is Col 2 This Is Col 3
Totals: Total Col 1 Total Col 2 Total Col 3
Row 1 Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Row 2 Col 1 Row 2 Col 2 Row 2 Col 3
Row 3 Row 3 Col 1 Row 3 Col 2 Row 3 Col 3

My List
  • Tables, not so checked...
    1. Need to work on background colors.
    2. Need to work on BORDER COLORS!
    3. Need to work on graphic backgrounds!
  • Bold, Italics, etc... ok...
  • Links, ok...
  • Graphics, sorta ok...
Come See EarthSea RPG!
 

 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host1/9/05 8:03 PM 
To: Angela (ANGEHOWE) DelphiPlus Member Icon  (9 of 30) 
 11620.9 in reply to 11620.6 
BTW - I forgot to congratulate you on being the first to finish the updated tutorial!!! Congrats!


Sheryl
(Carpenter 1974)
Delphi Forums Staff

Upgrade to DelphiPlus or DelphiAdvanced

Healthy Living
Char's Web Publishing Tutorials
Downsize Your Sig

Adversity has the effect of eliciting talents which in prosperous circumstances would have lain dormant.
--Horace

 

 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host1/9/05 8:04 PM 
To: Dark Angel (Raven_Star) DelphiPlus Member Icon  (10 of 30) 
 11620.10 in reply to 11620.8 
Congrats Dark Angel! You are only the second person to complete the updated tutorial!!


Sheryl
(Carpenter 1974)
Delphi Forums Staff

Upgrade to DelphiPlus or DelphiAdvanced

Healthy Living
Char's Web Publishing Tutorials
Downsize Your Sig

Adversity has the effect of eliciting talents which in prosperous circumstances would have lain dormant.
--Horace

 

 
Navigate this discussion: 1-10 11-20 21-30
Adjust text size:

Welcome, guest! Get more out of Delphi Forums by logging in.

New to Delphi Forums? You can log in with your Facebook, Twitter, or Google account or use the New Member Login option and log in with any email address.

Home | Help | Forums | Chat | Blogs | Privacy Policy | Terms of Service
© Delphi Forums LLC All rights reserved.