Defining your Own tags using Stylesheets

Have you ever though how useful it would be if there was an HTML tag that provided the special formatting that you want to use for a number of entries on your page. Well using stylesheets, you can effectively define your own HTML tags that provide whatever formatting you want. All you need to remember is that anyone using earlier browsers that don't support stylesheets will not see the effects that you define in these tags.

The first thing that you need to do is to decide on a name for your new tag. Let's say that you want to be able to highlight certain text on your page by displaying it in red on a white background. Let's call this tag hilite.

The first thing that we need to do is to create the stylesheet entry that we need for our new tag. In this case the entry needs to read as follows (don't forget to put the dot on the front):

 <style type="text/css">
.hilite {background-color:#ffffff; color:#ff0000}

Now we can use this tag to create sections of text that are highlighted by being displayed in red on a white background by including the text between <span class="hilite"> and </span> tags like this. You can use the span tag with any of the class definitions that you define in your stylesheet anywhere within your page.

You can create your own tags like this that predefine any of the display attributes associated with the text that you are displaying. The types of attributes that you can pre-define for your own tags include:

As another example, I have preceded this entire paragraph with a <p class="small"> tag which is defined to display the text at 12 pixels high (using font-size:12) instead of the normal font size. In this case because I already have all of the text to be affected enclosed within <p> tags, I can attach the class to that tag instead of having to use a <span> tag. You can even nest the tags that you define inside of one another to gain the affects of both. Where both tags have different definitions for the same attribute then the one nearer the text will be applied.

You can also nest your own tags inside of any normal HTML tags (including any whose attributes you have overridden using stylesheets). For example:

This Heading Contains Highlighted Text


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow