HTML and CSS Reference
In-Depth Information
TEXT REPLACEMENT
Our choice of fonts on the Web is very limited. We could get custom fonts by
using tools such as sIFR, but they require users to have JavaScript enabled.
An easier solution that works on any browser is to create an image of the
text in the font you want and use it as the background instead. This way, the
text still appears in the markup for search engines and screen readers, but
browsers will show your preferred font.
For example, your HTML markup could look like this:
<h3 class="blogroll">Blogroll</h3>
If we have a 200 by 75 pixel image of this text in a nicer font, then we could
display that instead using the CSS as follows:
h3.blogroll {
width: 200px;
height: 75px; /* So that the element will show the whole
image. */
background:url(blogroll-text.jpg) 0 0 no-repeat; /* Sets
the background image */
text-indent: -9999px;/* Hides the regular text by moving it
9999 pixels to the left */
}
EASIER BULLET POINTS
Bullet in an unordered list can look clunky. Instead of dealing with all of the
di
"
erent list-style properties, we can simply hide the bullets and replace
them with a background image. Because the image can be anything you
like, the bullets will look much nicer.
Here, we turn a regular unordered list into one with sleek bullets:
