HTML and CSS —

Commenting and Formatting CSS

Just as you can add comments to your HTML files to describe sections, hide markup and content from the browser, or add directives to fellow document authors, you can comment your CSS documents. And just as HTML can be written with indentations or other personal formatting preferences, so can CSS.

Commenting CSS

CSS comments are different than HTML comments. CSS comments open with a forward slash and an asterisk, and close with an asterisk followed by a forward slash. Any content within that area is not interpreted by the browser (see Example 7-5).

Example 7-5. Commenting CSS
/* global styles */

body {
          background-color: orange;
          font-family: Arial, Helvetica, sans-serif;
          color: white;
          }

/* layout styles */

#nav {
           position: absolute;
          top: 0;
          left: 0;
          width: 150px;
          }

/* hide this style and comment temporarily

.warning {
          color: red;
          }

John: please unhide the warning style when you're ready to launch */

Everything in bold will not be interpreted by the browser, but all the styles outside of comments will. As you can see, this can help you chunk your style sheets into logical groups, to aid both you and others to find given styles quickly. Additionally, you can hide styles you don't want for use later, and you can leave commentary for other people working with the style sheet.

You will sometimes see HTML comments surrounding CSS within an embedded sheet (see Example 7-6).

Example 7-6. HTML comments to hide CSS
<head>
<title>working with style</title>
<style type="text/css">
<!--
          body {
                       background-color: #999;
                       color: black;
                       }
          h1 {
                       font-family: Verdana;
                       font-size: 24px;
                       color: #ccc;
                       }
          p {
                       font-family: Georgia;
                       font-size: 12px;
                       color: white;
                       }
 -->
</style>
</head>

In this case, the HTML comments are being used to hide the CSS from older browsers that do not interpret CSS. Many of those browsers would try to display the CSS rules in the browser window. Using HTML comments in this manner is still in widespread use today, although for contemporary browsers the technique is unnecessary.

Formatting CSS

You might have noticed that I've used two formatting approaches in this tutorial (sneaky, aren't I?). The first is to follow the selector with the declaration, all on the same line:

body {background-color: #999; color: black;}

The other is to break up the rule:

body {
             background-color: #999;
             color: black;
             }

Either approach is correct; it's just a matter of personal preference. Many CSS designers are of the mindset that every bit and byte counts, so they opt for the first approach. Others argue that breaking up the rule makes it easier to find the styles you want to modify. Either way, as long as all the required syntax is intact, the formatting of your style sheet is a personal choice.

Time to Put Your Imagination to Work!

If you're thinking at this point that working with markup and CSS is no play, well, your frustration is well founded. It's imperative that you get the complexities down, and I assure you that if you've made it through thus far, you're grasping complex ideas.

But no doubt you want to put those ideas to work and really get a feel for how to use CSS to make things look good. After all, that's what I keep promising, right?

Fortunately, the next tutorial sets you up for a little fun: putting your imagination to work.

You'll be using images and color to spruce up your documents, and exploring the fine control that CSS offers you when it comes to working with imagery and color in your designs.