Readable CSS

Go to Previous Section:
SelectorsThis is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

Information: Readable CSS

You can add white space and comments to your stylesheets to make them more readable. You can also group selectors together, when the same style rules apply to elements selected in different ways.

White space

White space means actual spaces, tabs and new lines. You can add white space to make your stylesheets more readable.

In the context of page layout and composition, white space is the portion of a page that is left unmarked: margins, gutters, and space between columns and lines of type.

Your sample CSS file currently has one rule per line, and almost the minimum of white space. In a complex stylesheet this layout would be difficult to read, making the stylesheet difficult to maintain.

The layout you choose is usually a personal preference, but if your stylesheets are part of shared projects, those projects might have their own conventions.

Examples

Some people like the compact layout that we have been using, only splitting a line when it becomes very long:

.carrot {color: orange; text-decoration: underline; font-style: italic;}

Some people prefer one property-value per line:

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

Some people use indention—two spaces, four spaces, or a tab are common:

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

Some people like everything to line up vertically (but a layout like this is difficult to maintain):

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

Some people use mixed whitespace to enhance readability.

.vegetable         { color: green; min-height:  5px; min-width:  5px }
.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

Some people use tabs for the layout. Some people only use spaces.

Comments

Comments in CSS begin with /* and end with */.

You can use comments to make actual comments in your stylesheet, and also to comment out parts of it temporarily for testing purposes.

To comment out part of a stylesheet, place that part in a comment so that the browser ignores it. Be careful where you start and end the comment. The rest of the stylesheet must still have correct syntax.

Example

/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Grouped selectors

When many elements have the same style, you can specify a group of selectors, separating them with commas. The declaration applies to all the selected elements.

Elsewhere in your stylesheet you can specify the same selectors again individually, to apply individual style rules to them.

Example

This rule makes <h1>, <h2>, and <h3> elements the same color.

It is convenient to specify the color in only one place, in case it has to be changed.

/* color for headings */
h1, h2, h3 {color: navy;}

Action: Adding comments and improving the layout

Edit your CSS file, and ensure that it has these rules in it (in any order):

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}

Make it more readable by rearranging it in a way that you find logical, and by adding white space and comments in whatever way you think best.
Save the file and refresh your browser's display, to make sure that your changes do not affect how the stylesheet works:

Cascading Style Sheets

Cascading Style Sheets

Challenge

Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red:

Cascading Style Sheets

(There is more than one way to do this.)

Possible solution

One way to do this is to put comment delimiters around the rule for .carrot:

/*.carrot {
  color: orange;
}*/

Hide solution

See a solution for the challenge.

What next?

Go to Next Section:
Text stylesYour sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.