Adding New Text & Title Styles

Editing the web template font css styles

Pinned Note New Classes
Instructions for adding a totally new font size or color class. The css file to edit may be named "style.css", "coolstyle.css", "corporatestyle.css" or "menu.css". In color theme templates, css files will be in the "colors" folder. Edit css files in Notepad, TextEdit or a plain text editor.

Step 1):
Open your css file for editing (see above for which files to edit).

Step 2):
Select and copy one of the existing "class" lines as shown in the example below:

.title { color: #FF3300; font: 15px arial, sans-serif; font-weight: bold; }

Paste it just below itself.

Step 3):
Edit the new pasted line with a new class name as seen below.

.titlebigger { color: #FF3300; font: 15px arial, sans-serif; font-weight: bold; }

Edit the new line with some new sizes or colors.

.titlebigger { color: #000000; font: 22px arial, sans-serif; font-weight: normal; }

You have created a new style class. Proceed to edit one of the HTML pages and add your new titlebigger style to some text.

Step 4):
Open one of the HTML pages, for example open the about.htm. Look for code similar to what is seen in the example below. Your code may be slightly different but should include the class=.

<span class="title">ABOUT US</span><br>

Step 5):
Change the class name as in the example below:

<span class="titlebigger">ABOUT US</span><br>

Open the HTML webpage in your browser and hit the "refresh" button.

HTML Headings

Making headings in the template pages - <h1> to <h6>:
A heading is HTML code and can be used for titles in the template pages, however, you will want to style them using CSS. Using headings may improve your website search engine ranking.

Note: Most newer responsive templates are already setup to use heading tags. If your template already uses <h1> to <h4> tags you can skip this section. Check the first title in your "about.htm" to see if it uses an <h1> tag.

Example: Add the following to any page:

<h1>This is a Heading</h1>

The results will be the following with a double break after the heading title:

HTML Heading example

Styling the heading:
You will now want to "style" the <h1> tag to remove the double break and use the font and color of your choice. You can add the following to your template css file for a black heading:

h1 { color: #000000; font: 16px arial, sans-serif; font-weight: bold; margin: 0px 0px 1px 0px; }

You can optionally replace all the "title" classes in your template pages with heading code. Locate the following in your HTML pages:

<span class="title">
About Us<br>

And replace the above with the following code:

<h1>About Us</h1>

Or you can skip adding any new css code and just replace the above with the following and add the "margin: 0px 0px 1px 0px;" as shown above to the existing css file ".title" class code:

<h1 class="title">About Us</h1>

Optionally css can be added using what's called "in-line css" as in the following example:

<h1 class="title" style="margin: 0px 0px 1px 0px;">About Us</h1>

Caution Note: Use only a single heading H1 tag per page, and 5 or less H2 tags, otherwise it may be seen as spamming by Google.

For more help with HTML headings see Formatting H1 Heading Tags For SEO and also HTML Headings at W3Schools.

Related Topics:
Changing Link Colors
Changing Font Colors
Editing the Flash Animation
Adding a Second Link Class (advanced)