Add to HTML File Header
<link rel="stylesheet" href="{cssfile}" />
<link rel="icon" href="favicon.png" type="image/png" />
<link rel="shortcut icon" href="favicon.png" type="image/png" />
A Basic CSS File to Start Playing With
body
{
font-size: 1.0em;
background-color: #f0f0f0;
}
header
{
background-color: #22BB32;
border: 2px solid #000;
border-radius: 5px;
margin-top: 0;
padding-top: 5px;
padding-bottom: 5px;
font-size: 1.6em;
font-weight: bold;
}
footer
{
margin-top: 10px;
font-size: 1.0em;
font-style: italic;
border-top: 2px solid #000;
}
img.border
{
border:2px solid #000;
}
code
{
font-family: monospace;
font-size: 1.0em;
}
div.box
{
display: inline-block;
border: 2px solid #000;
padding: 10px;
background-color: white;
font-size: 1.0em;
font-family: monospace;
white-space: pre-wrap;
}
Add a Font Face?
Search the web for fonts.
Download the font file(s) to use them.
(I put them in the same folder as my web pages
so I can find them.)
Question: which fonts are built into the browser you are using?
@font-face
{
font-family: ArchitectsDaughter;
src: url('ArchitectsDaughter.ttf');
}
body
{
font-size: 1.0em;
font-family: Verdana,Helvetica,Arial,sans-serif;
background-color: #f0f0f0;
}
header
{
font-family: ArchitectsDaughter;
background-color: #22BB32;
border: 2px solid #000;
border-radius: 5px;
margin-top: 0;
padding-top: 5px;
padding-bottom: 5px;
font-size: 1.6em;
font-weight: bold;
}
footer
{
margin-top: 10px;
font-size: 1.0em;
font-style: italic;
border-top: 2px solid #000;
}