HTML and CSS Reference
In-Depth Information
If you're using a background image, make sure that it doesn't interfere with
the text —Some images may look interesting on their own but can make text diffi-
cult to read when you put it on top of them. Keep in mind that backgrounds are
supposed to be in the background . Subtle patterns are always better than wild pat-
terns. Your visitors are visiting your pages for their content, not to marvel at your
ability to create faux marble in your favorite image editor.
When in doubt, try asking a friend to look at your pages. Because you're already familiar
with the content, you may not realize how hard your pages are to read. Someone who
hasn't read them before will tell you that your text colors are too close to your back-
ground color, or that the background image is interfering with the text. Of course, you'll
have to find a friend who will be honest with you.
Making the Most of CSS and JavaScript
Web design these days is about minimal markup, styled using CSS. Sticking with the fol-
lowing rules of thumb will make sure that your sites load quickly and efficiently.
Put Your CSS and JavaScript in External Files
Nearly all browsers maintain a cache of recently loaded content, the more content on
your site that can be cached, the more quickly pages on your site after the first one will
load. You should put your styles in external style sheets and your JavaScript in linked
scripts whenever you can. Linked files will be cached when users visit the first page on
your site and then will be retrieved from the cache on subsequent page views.
There are also advantages to this approach in terms of saving you time, too. If the styles
for each page on your site live in <style> tags on those pages, you have to update every
page when you decide to make a change. It's much easier to make those changes in an
external style sheet.
You can even include styles for specific pages in a single external style sheet if you use
the class and id attributes cleverly. The <body> tag for a page can have a class or id, just
like any other element. So if you want to the pages in the news section of your site to
have one background color and the pages in the “about us” section to have another, you
could use this <body> tag for “about us”:
<body class=”aboutus”>
For news, you'd use this one:
<body class=”news”>
Search WWH ::

Custom Search