Join the List
Bravenet Home
|
Webmaster Tips and Tricks
Newsletter Archives
CSS: Custom Head Fonts
October 10th, 2000
Did you know you can customize the Head Fonts (H1, H2, etc.) using Cascading
Style Sheets? It's a simple and effective solution that lets you pre-define
how your heads will display. In HTML, heads are defaulted as a Bold Times
font, but you can change them with CSS to add a new font, color and size.
Here's how to do it. First, you create your stylesheet, or include it as a
reference in the head section of the page you're coding. It's easiest to use
just one stylesheet and reference that as an included file, like this.
<LINK TYPE="text/css" HREF="mystylesheet.css" REL=stylesheet
TITLE="mystylesheet">
Otherwise, you can write the style directly to a page inside the Head
section, but within the STYLE tag.
H1 { font-family: verdana,arial,sans-serif;
color: #000000;
font-size: 16pt;
font-weight: normal;
text-decoration: underline }
H2 { font-family: tahoma,arial,sans-serif;
color: #003366;
font-size: 12pt;
font-weight: heavy;
text-decoration: none; }
As you can see, we are able to define the Heads with color, font size in
points, font weight and decoration. Play with these attributes and have some
fun ... Finally, unlike some other CSS functions, this will work in both
Explorer and Netscape, although the displays are somewhat different :)
|
|
Build your very first live Database Driven Website using PHP & MySQL. Instantly apply working code examples from the book to your Website. Get it Now! 295 pages.
|
|
Write faster loading, dramatically smaller pages. ‘Now You Too Can Easily Create Modern 'Table-free' Websites Using CSS from scratch’. Get it Now! 480 pages.
|
|
 |
