Webconcern's

Online Tutorials

With CSS, it's possible to place text on text. One reason for doing this is to create the appearance of having an image on a page without creating an actual image. This gives it a graphic look, without adding the time it takes to download a graphic.

Near the top of the page you'll see the words "Webconcern's" in large gold-colored lettering, and imposed over the top of that is "Tutorials" in black lettering. It looks like an image instead of plain text. This will show you how to achieve that effect.

In the HEAD section of my document I put the following style tags:

<STYLE TYPE="text/css">
<!--

H2.spin {position: relative;
         top: 5px;
         left: 5px;
         font: bold 36pt times, serif;
         color: #CCCC99}

H3.spin {position: relative;
         top: -40px;
         font: bold 18pt Arial, sans-serif;
         color: #000000;
         margin-left: 40px;
         margin-bottom: 10px;}

-->
</STYLE>

If you went through the 3-part Introduction to CSS you know that adding a full stop and any word (.anyword) after a selector (the HTML tag) creates it's own class of style for that tag.

So, we've created two classes with the above code. They are for two different heading tags with both classes being called "spin." By including the "position: relative" property and value to the spin class, we're telling the browser to place any H2 or H3 heading with that class identifier relative to the position the tags are used on the page.

With the H2 tag, I set the position 5 pixels from the top and 5 pixels from the left of where they would normally be displayed. That means the text will be displayed 5 pixels lower and 5 pixels to the right of where the H2 tag would be displayed without the CSS class added. The font color, size and type were also set.

In the H3 tag I set the top position to be MINUS 40 pixels. This caused the H3 text to be placed on top of the H2 text because it was moved 40 pixels above where it would normally be displayed. I then used a margin-left property to demonstrate how to push the H2 text to the right so it lined up with the right side of Webconcern's. Next, I used a margin-bottom property to control the space under the tag, otherwise there would have been a much bigger gap between the H3 heading text and the actual page content.

Now, to use those heading styles in your web page, it's coded like this:

<h2 class="spin">Webconcern's</h2>
<h3 class="spin">Online Tutorials</h3>

By adding the class="spin" to the H2 and H3 tags, we call our spin style into use and make magic happen.