CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!
Normalized Style Sheet
Because each browser has slightly different default settings, you may want to build rules into your style
sheets to define baseline settings for each element. For example, different browsers assign the <h1>
element to different sizes and margins. By assigning your own size and margins to <h1>, you can
standardize its appearance in all browsers.
The simplest approach (and the easiest approach to maintain) is to create a baseline set of rules for
all elements and to load those rules in the first style sheet you attach to a document. You can load a small
set of rules that reset all elements to the simplest of styles as shown in Listing 1-2. Or you can load a
more extensive set of rules that create a standard style for your site, such as those shown in Listing 1-3.
You can find standard sets of baseline rules on the Internet, such as Yahoo’s YUI Reset CSS rules (see
http://developer.yahoo.com/yui/reset/).
Loading a separate baseline style sheet affects the speed at which your page is rendered (see the
sidebar “How Fast Will Your Page Load?”). Thus, for performance reasons, you may want to combine
style sheets or move styles into the <style> section of the HTML document.Listing 1-2. Simple Baseline Style Sheet (Similar to Yahoo’s YUI Reset CSS)body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,
blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var
{ font-style:normal; font-weight:normal; }
ol,ul { margin:1em 0; margin-left:40px; padding-left:0; }
ul { list-style-type:disc; }
ol { list-style-type:decimal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; }HOW FAST WILL YOUR PAGE LOAD?
How fast your document renders is important. A web page that renders within 0.5 seconds is considered
instantaneous; 1 second is fast; 2 seconds is normal; more than 2 seconds becomes noticeable; and about
6 seconds is all most broadband users will tolerate. As a rule of thumb, the latency involved in looking up
each file typically takes 0.1 to 0.5 seconds—this is on broadband connections and does not include the
time it takes to actually download a file. Because of latency, a fast page can typically load three extra files,
such as one style sheet, one JavaScript file, and one image, and a normal page can load about seven extra
files.To help with performance, a browser caches files. This may help on subsequent downloads, but it does not
help the first time a page downloads. Furthermore, cached files speed performance only when the server
sets their expiration date to expire in the future. When the refresh date on a cached file expires, a browser
asks the server whether the file has changed. This takes about 0.1 to 0.5 seconds per file—even if the file
has not changed and does not need to be downloaded again. Thus, it is important to set the expiration date
as far in the future as you dare. How far in the future depends on how often you expect the file to change
on the server. The problem is that if you change the file on the server before the expiration date, users will
not get the updated file because browsers will not bother asking for it, unless you clear the cache.