Hypergurl Cascading Stylesheets Tutorial #11
CSS Class Selector
Making your own class selector

Handy Tip:Due to browser incompatibility problems, many webmasters still use tables instead of style sheets to control layout. Having both style sheets and tables on the same webpage usually isn't a good idea as it may cause unexpected problems in some browsers.

Cascading Stylesheets Tutorial #11

Making a CSS Class Selector

You can create your own class of code and do this with any html tag you want style applied to, by making css class selectors.

Within the style code in the head of your document, you add .whatever (dot whatever) just like this P.whatever, and you make a class of your own. Here's how I would do it to our old friend "overlapping text".

First the head code:

<STYLE TYPE="text/css">
P.hyper { font-size: 30pt; color: blue; position: relative; left: 50px; top: 20px; z-index: 1 }
P.gurl { font-size: 30pt; color: green; position: relative; left: 65px; top: -55px; z-index: 10; font-family: merced, forte, arial, serif }

Then when you code what you want in the body of your document you just add the following;

<P class="hyper">I Just Love</P>
<P class="gurl">Overlapping Text</P>

I Just Love

Overlapping Text

So there you have it. You can call your class anything you want. You can make as many classes as you want. This is the power of CSS.

We now have an online web site tool that helps you to easily generate code for overlapping text click here.

Search Site
Custom Search

Site design copyright 2000 - 2013 Tanya Puntti Hypergurl.com