© Copyright 2003 by BasicTips.com, division of BasicTemplates.com
This is the sixth article in a series of "Cheap Tricks with CSS" which
we are publishing. If you have not read our other "Cheap CSS Tricks"
articles, you can access them here:
Part 1: Cheap "Link"
Tricks
Part 2: Cheap
"Link" Tricks
Part 3: Cheap
"Font" Tricks
Part 4: Cheap
"Color" Tricks
Part 5: Cheap
"Background Image" Tricks
In this CSS article we show you several cool text effects you can add to your
web pages using custom CSS "classes" within "external" cascading
style sheets. Be sure to familiarize yourself with why "External"
style sheets are the most effective and logical way to design a web site (rather
than internal), by reading our article, "Advantages
of Using External CSS in Web Design".
It is important to note that older browsers may not be able render this
effect but in no way does it interfere with the functionality of the web
page. You should also be aware that these custom classes can be applied
to any HTML tag; you are not limited to using them with the HTML tags
we have used in the examples. Experiment, experiment, experiment and have
fun too! If you find a super cool effect you would like to share with
our visitors, drop
us a note, and we will publish it (with credits to you) in our future
CSS articles which are now syndicated on thousands of web sites worldwide!
Instructions: Add the code shown in red within the examples to your external
style sheet. Then apply the custom class to the appropriate HTML tag,
ie: span, p, td, a ... like this example: <p class="btspaced">Your
text here.</p>
Spaced Text
.btspaced { letter-spacing: 2px; }
(The code above when applied as a class to an HTML tag will
space your text 2 pixels apart. Change the pixel number to whatever
you wish.) |
Background Colors
.btbg { background: #CCCCCC; }
(The code above when applied as a class to an HTML tag will cause
that tag to have a light gray background color. Change the hex color
code to whatever you wish.) |
Spacing Between
Lines
.btlinesp { line-height: 25px; }
(The code above when applied as a class to an HTML tag will cause
that tag to space your text lines 25 pixels vertically apart. Change
the pixel number to whatever you wish. The higher the number the farther
apart your text lines will be.) |
Bordered Text with
Padding
.btbrdr { padding-top: 0px; padding-right: 4px;
padding-bottom: 0px; padding-left: 4px; border: #999999; border-style:
dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width:
1px; border-left-width: 1px}
(The code above when applied as a class to an HTML tag will cause
that tag to have a medium gray, dotted border 1 pixel wide. It also
adds 4 pixels of padding to the left and right of the text. Change
the pixel numbers and hex color codes to whatever you wish.) |
Text Color
.bttextblue { color: #0000CC}
(The code above when applied as a class to an HTML tag will change
your text to a blue color (#0000CC). This is especially effective
if you want to emphasize a section of text within a paragraph. Apply
the custom class to the <*span>beginning
and ending<*/span> tags. Change the hex color code to
whatever you wish.) |
Using "custom" classes within external style sheets rather
than internal CSS makes these classes available to all of your web pages
without having to type all the example code (as shown above in red) over
again each time. It also allows you to change any of the properties in
one file and it will automatically change it on all of your pages!
Example Scenario: Let's imagine that you wanted to change the text color
blue #0000CC to a deeper shade
of blue #000099. You would simply
make that color code change in the custom class named .bttextblue in the
external style sheet and ALL of your web pages linked to that external
style sheet would be changed immediately. It's like magic!
If however, you coded the blue text using ...
HTML font color tags <font color="#000099">#000099</font>
- or- used Internal CSS <span style="color:#000099">Example
of Internal CSS</span> ................
YOU would have to make that change on EVERY web page where it
appeared. Argh! The thought of that extensive, unnecessary coding makes
me shiver with pain and creates a "send migraine to brain" message
directly to my cerebral cortex! :[ Now I ask you, why wouldn't
you want to use custom classes in External CSS now that you know how?
:) Now that you know how to use CSS properly, don't waste anymore
of your valuable time with redundant HTML and internal CSS code. It makes
maintenance a nightmare and increases page load time.
Note: Remove the * character everywhere it appears in the code
above.
Return to CSS Tutorial Index
Get
your Business Domain Name for only $9.95,
Right Here, Right Now!
