Simple CSS text formatting tutorial

An adult webmaster resource...

Written by Tom from Tom's Newbie Booster

This is a short tutorial about something you can do make your text ads just a bit more juicy. I'm not going to go into how effective writing text ads can be, because we all know they're the bomb! What I want to look at is how you can format them with some special code. This code will let you go much further with the size of text, and other options, and is more efficient and forward thinking than adding font, bold, and other tags. We're going to use CSS - but in a simple and direct way that you'll love!

Meet the tag...

1) Start a new HTML document with a black background, and white text. Set the default link color to red.

2) In the body of the page, put some text. This can be a few words saying anything you like. Here's my example.

Example 1

3) Surround your text with this tag:

Hello TNB!

4) Preview the page and see what effect this tag has had:

Example 2

HANG ON! Something's gone wrong here. This hasn't done a thing. Don't get too worried just yet. The SPAN tag is just a skeleton that we're going to flesh out in a second. But it's important to understand 100% how the tag works, so that we can fully customize it to suit our own needs.

Adding text effects to the SPAN tag

I'll just talk briefly about the format of the span tag. There are 2 parts:

The opening bit: 
The closing bit: 

The closing part never changes - that's the easy part.

The opening tag is like a drawer which contains special commands that will affect how any text that appears within the two parts of the tag will be rendered on the viewer's screen. To add special properties to the text, we must also add this to the start tag:



And in that style="here" goes all the effects we're going to add to the text. You can put as many special effects into this tag as you like such as - bold, color, and more. The format is always the same:

effect-name: desired-effect;

name colon space name semi-colon

Confused?

Don't be - this is actually easier than it sounds. Let's put it into practice:

1) Go back to your text, and add this to the first tag:



2) Now add this:



3) Save and preview, and you should see something like this:

Example 3.

Cool. If you've successfully managed to change the text to a different font, the rest should be easy.

A challenge!

Next, here's what I want you to do. Take your time and, one-at-a-time, replace font-family: arial; with each of the following, testing it after each change.

font-size: 24px;
font-weight: bold;
color: #fff000;
font-weight: bold;

If nothing happens - make sure you look at WHY, and keep playing until you can confidently add and alter this tag as you see fit. When you're ready - move on.

Adding them all

There's going to be times where you want text to be bold AND arial AND a color. That's not a problem with this special tag. Look at how we could set out this tag:

Hello TNB!

Example 4

The elements are separated by a space. And you can add any mix of them that you'd like to. Here's your next mini-task. Add ALL of the special text effects, and play around with them. Change the color, the size, the font, and more. How BIG can you make the text? Can you make it italic?

Putting it all together - making a text ad

OK, so we've mastered this special effects tag now. How about writing 3-line text ad for one of your sites with it?

1) Pick a niche paysite and a sponsor.
2) Take the tour and find something that you think's worth promoting.
3) Write a 3 line ad.
! The first line should be a large, catchy header.
! The final line should be a link into the site...
4) Use a separate SPAN tag for each line.

Here's my final ad:

Example 5

Let me see what you come up with, if you build any ads in this way.

In conclusion

Here's the tag that we've been playing with, with a number of effects in place:

Text here

Have a play with it. Try using it to write and format some kinky ads and see what you think. It's got a lot of advantages over the older FONT tag, and I think you'll find it helpful.

It might help to copy and paste the above tag into a text file for later use.

TOM ^"^