In the previous page I used inline CSS to style each individually. In this page, I moved all of the styling into the head so I don't have to style every paragraph, every headline and every <code> individually.
<style>
body { background-color: #fad888; }
code { background-color: white; }
h1, h2, h3, h4, h5, h6, th { text-align: center; color:blue; }
th { color:blue }
p { margin: 1em 2em 0em 2em; }
.center { text-align: center;}
</style>I already mentioned how to change text color in the previous page: <span style="color:red;">Red</span>
Red. What follows is just some of what you can
do with fonts.
Use the font-size property to set the size of the text. The units
can be absolute (pix, pt, in, em etc) or relative (em, rem). Absolute is bad
for accessibility because the user cannot resize text in all browsers. Also,
what looks good on a computer screen my not look good on a phone or tablet. font-size also has named sizes:
xx-small|x-small|smaller|small|medium|large|larger|x-large|xx-large
With HTML4 we had seven font sizes. With HTML5 you are only limited by the screen size. Setting size with em:
<span style="font-size: .25em;">tiny</span> |
tiny |
<span style="font-size: .5em;">small</span>
|
small |
| normal | normal |
<span style="font-size: 2em;">large</span> |
large |
<span style="font-size: 4em;">huge</span> |
huge |
A font's weight is how thick or bold it is. In HTML4 there was only
<b> With HTML5 you have nine degrees of boldness.
is defined by font-weight. Supposedly Firefox and Chrome support font-weight but I don't see it.
<span style="font-weight: 100;">100</span> |
100 |
<span style="font-weight: 200;">200</span> |
200 |
<span style="font-weight: 300;">300</span> |
300 |
<span style="font-weight: 400;">400</span> |
400 |
<span style="font-weight: 500;">500</span> |
500 |
<span style="font-weight: 600;">600</span> |
600 |
<span style="font-weight: 700;">700</span> |
700 |
<span style="font-weight: 800;">800</span> |
800 |
<span style="font-weight: 900;">900</span> |
900 |
<span style="font-weight: bold;">bold</span> |
bold |
<span style="font-weight: bolder;">bolder</span> |
bolder |
<span style="font-weight: lighter;">lighter</span> |
lighter |
With text-shadow you can create a shadow for your text. The
syntax is text-shadow: horizontal-offset vertical-offset blur-radius color .
The offsets are required and can be negitive or 0. The blur-radius is optional in which case it is 0.
<span style="text-shadow: -1px -1px 0 #ff0000">Example</span> Example
Shadows can be stacked by separating them with commas.
<div style="background-color: #888;
color: #888; text-align: center;
font-size: 3em;
text-shadow: 1px 1px 2px black,
-1px -1px 2px white;
">Raise</div>
<!-- Emboss -->
<div style="background-color: #888;
color: #888; text-align: center;
font-size: 3em;
text-shadow: 1px 1px 2px white,
-1px -1px 2px black;">Emboss</div>
<!-- Neon -->
<div style="background-color: black; color: lime;
font-size: 3em; text-align: center;
text-shadow: 0 0 5px #0f0,
0 0 10px #1f1,
0 0 15px #2f2,
0 0 20px #3f3,
0 0 30px #4f4,
0 0 40px #5f5,
0 0 50px #6f6,
0 0 75px #7f7;">Neon</div>
<!-- Hot! -->
<div style="background-color: #000; color: #fff;
font-size: 3em; text-align: center;
text-shadow: 0 0 5px white,
0 0 10px yellow,
0 0 15px orange,
0 0 20px red;">Hot!</div>
With vertical-align you can make subscript, superscript and more.
H<span style="vertical-align: sub">2</span>O -
H2O is the chemical formula for water.
U<span style="vertical-align: super">238</span> - U238 is the most common isotope of uranium found in nature.
Other values are text-top, text-bottom, middle, top and bottom. You can also use units and percentages.
| Web Safe Font Examples | |
|---|---|
| serif | Times New Roman |
| Garamond | |
| Georgia | |
| sans-serif | Arial |
| Tahoma | |
| Trebuchet MS | |
| Verdana | |
| Monospace | Courier New |
| Lucida Console | |
| Monaco | |
| Cursive | Brush Script MT |
| Lucida Handwriting | |
All font names belong to one of five generic font families:
serif,
sans-serif,
monospace, cursive and fantasy. Web safe fonts are fonts considered best for legibility and compatibility. Some fancy script fonts can be hard to read and not all fonts are available on all systems. Some fonts on a Windows computer are not on Apple computers unless the user has added them. Different sources list different fonts as web safe. Few list any fantasy fonts as web safe and the ones that were listed didn't work for me. Personally, I think web safe
fonts are
boring, especially sans serif. If you look through you fonts folder you can find more interesting ones like Old English Text MT Regular or Edwardian Script ITC Regular but just because I find those on a Windows computer doesn't
mean that they will be on a Apple computer, a Linux computer, an android phone
or a iOS phone. Compatibility is another reason I see little point in changing
fonts. That said, here is how to do it with font-family:
<span style="font-family: 'Papyrus', 'Harrington', fantasy, serif;">Test</span>
Test
This example has three backups. If the browser doesn't find Papyrus it
tries Harrington. Failing that it looks for a default fantasy font and failing that it uses a default serif font. Named fonts are enclosed in quotes. Since I already used quotes for style="" I nested single quotes in
the double quotes.
An alternative to relying on what fonts the viewer has you can use Google fonts. When I checked Google Fonts had 1799 fonts. If the user is using a script blocker like NoScript they may not see Google Fonts. To use Google Fonts:
<span class="atma-semibold">Here is some sample text.</span>In the example above I linked to a font at Google Fonts. You can also download fonts and install them on your computer and upload them to your website. On your computer you can use the font with Word, Paint and other programs. On a website the CSS @font-face rule allows you to define your own fonts, which can be included on your web server and automatically downloaded to the user when needed.
<style> tags will look something like this:
@font-face {
font-family: 'MyWebFont';
src: url('path/to/myfont.woff2') format('woff2');
}
@font-face {
font-family: 'Neonderthaw';
src: url('../fonts/Neonderthaw-Regular.ttf') format('truetype');
}
<div style="font-family:'Neonderthaw';
font-size: 3em; color: #f00; text-align: center;
background-color: black; width: 4em;
text-shadow: 0 0 5px red, 0 0 10px red,
0 0 15px red, 0 0 20px red,
0 0 25px red, 0 0 30px red,
0 0 35px red, 0 0 40px red;">
Closed</div>