| When
we think of CSS, we think of the extended
functionality it provides. We think of better
looking forms and tables, and special effects.
But most people don't realize that CSS can
be used to contain your simple HTML customizations,
vastly reducing your html file sizes. |
|
|
|
Looking for a fast and affordable dedicated server hosting solution? Visit Marlin Web Hosting
and get new special rates on bandwidth!
|
 |
One effective
way to cut down on the amount of text on your page is
through the use of cascading style sheets (CSS). This
article assumes you have some basic knowledge of style
sheets, and how they work. If you don’t, don’t
fret – basic CSS tutorials are coming soon! If you
need to know how they work now, feel free to email me,
and I’ll walk you through the basics!
Instead of going back through the basics of setting
up style sheets, this article is meant specifically
for optimizing web pages by drastically reducing the
html content. If you’ve never tested this for
yourself, you will be shocked at how much of a difference
you can make on large html pages by simply removing
unneeded items such as font tags. In fact, if you look
at this site, you will rarely find a font tag... or
a number of other tags, for that matter.
When I use the word optimization, I not only mean the
word in terms of file size reduction, but also in terms
of usability, functionality, and efficiency. Style sheets
can optimize your pages in the following ways:
1) Your HTML file sizes can be reduced (the most obvious).
2) Your HTML code will be neater, cleaner, and easier
to read.
3) Changes in your pages can be made much more quickly
and easily.
4) Changing a font tag (along with many other tags)
on your CSS file will cause the changes to instantaneously
take effect across your entire site.
5) I should also point out that many more options are
available via CSS than you can possibly get from plain
HTML. Tables, fonts, lists, and much more can be customized
to a very precise degree, making for much better looking
web sites.
For optimization purposes, it’s important that
you don’t use an embedded style sheet... You know,
the kind that is inserted right into your <HEAD></HEAD>
tags. While this may help, and is probably most convenient
for single-page sites, most of our sites have multiple
pages... and linking to an outside style sheet will
be much more effective (especially when it comes time
to redesign your site).
Now, the first thing you want to do is get all of those
<font> tags, along with <b> tags, <strong>
tags, <i> tags, etc, off of your page, and onto
the style sheet. Let’s say that you have a section
of text that you would like to apply a specific set
of properties to. You want an Arial font face, 13px
font size (you have much finer control over text size
with CSS), bold font weight, yellow font color, center
alignment, and underlined text decoration. You’ll
need to give that specific set of properties a “class”
name. For our example, let’s call it “text1”.
Add the following code to your style sheet:
.text1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFF00;
text-align: center;
text-decoration: underline;
Now that you’ve defined the variables for “.text1”,
these variables will be used every time you call “text1”
with a class tag (class="text1"). How do you
do that? It’s simple, though there are a few ways
you can do it.
You can use <div> tags:
<div class=”text1”>Your
formatted text goes here.</div>
You can put it into your <p> tag:
<p class=”text1”>Your
formatted text goes here.</p>
Personally, I use a lot of tables, and I like to put
my class definitions into my <td> or <table>
tags:
<table>
<tr>
<td class=”text1”>Your formatted
text goes here.</td>
</tr>
</table>
This way, everything inside that table cell is formatted
as defined in “.text1” on your style sheet.
Now, take a look at the difference in this comparison:
Before:
<p><div align=”center”><font
face=”Arial, Helvetica, sans-serif” size=”2”
color=”#FFFF00”><strong><u>Your
formatted text goes here.</u></strong></font></div></p>
After:
<p class=”text1”>Your
formatted text goes here.</p>
If you have a great deal of formatted text on your
page, the difference this can make is obvious!
And don’t forget the other benefits I’ve
mentioned! Want to change ever font throughout your
website that is defined by “.text1”? Just
change your style sheet! Every page throughout your
page is instantly reformatted according to your new
specifications.
And don’t stop at just defining your fonts! With
style sheets, you can customize your tables, your form
fields, your buttons, your overall page properties,
and more. You get far more options than HTML provides
(especially when it comes to tables and forms), yet
you can eliminate all of the wasteful code that results
from HTML customization.
|
Danny (Editor of Webmaster Joint) has been in the adult Internet entertainment industry since 1997. Soon after beginning his first adult site, he became frustrated by the lack of educational sites for adult webmasters, and formed Adult Webmaster Gold. Since that time, he has been involved in a vast variety of services, including many types of adult websites, sponsorship programs, and many other webmaster programs. Feel free to Contact Him with any questions. |
Please Let Us Know Your Opinion:
Post your comments/questions here
|
