CSS » Nice text
Set the font style of the whole page's text
You can change the font size, text, line heights and character spaces in the whole hl page. Not only the text you write your self, but the stable buddies and the horses, and all the rest. Insert this code chunk on your hl page (internal css). Don't forget to put the style tags at the top and bottom of the chunk.
First the non tabular text:
body {
font-size: 10px; The size of all the text
font-family: Verdana; The font
line-height: 11pt; Space between the lines
The font color is set by the drop down menu on your hl page (in the colors section)
Then the colors/font of the text inside the tables. Like in your expanding table's writing area and your stable buddy list:
td {
font-size: 110px; Pretty much self explaining, but it's the size of your text
font-family: Verdana; Font type, can be anything installed on your computer (not downloaded ones)
line-height: 11pt; Space between the lines
}
Other styles and variants are:
font-style:italic; (or oblique)
Set the color of the headings
h1 {color:#00ff00;}
h2 {color:#dda0dd;}
Will give header 1 the color #00FF00 and header 2 the color #dda0dd. To insert a header on your hl page, write
<h1>What you want for a header</h1>
on your HL page (not in the style sheet). Switch 1 with 2 if you want the other header.
Spesify the space between characters
h1 {letter-spacing: -3px;}
h4 {letter-spacing: 0.5cm;}
Set the background color of the text
span.highlight { background-color: yellow;}
And when you want the highlighted text to show, write
<span class="highlight">This is a text.</span>
Increace height between lines
You can make the space between lines bigger by setting:
line-height: 11pt (or more)
Place it all together
You can place all the settings for one type of thing in one place. Let's say you want to set the font type, line height and style for your headings. Then the code would look like this:
h1 {
font-size: 10px;
font-family: Verdana;
font-color: blue;
font-style: italic;
}
And you can place all your declarations in one style sheet, just remember to put tags around the properties. The code could look like this:
h1 {
font-size: 10px;
font-face: Georgia;
}
h2 {
font size: 10pt;
font-face: Georgia;
font-color: Pink;
}
td {
border: 0;
}
The link color settings are in the tutorial called Links in nice colors, and can also be placed in the same chunk, the same way I've placed the h1, h2 and td settings... The chart settings found in the tutorial Fancy charts can also be placed in the same chunk as the other settings.