 |
|
^ click above ^ |
11.20.03
 By
BasicTemplates
Did you know you can customize your web page head tags (h1, h2, h3,
etc.) using cascading style sheets (CSS)? It is a quick and easy process
that allows you broader combination choices of font style, size, color,
etc. than the boring, standard HTML alternative.
In HTML head tags are defaulted in Windows to a Bold Times
font unless your visitor has their default system font changed. That's
it. That's the extent of your choices. When you use CSS with your
HTML head tags, the effects can be quite pleasant, easily coordinate
with your own site's color scheme, and you have thousands of possibe
choices.
In this article, we refer to "external" style sheets because this
is how we design all of our website templates and what we recommend
for the majority of web sites. If you are not familiar with the different
methods of CSS and how or when to use them, be sure to read our article,
"External,
Internal or Inline? Which Method is Best?" |
First,
create your external stylesheet in any text editor such as Windows
Notepad, name it whatever you wish (yourstyle.css in the example code
below) and then link it as shown in the head section of the page you're
coding.
<link type="text/css" rel="stylesheet" href="yourstyle.css">
Add the custom head tags below to your newly created style sheet.
You can add up to h6 if you like.
h1 {
font-family: Verdana,Arial,sans-serif;
color: #000000;
font-size: 14px;
font-weight: normal;
text-decoration: none;
}
h2 {
font-family: Tahoma,Arial,sans-serif;
color: #990000;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}
You can change the font-family, color, font-size, font-weight, and
text-decoration to whatever you like. The available properties for
each are shown below:
font-family: Whatever font name you wish. Use common font-family
names. Why? Reference our previous article, "Downloading
Special Fonts to View Web Pages?". Also, if your font-family name
is two words, it must be surrounded by quotation marks such as in
"Times New Roman".
color: Use whatever color code you wish. Make sure it starts
with the # symbol and is six characters long.
font-size: Use whatever pixel size you wish. But be sure to
use px and not pt or ems. Why? Reference our previous article, "Which
Font-Size? Px, Pt or Em".
font-weight: You can safely use the following property choices:
normal, bold
text-decoration: You can safely use the following property
choices: none, underline, overline, line-through, or blink (CSS1-compatible
versions of Netscape Navigator only)
Incidentally, many of the search engine optimization gurus will advice
that using head tags in your HTML will help your search engine rankings.
Because it shows emphasis or importance of the information it is headlining.
Whether or does or does not, we will leave that up to the SEO experts.
Nevertheless, head tags are a quick and easy way to customize your
headings for a more eye-appealing approach than standard HTML head
tags offer.
* Originally published at BasicTemplates.com
About the Author:
BasicTemplates.com designs
Website Templates with External CSS and has been providing webmasters
worldwide with affordable template designs since 1994. BasicTemplates
currently offers 650+ designs which may be purchased individually
or get complete access to all templates via an affordable membership
plan. Most templates were strategically designed with interchangeable
graphics and elements to increase the potential number of design layouts
for the end user. Each layout utilizes an external style sheet for
easy site maintenance and to ensure fast page load.
Read this newsletter at: http://www.thedevweb.com/2003/1120.html |
|
| From
the Forum: |
| CSS target loading |
 How could a person utilize CSS to have a page behave similar to frames (allowing target content to fill the same area of the screen without refreshing the entire page)? ...
|
|
|
