CSS

  • Revision slug: Web/CSS
  • Revision title: CSS
  • Revision id: 466615
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Cascading Style Sheets, most of the time abbreviated as CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML. CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.

CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track.

CSS Reference

An exhaustive reference for seasoned Web developers describing every property and concept of CSS.

CSS Tutorial

A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.

CSS3 Demos

A collection of demos showing the latest CSS technologies in action: a boost for the creativity.

Documentation and tutorials

CSS key concepts
Describes the syntax and forms of the language and introduces fundamentals like specificity and inheritance, the box model and margin collapsing, stacking and block-formatting contexts, or the initial, computed, used and actual values. Entities like CSS shorthand properties are also defined.
CSS developer guide
Articles to help you learn CSS techniques to make your content shine.

Tools easing CSS development

  • The W3C CSS Validation Service checks if a given CSS is valid. It is an invaluable debugging tool.
  • Firefox' Firebug extension, a popular extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.
  • Firefox' Web Developer extension also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.
  • Firefox' EditCSS extension allows editing CSS in the sidebar.
  • CSS Text-decoration Level 3 reached the Candidate Recommandation status, defining that the text-decoration-* and text-emphasis-* properties. The long known {{cssxref("text-shadow")}} is also defined in it. (August 1st, 2013)
  • Gecko's now support {{cssxref("background-origin")}}: local. It will be available from Firefox 25 (and already is in Nightly). (July 25th, 2013)
  • Pointer Events reached the Candidate Recommandation status, meaning that the CSS property touch-action, currently only implemented in IE10 (with the -ms- prefix), is no more experimental. (May 6th, 2013)
  • Gecko's support of flexible boxes has been adapted to match a recent specification clarification: from Firefox 23 {{cssxref("::before")}} and {{cssxref("::after")}} will be flex items, and as such can be repositioned using {{cssxref("order")}} and {{cssxref("align-self")}}. (May 3rd, 2013)

Getting help from the community

You need help on a CSS-related problem and can't find the solution in the documentation?

  • Check the common CSS questions that give hints to solve common CSS problems.
  • Go to Stack Overflow, a collaboratively built and maintained Q&A site and look if you can find the answer to your question. If not you will be able to ask your question there.
  • Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}

 

Revision Source

<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, most of the time abbreviated as <strong>CSS</strong>, is a <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> language used to describe the presentation of a document written in <a href="/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> or <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> (including various XML languages like <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> or <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML.</a> CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.</p>
<p>CSS is one of the core languages of the <em>open web</em> and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, now split into smaller modules, is progressing on the standard track.</p>
<div style="margin:auto;text-align:center;">
  <div class="callout-box action-driven">
    <div>
      CSS Reference</div>
    <p>An <a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">exhaustive reference</a> for <u>seasoned Web developers</u> describing every property and concept of CSS.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      CSS Tutorial</div>
    <p>A <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">step-by-step introduction</a> to help <u>complete beginners</u> get started. It presents all the needed fundamentals.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      CSS3 Demos</div>
    <p>A <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p>
  </div>
</div>
<div class="row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation and tutorials</h2>
    <dl>
      <dt>
        CSS key concepts</dt>
      <dd>
        Describes the <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">syntax and forms of the language</a> and introduces fundamentals like <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a> and <a href="/en-US/docs/CSS/inheritance" title="inheritance">inheritance</a>, the <a href="/en-US/docs/CSS/box_model" title="Box model">box model</a> and <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> and <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts, or the <a href="/en-US/docs/CSS/initial_value" title="initial value">initial</a>, <a href="/en-US/docs/CSS/computed_value" title="computed value">computed</a>, <a href="/en-US/docs/CSS/used_value" title="used value">used</a> and <a href="/en-US/docs/CSS/actual_value" title="actual value">actual</a> values. Entities like <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">CSS shorthand properties</a> are also defined.</dd>
      <dt>
        <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">CSS developer guide</a></dt>
      <dd>
        Articles to help you learn CSS techniques to make your content shine.</dd>
    </dl>
    <h2 class="Tools" id="Tools" name="Tools">Tools easing CSS development</h2>
    <ul>
      <li><span class="external">The </span><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> checks if a given CSS is valid. It is an invaluable debugging tool.</li>
      <li>Firefox' <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a><span class="external">, a popular</span> extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.</li>
      <li><span class="external">Firefox' </span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.</li>
      <li>Firefox' <a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> allows editing CSS in the sidebar.</li>
    </ul>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
    <ul>
      <li>Mozilla Learn <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">CSS resources</a>.</li>
      <li>Open Web languages on which CSS is often applied: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
      <li>Mozilla technologies which make extensive use of CSS: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Firefox and Thunderbird <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extensions</a> and <a href="/en-US/docs/Themes" title="en-US/docs/Themes">themes</a>.</li>
    </ul>
  </div>
  <div class="section">
    <h2 class="Related_Topics" id="News" name="News">News</h2>
    <ul>
      <li><a href="http://www.w3.org/TR/css-text-decor-3/" title="http://www.w3.org/TR/css-text-decor-3/">CSS Text-decoration Level 3</a> reached the <em>Candidate Recommandation</em> status, defining that the <code>text-decoration-*</code> and <code>text-emphasis-*</code> properties. The long known {{cssxref("text-shadow")}} is also defined in it. (<em>August 1st, 2013)</em></li>
      <li>Gecko's now support {{cssxref("background-origin")}}<code>: local</code>. It will be available from Firefox 25 (and already is in Nightly). <em>(July 25th, 2013)</em></li>
      <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">Pointer Events</a> reached the <em>Candidate Recommandation</em> status, meaning that the CSS property <code>touch-action</code>, currently only implemented in IE10 (with the <code>-ms-</code> prefix), is no more experimental. <em>(May 6th, 2013)</em></li>
      <li>Gecko's support of <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> has been adapted to match a recent specification clarification: from Firefox 23 {{cssxref("::before")}} and {{cssxref("::after")}} will be flex items, and as such can be repositioned using {{cssxref("order")}} and {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li>
    </ul>
    <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
    <p>You need help on a CSS-related problem and can't find the solution in the documentation?</p>
    <ul>
      <li>Check the <a href="/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">common CSS questions</a> that give hints to solve common CSS problems.</li>
      <li>Go to <a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, a collaboratively built and maintained Q&amp;A site and look if you can find the answer to your question. If not you will be able to ask your question there.</li>
      <li>Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
        <ul>
          <li>Ask your question on the Mozilla IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li>
          <li>Ask your question on the <a class="external" href="http://www.css-discuss.org/">CSS-Discuss site and list</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision