Readable CSS

  • Revision slug: CSS/Getting_Started/Readable_CSS
  • Revision title: Readable CSS
  • Revision id: 302893
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSTutorialTOC() }}

{{ previousPage("/en-US/docs/CSS/Getting_Started/Selectors", "Selectors")}}This 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.

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.

Example

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 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 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("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

  1. 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;}
    
  2. 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.
  3. 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
Cascading Style Sheets

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

See a solution to this challenge.

What next?

{{ nextPage("/en-US/docs/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

Revision Source

<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS&nbsp;Getting Started</a> 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.</span></p>
<h2 class="clearLeft" id="Information.3A_Readable_CSS">Information: Readable CSS</h2>
<p>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.</p>
<h3 id="White_space">White space</h3>
<p>White space means actual spaces, tabs and new lines. You can add white space to make your stylesheets more readable.</p>
<p>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.</p>
<p>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.</p>
<div class="tuto_example">
  <div class="tuto_type">
    Example</div>
  <p>Some people like the compact layout that we have been using, only splitting a line when it becomes very long:</p>
  <pre class="brush: css">
.carrot {color: orange; text-decoration: underline; font-style: italic;}
</pre>
  <p>Some people prefer one property-value per line:</p>
  <pre class="brush: css">
.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
  <p>Some people use indention—two spaces, four spaces, or a tab are common:</p>
  <pre class="brush: css">
.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}
</pre>
  <p>Some people like everything to line up vertically (but a layout like this is difficult to maintain):</p>
  <pre class="brush: css">
.carrot
    {
    color          &nbsp;: orange;
    text-decoration&nbsp;: underline;
    font-style     &nbsp;: italic;
    }
</pre>
</div>
<p>Some people use tabs for the layout. Some people only use spaces.</p>
<h3 id="Comments">Comments</h3>
<p>Comments in CSS begin with <code>/*</code> and end with <code>*/</code>.</p>
<p>You can use comments to make actual comments in your stylesheet, and also to <em>comment out</em> parts of it temporarily for testing purposes.</p>
<p>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.</p>
<div class="tuto_example">
  <div class="tuto_type">
    Example</div>
  <pre class="brush: css">
/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }
</pre>
</div>
<h3 id="Grouped_selectors">Grouped selectors</h3>
<p>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.</p>
<p>Elsewhere in your stylesheet you can specify the same selectors again individually, to apply individual style rules to them.</p>
<div class="tuto_example">
  <div class="tuto_type">
    Example</div>
  <p>This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.</p>
  <p>It is convenient to specify the color in only one place, in case it has to be changed.</p>
  <pre class="brush: css">
/* color for headings */
h1, h2, h3 {color: navy;}
</pre>
</div>
<h2 id="Action.3A_Adding_comments_and_improving_the_layout">Action: Adding comments and improving the layout</h2>
<ol>
  <li>Edit your CSS file, and ensure that it has these rules in it (in any order):
    <pre class="brush: css">
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}
</pre>
  </li>
  <li>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.</li>
  <li>Save the file and refresh your browser's display, to make sure that your changes do not affect how the stylesheet works:
    <table style="border:2px outset #36b; padding:1em;">
      <tbody>
        <tr>
          <td style="font-style:italic;color:blue;"><strong style="color:orange;">C</strong>ascading <strong style="color:green;">S</strong>tyle <strong style="color:green;">S</strong>heets</td>
        </tr>
        <tr>
          <td style="color:blue;"><strong style="color:red;">C</strong>ascading <strong style="color:red;">S</strong>tyle <strong style="color:red;">S</strong>heets</td>
        </tr>
      </tbody>
    </table>
  </li>
</ol>
<div class="tuto_details">
  <div class="tuto_type">
    Challenge</div>
  <p>Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red:</p>
  <table style="border:2px outset #36b; padding:1em;background-color:white;">
    <tbody>
      <tr>
        <td style="font-style:italic;color:blue;"><strong style="color:red;">C</strong>ascading <strong style="color:green;">S</strong>tyle <strong style="color:green;">S</strong>heets</td>
      </tr>
      <tr>
        <td style="color:blue;"><strong style="color:red;">C</strong>ascading <strong style="color:red;">S</strong>tyle <strong style="color:red;">S</strong>heets</td>
      </tr>
    </tbody>
  </table>
  <p>(There is more than one way to do this.)</p>
</div>
<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Readable_CSS" title="en/CSS/Getting started/Challenge solutions#Readable CSS">See a solution to this challenge.</a></p>
<h2 id="What_next.3F">What next?</h2>
<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to <a href="/en-US/docs/CSS/Getting_Started/Text_styles" title="/en-US/docs/CSS/Getting_Started/Text_styles">specify the appearance of text</a> in your document<strong>.</strong></p>
Revert to this revision