HTML and CSS Basics - HTML5 with CSS3 - page 36

Compact formatting condenses each rule to a single line, thus shortening the vertical scrolling, but it can
demand horizontal scrolling in your text editor when a rule includes many declarations in a row. Listing 2-3
demonstrates the same set of rules compacted to single lines and with unnecessary spaces removed.
Listing 2-3. CSS rules in compacted format
h1,h2,h3{color:teal;margin-bottom:.5em;}
h1{font-size:150%;}
h2{font-size:130%;}
h3{font-size:120%;border-bottom:1px solid gray;}
Another advantage of compacted rules is a slight reduction in file size. Spaces, tabs, and carriage returns
are stored as characters in the electronic file, and each additional character adds another byte to the
overall file size that must be downloaded by a client. A long style sheet might be a considerably larger file
in an extended format because of all the extra space characters. In fact, you could choose to remove all
excess spaces and place your entire style sheet on a single line for optimal compression, but that might be
overkill and make your CSS much harder to work with. To reconcile maximum readability with minimal file
size, some authors work with style sheets in an extended format and then automatically compress the
entire thing to a single line when moving it to a live web server.
A few extra spaces in a compacted rule can at least make it easier to scan, spreading a one-line rule out a
bit by including spaces between declarations and values. For lack of a better term, we'll call this format
semi-compacted , as shown in Listing 2-4.
Listing 2-4 CSS rules in semi-compacted format
h1, h2, h3 { color: teal; margin-bottom: .5em; }
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; border-bottom: 1px solid gray; }
In the end, it's entirely up to you. Write your style sheets in a way that makes sense to you. If you
collaborate with other web developers—as you almost surely will if you build websites professionally—
authoring readable CSS will be beneficial to the entire team.
CSS Comments
You can add comments to your style sheets for the same reasons you might use comments in HTML: to
make notes, to pass along instructions to other web developers, or to temporarily hide or disable parts of
the style sheet during testing. A comment in CSS begins with /* and ends with */ , and anything between
those markers won't be interpreted by the browser. Just like comments in HTML, CSS comments can span
multiple lines.
/* These base styles apply to all heading levels. */
h1, h2, h3, h4, h5, h6 { color: teal; margin-bottom: .5em; }
/* Adjust the size of each. */
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; }