Revision 45088 of Why use CSS?

  • Revision slug: CSS/Getting_Started/Why_use_CSS
  • Revision title: Why use CSS
  • Revision id: 45088
  • Created:
  • Creator: Rincewind009
  • Is current revision? No
  • Comment /* Linking your document to your stylesheet */

Revision Content

This page explains why documents use CSS. You use CSS to add a stylesheet to your sample document.

Information: Why use CSS?

CSS helps you to keep the information content of a document separate from the details of how to display it. The details of how to display the document are known as its style. You keep the style separate from the content so that you can:

  • Avoid duplication
  • Make maintenance easier
  • Use content with different styles for different purposes
Example
Your web site might have thousands of pages that look similar. Using CSS, you store the style information in common files that all the pages share.

When a user displays a web page, the user's browser loads the style information along with the content of the page.

When a user prints a web page, you provide different style information that makes the printed page easy to read.

In general with CSS, you use the markup language to describe the information content of the document, not its style. You use CSS to specify its style, not its content. (Later in this tutorial, you will see some exceptions to this arrangement.)

More details
A markup language like HTML also provides some ways to specify style.

For example, in HTML you can use a <B> tag to make text bold, and you can specify the background color of a page in it's <BODY> tag.

When you use CSS, you normally avoid using these features of the markup language so that all your document's style information is in one place.

Action: Creating a stylesheet

Create another text file in the same directory as before. This file will be your stylesheet. Name it: style1.css

In your CSS file, copy and paste this one line, then save the file:

strong {color: red;}

Linking your document to your stylesheet

To link your document to your stylesheet, edit your HTML file. Add the line shown here in bold:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Sample document</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css">
  </LINK></strong>
  </HEAD>
  <BODY>
    <P>
      <STRONG>C</STRONG>ascading
      <STRONG>S</STRONG>tyle
      <STRONG>S</STRONG>heets
    </P>
  </BODY>
</HTML>

Save the file and refresh your browser's display. The stylesheet makes the initial letters red, like this:

Cascading Style Sheets
Challenge
In addition to red, CSS allows some other color names.

Without looking up a reference, find five more color names that work in your stylesheet.

What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

Now you have a sample document linked to a separate stylesheet, you are ready to learn more about how your browser combines them when it displays the document: How CSS works

{{ wiki.languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS" } ) }}

Revision Source

<p>
</p><p>This page explains why documents use CSS.
You use CSS to add a stylesheet to your sample document.
</p>
<h3 name="Information:_Why_use_CSS.3F"> Information: Why use CSS? </h3>
<p>CSS helps you to keep the information content of a document separate from the details of how to display it.  The details of how to display the document are known as its <i>style</i>.  You keep the style separate from the content so that you can:
</p>
<ul><li>Avoid duplication
</li><li>Make maintenance easier
</li><li>Use content with different styles for different purposes
</li></ul>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example
</caption><tbody><tr>
<td> Your web site might have thousands of pages that look similar. Using CSS, you store the style information in common files that all the pages share.
<p>When a user displays a web page, the user's browser loads the style information along with the content of the page.
</p><p>When a user prints a web page, you provide different style information that makes the printed page easy to read.
</p>
</td></tr></tbody></table>
<p>In general with CSS, you use the markup language to describe the information content of the document, not its style.  You use CSS to specify its style, not its content.  (Later in this tutorial, you will see some exceptions to this arrangement.)
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details
</caption><tbody><tr>
<td> A markup language like HTML also provides some ways to specify style.
<p>For example, in HTML you can use a <code>&lt;B&gt;</code> tag to make text bold, and you can specify the background color of a page in it's <code>&lt;BODY&gt;</code> tag.
</p><p>When you use CSS, you normally avoid using these features of the markup language so that all your document's style information is in one place.
</p>
</td></tr></tbody></table>
<h3 name="Action:_Creating_a_stylesheet"> Action: Creating a stylesheet </h3>
<p>Create another text file in the same directory as before.
This file will be your stylesheet.
Name it: <code>style1.css</code>
</p><p>In your CSS file, copy and paste this one line, then save the file:
</p>
<div style="width:40em;">
<pre class="eval">strong {color: red;}
</pre>
</div>
<h4 name="Linking_your_document_to_your_stylesheet"> Linking your document to your stylesheet </h4>
<p>To link your document to your stylesheet, edit your HTML file.
Add the line shown here in bold:
</p>
<div style="width:40em; color:gray;">
<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
  <strong style="color:black;">&lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;</strong>
  &lt;/LINK&gt;&lt;/strong&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P&gt;
      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
    &lt;/P&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>
<p>Save the file and refresh your browser's display.
The stylesheet makes the initial letters red, like this:
</p>
<table style="border:2px outset #36b; padding:1em;">
<tbody><tr>
<td> <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>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Challenge
</caption><tbody><tr>
<td> In addition to red, CSS allows some other color names.
<p>Without looking up a reference, find five more color names that work in your stylesheet.
</p>
</td></tr></tbody></table>
<h4 name="What_next.3F"> What next? </h4>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="Talk:en/CSS/Getting_Started/Why_use_CSS%3f">Discussion</a> page.
</p><p>Now you have a sample document linked to a separate stylesheet, you are ready to learn more about how your browser combines them when it displays the document:
<b><a href="en/CSS/Getting_Started/How_CSS_works">How CSS works</a></b>
</p>{{ wiki.languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS" } ) }}
Revert to this revision