Приглашаем посетить

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 chapter (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.

Table of Contents