Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
CSS
Web Design
Graphic Design
Color Theory
Promotional
Make More Money
Timesavers
Business Ethics
Glossary of Terms
Reviews
Marketing
Business Resources




Name
Email

Link to Us!

CSS
Email this article  :  Printer friendly page


Custom Head Tags with CSS

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.


Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Newest Articles in
CSS
Using Multiple External Style Sheets
Resizing Form Input Boxes, Buttons, and Text with CSS
Novel Paragraph Spacing with CSS
Is Your Site Ready for the Holidays? Part 3
Is Your Site Ready for the Holidays? Part 2

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates