CSS

  • Revision slug: CSS
  • Revision title: CSS
  • Revision id: 24817
  • Created:
  • Creator: samadhaque
  • Is current revision? No
  • Comment 27 words added, 1 words removed

Revision Content

Cascading Style Sheets (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 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. The first early drafts of CSS4 modules are being written.<style type = "text/css">

 

<style type="text/css"> div { font:normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform:uppercase; } ]]></style>
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 about CSS

CSS key concepts
Describes the syntax 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.
Writing efficient CSS
Explains how style sheet engines perform selector matching and describes rules for writing more efficient CSS.
Using CSS transforms
Presents the 2D operations that can be applied to each element in order to rotate, skew, translate it.
Using CSS transitions
Explains how to change the aspect of an element using a smooth animation between the initial and final state.
Using CSS animations
Describes how to define animations of an element but also how to detect in Javascript if the browser supports it.
Using CSS gradients
Explains how to define gradients, images composed of smooth variations of colors.
Using CSS multi-column layouts
Presents how to make multi-column page settings using the CSS Level 3 multi-column layout.
Using CSS multiple backgrounds
Describes how to define several backgrounds on the same element.
Using CSS media queries
Presents how to select style sheets based on details of the rendering device, like its viewport size, its resolution or if it has a touchscreen.
Using CSS counters
Explains how to use automatic counters and numbering, essentially used as list counters.
Fonts and Typography
Informs about managing your fonts using {{ cssxref("@font-face") }} and the WOFF font format.
Consistent List Indentation
Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.
Using dynamic styling information
How to obtain information on and manipulate styling via the DOM

View All...

Getting help from the community or
from an devloper "samad"

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.
  • Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}

Don't forget about the netiquette...

Tools easing CSS development

  • 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.

View All...

Related Topics

  • Open Web languages on which CSS is often applied: HTML, SVG, XHTML, XML.
  • Mozilla technologies which make extensive use of CSS: XUL, Firefox and Thunderbird extensions and themes.

{{ languages( { "de": "de/CSS", "es": "es/CSS", "fr": "fr/CSS", "it": "it/CSS", "ja": "ja/CSS", "ko": "ko/CSS", "nl": "nl/CSS", "pl": "pl/CSS", "pt": "pt/CSS", "zh-cn": "cn/CSS", "zh-tw": "zh_tw/CSS" } ) }}

Revision Source

<p><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) is a stylesheet language used to describe the presentation of a document written in <a href="/en/HTML" title="en/HTML">HTML</a> or <a href="/en/XML" title="en/XML">XML</a> (including various XML languages like <a href="/en/SVG" title="en/SVG">SVG</a> or <a href="/en/XHTML" title="en/XHTML">XHTML</a>).</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/CSS/CSS3" title="CSS3">CSS3</a>, now split into smaller modules, is progressing on the standard track. The first early drafts of CSS4 modules are being written.&lt;style type = "text/css"&gt;</p>
<p> </p>
<div style="margin:auto;text-align:center;"> &lt;style type="text/css"&gt;<!--[CDATA[div.callout-box.action-driven {
  display:inline-block;
  float:none;
  min-height:8.5em;
  margin:0.8em;
}
div.callout-box.action-driven --> div {
  font:normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;
  text-transform:uppercase;
}
	
	]]&gt;&lt;/style&gt; <div class="callout-box action-driven"> <div>CSS Reference</div> <p>An <a href="/en/CSS/CSS_Reference" title="en/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/CSS/Getting_Started" title="en/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>
<table class="topicpage-table"> <tbody> <tr> <td> <h3 name="Documentation">Documentation about CSS</h3> <dl> <dt>CSS key concepts</dt> <dd>Describes the <a href="/en/CSS/Syntax" title="Syntax">syntax</a> of the language and introduces fundamentals like <a href="/en/CSS/Specificity" title="Specificity">specificity</a> and <a href="/en/CSS/inheritance" title="inheritance">inheritance</a>, the <a href="/en/CSS/box_model" title="Box model">box model</a> and <a href="/en/CSS/margin_collapsing" title="Margin collapsing">margin collapsing</a>, <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> and <a href="/en/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts, or the <a href="/en/CSS/initial_value" title="initial value">initial</a>, <a href="/en/CSS/computed_value" title="computed value">computed</a>, <a href="/en/CSS/used_value" title="used value">used</a> and <a href="/en/CSS/actual_value" title="actual value">actual</a> values. Entities like <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">CSS shorthand properties</a> are also defined.</dd> <dt><a href="/en/CSS/Writing_Efficient_CSS" title="https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS">Writing efficient CSS</a></dt> <dd>Explains how style sheet engines perform selector matching and describes rules for writing more efficient CSS.</dd> <dt><a class="internal" href="/En/CSS/Using_CSS_transforms" title="en/CSS/Using_CSS_transforms">Using CSS transforms</a></dt> <dd>Presents the 2D operations that can be applied to each element in order to rotate, skew, translate it.</dd> <dt><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></dt> <dd>Explains how to change the aspect of an element using a smooth animation between the initial and final state.</dd> <dt><a href="/en/CSS/CSS_animations" title="en/CSS/CSS animations">Using CSS animations</a></dt> <dd>Describes how to define animations of an element but also how to <a href="/en/CSS/CSS_animations/Detecting_CSS_animation_support" title="https://developer.mozilla.org/en/CSS/CSS_animations/Detecting_CSS_animation_support">detect</a> in Javascript if the browser supports it.</dd> <dt><a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">Using CSS gradients</a></dt> <dd>Explains how to define gradients, images composed of smooth variations of colors.</dd> <dt><a href="/en/CSS/Using_CSS_multi-column_layouts" title="en/CSS/Using_the_CSS_multi-column_layout">Using CSS multi-column layouts</a></dt> <dd>Presents how to make multi-column page settings using the CSS Level 3 multi-column layout.</dd> <dt><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple_backgrounds">Using CSS multiple backgrounds</a></dt> <dd>Describes how to define several backgrounds on the same element.</dd> <dt><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Using CSS media queries</a></dt> <dd>Presents how to select style sheets based on details of the rendering device, like its viewport size, its resolution or if it has a touchscreen.</dd> <dt><a href="/en/CSS_Counters" title="CSS Counters">Using CSS counters</a></dt> <dd>Explains how to use automatic counters and numbering, essentially used as list counters.</dd> <dt>Fonts and Typography</dt> <dd>Informs about managing your <a href="/en/CSS/font" title="font">fonts</a> using {{ cssxref("@font-face") }} and the <a href="/en/WOFF" title="https://developer.mozilla.org/en/About_WOFF">WOFF font</a> format.</dd> <dt><a href="/en/Consistent_List_Indentation" title="en/Consistent_List_Indentation">Consistent List Indentation</a></dt> <dd>Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.</dd> <dt><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt> <dd>How to obtain information on and manipulate styling via the DOM</dd> </dl> <p><span class="alllinks"><a href="/Special:Tags?tag=CSS&amp;language=en" title="Special:Tags?tag=CSS&amp;language=en">View All...</a></span></p> </td> <td> <h3 name="Community">Getting help from the community or<br> from an devloper "samad"</h3> <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/CSS/Common_CSS_Questions" title="en/CSS/Common_CSS_Questions">common CSS questions</a> that give hints to solve common CSS problems.</li> <li>Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}</li> </ul> <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> <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> <h3 name="Tools">Tools easing CSS development</h3> <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> </ul> <ul> <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><span class="external">Firefox' </span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> allows editing CSS in the sidebar.</li> </ul> <p><span class="alllinks"><a href="/Special:Tags?tag=CSS:Tools&amp;language=en" title="Special:Tags?tag=CSS:Tools&amp;language=en">View All...</a></span></p> <h3 name="Related_Topics">Related Topics</h3> <ul> <li>Mozilla Learn <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">CSS resources</a>.</li> </ul> <ul> <li>Open Web languages on which CSS is often applied: <a href="/en/HTML" title="en/HTML">HTML</a>, <a href="/en/SVG" title="SVG">SVG</a>, <a href="/en/XHTML" title="en/XHTML">XHTML</a>, <a href="/en/XML" title="en/XML">XML</a>.</li> <li>Mozilla technologies which make extensive use of CSS: <a href="/en/XUL" title="en/XUL">XUL</a>, Firefox and Thunderbird <a href="/en/Extensions" title="en/Extensions">extensions</a> and <a href="/en/Themes" title="en/Themes">themes</a>.</li> </ul> </td> </tr> </tbody>
</table>
<p>{{ languages( { "de": "de/CSS", "es": "es/CSS", "fr": "fr/CSS", "it": "it/CSS", "ja": "ja/CSS", "ko": "ko/CSS", "nl": "nl/CSS", "pl": "pl/CSS", "pt": "pt/CSS", "zh-cn": "cn/CSS", "zh-tw": "zh_tw/CSS" } ) }}</p>
Revert to this revision