Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 579389 of Getting started with CSS

  • Revision slug: Web/Guide/CSS/Getting_started
  • Revision title: Getting started with CSS
  • Revision id: 579389
  • Created:
  • Creator: wjinca
  • Is current revision? No
  • Comment

Revision Content

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and the features that work in modern browsers.

This tutorial is mostly for beginners in CSS, but you can also use it if you have some basic knowledge of CSS. If you are experienced in CSS this tutorial is probably not very useful to you, the CSS main page lists more advanced resources.

What do you need before you start?

To get the most from this tutorial, you need an editor for text files and a modern browser. You must also know how to use them in basic ways.

If you do not want to edit files, then you can just read the tutorial and look at the pictures, but that is a less effective way for you to learn.

Note: CSS provides ways to work with color, so parts of this tutorial depend on color. You can only use these parts of the tutorial easily if you have a color display and normal color vision.

How to use this tutorial

To use this tutorial, read the pages carefully and in sequence. If you miss a page, then you might find it difficult to understand later pages.

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

Tutorial Part II

A second part of the tutorial gives examples that show the scope of CSS used with other web and Mozilla technologies.

  1. JavaScript
  2. SVG graphics
  3. XML data
  4. XBL bindings
  5. XUL user interfaces

Revision Source

<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and the features that work in modern browsers. 
</span></p>
<p>This tutorial is mostly for beginners in CSS, but you can also use it if you have some basic knowledge of CSS. If you are experienced in CSS this tutorial is probably not very useful to you, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p>
<nav class="fancyTOC">
 <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav>
<h2 id="What_do_you_need_before_you_start.3F">What do you need before you start?</h2>
<p>To get the most from this tutorial, you need an editor for text files and a modern browser. You must also know how to use them in basic ways.</p>
<p>If you do not want to edit files, then you can just read the tutorial and look at the pictures, but that is a less effective way for you to learn.</p>
<p><strong>Note:</strong> CSS provides ways to work with color, so parts of this tutorial depend on color. You can only use these parts of the tutorial easily if you have a color display and normal color vision.</p>
<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2>
<p>To use this tutorial, read the pages carefully and in sequence. If you miss a page, then you might find it difficult to understand later pages.</p>
<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p>
<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p>
<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p>
<h2 id="Tutorial_Part_II">Tutorial Part II</h2>
<p>A second part of the tutorial gives examples that show the scope of CSS used with other web and Mozilla technologies.</p>
<ol>
 <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li>
</ol>
Revert to this revision