| |
When you
use "external" CSS (cascading style sheets) to control the
basic cosmetics of your web site, you need only to edit those
cosmetic properties in one file to update ALL of your web
site's pages. This can be done from your server *if* your
hosting service allows you to edit your site from a control
panel, or you can edit the style sheet using a text editor
on your system and upload it to your server.
Cosmetic properties are defined as characteristics that do
not interfere with your visitors' navigational experience.
Not all CSS properties are safely compatible with all browsers,
so you must be careful what properties you use. You do not
want to negatively effect your visitors' experience at your
site.
Continued ... |
| |
Go to this page and roll
your mouse over the links and watch what happens. Ha! Didn't
expect that again, did you? Okay, maybe you did. But go ahead,
try it again, and then we'll show you how we did it.
In addition to the hover elements we added in Part 1, we have
added several new elements. We added a text-transform property
to make all hovers uppercase letters spaced 2 pixels apart.
We added padding to the hover consisting of 2 pixels on the
top and bottom and 1 pixel to the right and left. To make it
jump out further, we included a solid blue background border
that is 2 pixels wide at the top and bottom with a 3 pixels
wide border on the left and right in green.
Continued ...
|
|
This
is the third article in a series of "Cheap Tricks with CSS".
This little trick will change the overall cosmetic appearance
of your web site by simply changing the font face that is controlled
by CSS (cascading style sheets).
Oh no! I think I just heard some shrill
screams from all those web designers out there who use ordinary
HTML. ;) And I do believe I heard some heavy sobbing from all
those web template designers out there who use ordinary HTML.
LOL ... not to worry though. Since you are a frequent visitor
to BasicTemplates.com and likely a happy
member, YOU are using external CSS to control your fonts,
because you are a smart cookie, right?
Continued ...
|
|
UhOh! Did I hear more shrill screams from all those web designers
out there who use ordinary HTML? ;) And I do believe I heard
heavy, uncontrollable sobbing from all those web template designers
out there who use ordinary HTML. LOL ... not to worry though.
Since you are a frequent visitor to BasicTemplates.com and likely
a happy member, YOU are using CSS to control your color codes,
because you are a smart cookie, right?
Continued ... |
|
Please review the past article first. Do you see how a single image
can be used as a border by limiting it to an x or y axis with the
assistance of CSS? However in the next example we added an element
to instruct CSS to fix the background and only allow the text to
scroll. View example HERE.
Okay, now that you understand that, add the snippet of code below
to the body tag of your external style sheet to fix a background
image to your page and allow "only the text" to scroll on the y
axis.
Continued ... |
|
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".
Continued ...
|
