Around the Web in Eighty Kilobytes

Home Old Issues Examples
 PreviousIssues : 13 - June 30
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com


AROUND THE WEB IN EIGHTY KILOBYTES 1.25 - 1.26
   ATWI80KB 13

June 30, 2000

1) Fonts with CSS
2) Stylesheets and Links
Example


1) FONTS WITH CSS
   Even tough most browsers understand stylesheets, some don't, and stylesheets are rarely used to control fonts. In case you want to use them for dHTML or one of the link things (see next topic) or just don't mind if a few people can't see the stylesheet effects, I'm going to show you how to use CSS for fonts anyway. Here are a few important font properties:

  • font-family
       Used to choose font face. Apart from font names like 'arial' and 'times new roman' etc. etc. there are a few values you can enter - 'serif', 'sans-serif' and 'monospace' are widely supported. Some browsers support 'cursive' and 'fantasy'. Try them out to see what each looks like. They vary from browser to browser and computer to computer. For font-family, it is a good idea to use quotes (" or '), especially if the font name has more than one word. Also, it's better to use small letters.
       It's a good idea to choose more than one font, separated by commas. If the computer doesn't have the first font listed, it'll use the next one, and so on.
    eg. body { font-family: arial, "times new roman", sans-serif }
  • color
       Write the text color in HTML color code or use words like 'red', 'blue' etc.
    eg. p { color: #FF0000 }
  • font-size
       There are many units you can use to choose size of the text:
    pxSize in pixels.eg. span { font-size: 10px }
    ptSize in points.eg. p { font-size: 12pt }
    emSize compared to text around it.
    If text around it is, say, 12
    points high, 2em would mean text is 14
    points high. Look at the example at the end.    		eg. b { font-size: .5em }
    mmMillimeters.eg. b { font-size: 20mm }
    cmCentimeters.eg. b { font-size: 3cm }
    inSize in inches.eg. i { font-size: 0.7in }
    %Size in percentage compared to text
    around it.    		eg. p { font-size: 150% }
    I'm not really sure what 'pc' and 'ex' mean, but they can be used, too.

    There are also keywords, 'small', 'medium', 'large', 'x-small', 'x-large', 'xx-small', 'xx-large'.
  • font-weight
       Controls boldness. Can be 'bold', 'normal', '100', '200', '300', '400', '500', '600', '700', '800' or '900'.
    eg. p { font-weight: 500 }
  • font-style
       'italic' or 'normal'. Sometimes 'oblique' has to be used instead of 'italic'.
    eg. p { font-style: italic }
  • text-decoration
       'underline' and 'none' mean what they sound like. 'line-through' means 'Strikethrough'. 'overline' and 'blink' aren't well supported.
    eg. u { text-decoration: underline }
  • text-transform
       'uppercase', 'lowercase', 'capitalize' and 'none' are possible values.
    eg. span { text-transform: uppercase }


2) STYLESHEETS AND LINKS
   This is one of the best things about stylesheets. I won't be mentioning any new properties here.

Links are NOT usually written in stylesheets like this:
   a { text-decoration: line-through }

More often, they are written like this:
   A:link { text-decoration: line-through }

Also used are:

A:hover
   The styles of the text when the mouse cursor is over it (NOT WELL SUPPORTED, but very cool).

A:visited
   Styles of visited links.

A:active
   Styles of active links.

These can also have classes.
eg. A:hover.main { font-weight: bold }

'text-decoration' can be used to make links NOT underlined. This is very good for making toolbars etc. You can make text underlined when the mouse is over it like this:

<style type="text/css">
<!--
A:link { text-decoration: none }
A:hover { text-decoration: underline }
-->
</style>


EXAMPLE
<html>
<head>
<title>New thingy</title>
</head>

<style type="text/css">
<!--
body { font-family: 'times new roman', serif }
span { font-family: arial, verdana, sans-serif }
span.mono { font-family: monospace }
A:link { text-decoration: none }
A:hover { text-decoration: underline;
          font-weight: 800;
          font-family: courier, "courier new", monospace }
A:visited { text-decoration: none;
          font-weight: 200 }
-->
</style>

<body bgcolor="#FFFFFF">
This is in Times New Roman or something.<br>

<span>
<a href='http://atwi80kb.homepage.com'>Click</a> to go to a website.<br>
<span class="mono">Another font.</span>
</span>
</body>

</html>


See you in a week!
Aniruddh Nath


Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.