Webmasters Log

What gets me even more than all of the above is the tag. You all know it, and most of you, I think, would love to marry it if you could. But let's jump ahead a few years, and learn some CSS today. CSS stands for Cascading Style Sheets, and it's a way to code your HTML so it's easier to manage. Now, I'm keeping it VERY simple this week. Today we are just going to make it so those of you who have a singular font for your site can cut your pages down in size, while also learning how to remove those awful tags.

Open up a new HTML page and in the area just above the tag place the following:




What you've done here is told the browser that you have CSS code with the . The stuff between this tag is the actually meat of the code.

Let's break it down piece by piece. First, you all know the

tags. Well, the

is telling the browser you want to change the way it should interpret the

tag. You are telling it you want a font size of 10 points. You're also telling it that you want to use Verdana, and if that font's not available you want to use Tahoma... and if THAT'S not available then use Arial. (Keep in mind that if none of these fonts are around, it will default to the browser's default font, which is typically Times New Roman.)

After your tag, type:

Hello World!

Notice there is no tag? That's because the browser is using your CSS code to produce the layout for the "Hello World" text. Now, if you don't put your text in a

tag, it will default to the browser's default font.

Here are a few other examples for you to play with. Feel free to add these to a test page, make sure they are between the tag I showed you above, and play with the settings.


H1 { font-size: 16pt; font-family: Verdana, Tahoma, Arial font-weight: bold }
H2 { font-size: 14pt; font-family: Verdana, Tahoma, Arial font-weight: bold }
H3 { font-size: 12pt; font-family: Verdana, Tahoma, Arial font-weight: bold }
H4 { font-size: 10pt; font-family: Verdana, Tahoma, Arial font-weight: bold }
H5 { font-size: 8pt; font-family: Verdana, Tahoma, Arial font-weight: bold }
H6 { font-size: 6pt; font-family: Verdana, Tahoma, Arial font-weight: bold }

And for those who want to put your own dashed orange lines under certain words, use this code (and be sure to include your tag.

acronym { border-bottom: 1px dashed #FF9700; }

As a final note, you can pretty much change any current HTML tag to do almost anything you want (within the confines of CSS, of course). So feel free to play around with them and throw away that old tag! Next week we'll play some more with CSS and formatting, so get ready!