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 BasicTips.com
Click here to sign up for FREE B2B / Tech. newsletters from Murdok!
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.
