Fonts:
The Font Tag in HTML is deprecated, meaning newer browsers at some point will not parse this tag. Consider using CSS styles instead. Here's how:
<span style="font-family:verdana;" font-size:11px; color:#00000;">
Or more simply:
<span style="font:11px verdana black;">
Padding:
CSS has a terrific padding method you can employ to add to spans, tables, forms, etc. It will override any pre-set HTML definitions, such as a table's cell padding attribute:
<table style="padding:1px 1px 1px 1px;">
Or:
<span style="padding:1px 1px 1px 1px;">
The padding has four elements: Top/Right/Bottom/Left, in that order.
Backgrounds:
CSS has an elegant feature that applies background colours to elements defined. For example, to place a yellow background behind some text, you could use this CSS coding:
<span style="background:#FFFFCC;">Some Text</span> example: Some Text
Text:
Text can be fine-tuned using CSS in many, many ways. Just to give you an example, we can assign letter and line spacing to some text to open up the lettering and the spacing like this:
<span style="letter-spacing:1px; color: blue; line-height:150%;">Some Text<br>Some More</span>
example:
Some Text
Some More
Preloading images with CSS
Cascading Style Sheets are a very effect means of preloading the images for your WebPages. The idea is that on the homepage of your site, you can call some of the images that you are going to be needing elsewhere in your website. The effect of this is the images are called off the server and cached in your visitors browser. When they go to the next pages, they don't have to wait for the images as they will already been in their browser waiting to be displayed.
The method to make this work is simple. Firstly, to your style sheet add
<style type="text/css">
preload {display:none;}
</style>
then as the very last thing on your web page, call the images with the class "preload"
<img src="images/oneimage.gif" alt="this is the first image" title="this is the first image" height="200" width="200" class="preload">
<img src="images/anotherimage.gif" alt="this is the next image" title="this is the next image" height="200" width="200" class="preload">
<img src="images/onemoreimage.gif" alt="this image is after that" title="this image is after that" height="200" width="200" class="preload">
by using the class "preload" in this case, the images will be called, but not displayed. Ensure, however, that you don't use the class "preload" on the images that you actually want to display on that page. |
