Revision 831157 of CSS

<p><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>), littéralement <em>feuilles de style en cascade</em>, est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en <a href="/fr/docs/Web/HTML" title="fr/HTML">HTML</a> ou <a href="/fr/docs/XML" title="fr/XML">XML</a> (cela inclut divers langages XML comme <a href="/fr/docs/XHTML" title="/fr/docs/XHTML">XHTML</a> ou <a href="/fr/docs/SVG" title="fr/SVG">SVG</a>).</p>

<p>CSS est l'un des langages clefs du Web ouvert et il est <a href="https://www.w3.org/Style/CSS/Overview.fr.html" title="https://www.w3.org/Style/CSS/Overview.fr.html">standardisé</a> par une spécification W3C. Développé par niveaux, CSS1 est maintenant obsolète, CSS2.1 est une recommandation et CSS3, découpé en plusieurs modules, suit le processus de standardisation. Les premiers brouillons pour les modules CSS4 sont en cours d'écriture.</p>

<p>Dans les produits basés sur <a href="/fr/XUL" title="fr/XUL">XUL</a> comme la suite Mozilla, Firefox ou Thunderbird, CSS est aussi utilisé pour styler l'interface utilisateur de l'application. Par exemple, les <a href="/fr/Thèmes" title="fr/Thèmes">thèmes</a> utilisent intensivement les CSS pour personnaliser l'apparence de l'application.</p>

<section id="sect1">
<ul class="card-grid">
 <li><span>Référence CSS</span>

  <p>Une <a href="/fr/docs/CSS/Référence_CSS" title="en-US/docs/CSS/CSS_Reference">référence exhaustive</a> pour <em>développeurs Web expérimentés</em> décrivant chaque propriété et concept CSS.</p>
 </li>
 <li><span>Tutoriel CSS</span>
  <p>Une <a href="/fr/CSS/Premiers_pas" title="/fr/CSS/Premiers_pas">introduction pas-à-pas</a> pour aider les <em>débutants absolus</em> à démarrer. Ce document présente tous les fondamentaux requis.</p>
 </li>
 <li><span>Démos CSS3</span>
  <p>Une <a href="/fr/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection de démos</a> montrant les <em>dernières technologies CSS</em> en action : une source régulièrement renouvelée d'inspiration.</p>
 </li>
</ul>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentation" name="Documentation">Documentation et tutoriels</h2>

<dl>
 <dt><a href="/fr/CSS/Référence_CSS" title="fr/CSS/Référence_CSS">Référence CSS</a></dt>
 <dd>Une référence sur CSS et ses <a href="/fr/CSS/Référence_CSS/Extensions_Mozilla" title="fr/CSS/Référence_CSS/Extensions_Mozilla">extensions</a> dans Mozilla.</dd>
</dl>

<dl>
 <dt><a href="/fr/docs/Écriture_de_CSS_efficace" title="/fr/docs/Écriture_de_CSS_efficace">Écriture de CSS efficace</a></dt>
 <dd>Un guide d'écriture de CSS efficace destiné à être utilisé pour l'interface utilisateur de Mozilla.</dd>
</dl>

<dl>
 <dt><a href="/fr/Utilisation_d'URL_pour_la_propriété_cursor" title="fr/Utilisation_d'URL_pour_la_propriété_cursor">Utilisation d'URL pour la propriété cursor</a></dt>
 <dd><a href="/fr/Gecko" title="fr/Gecko">Gecko</a> 1.8 (Firefox 1.5, SeaMonkey 1.0) accepte les valeurs URL pour <a href="https://www.yoyodesign.org/doc/w3c/css2/ui.html#propdef-cursor">la propriété cursor CSS2/2.1</a>. Celle-ci permet de définir des images arbitraires en tant que pointeurs de souris&nbsp;; tous les formats d'images supportés par Gecko sont permis.</dd>
</dl>

<dl>
 <dt><a href="/fr/Colonnes_CSS3" title="fr/Colonnes_CSS3">Colonnes CSS3</a></dt>
 <dd>Un tutoriel court sur l'utilisation des colonnes CSS3.</dd>
</dl>

<dl>
 <dt><a href="/fr/Problèmes_soulevés_par_le_pseudo_élément_hover" title="fr/Problèmes_soulevés_par_le_pseudo_élément_hover">Problèmes soulevés par le pseudo élément <code>hover</code></a></dt>
 <dd>Beaucoup d'auteurs utilisent la pseudo-classe CSS2 :hover pour styler leurs liens, mais les progrès du support CSS dans certains navigateurs provoquent des effets de survol agressifs inattendus sur certaines pages.</dd>
</dl>

<dl>
 <dt><a href="/fr/Indentation_homogène_des_listes" title="fr/Indentation_homogène_des_listes">Indentation homogène des listes</a></dt>
 <dd>Tenter de modifier l'indentation des listes via CSS est plus délicat qu'on le croit, mais uniquement car cette indentation est gérée de différentes manières par les navigateurs supportant CSS. Voici comment les remettre tous au pas.</dd>
</dl>

<h2 class="Tools" id="Outils_facilitant_le_développement_CSS">Outils facilitant le développement CSS</h2>

<ul>
 <li>Le <a class="external" href="https://jigsaw.w3.org/css-validator/">Service de validation CSS du W3C</a> vérifie si le code CSS fourni est valide. Un outil de débogage inestimable.</li>
 <li>L'<a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/1843">extension Firebug</a> pour Firefox. Une extension populaire qui permet de modifier directement le CSS du site ouvert. Très pratique pour faire des tests. L'extension propose par ailleurs des fonctionnalités avancées.</li>
 <li>L'<a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/60">extension Web Developer pour Firefox</a> permet d'étudier et de modifier les CSS du site ouvert. Plus simple mais aussi moins complète que Firebug.</li>
</ul>

<p><span class="alllinks"><a href="/Special:Tags?tag=CSS&amp;language=fr" title="Special:Tags?tag=CSS&amp;language=fr">Tous les articles…</a></span></p>
</div>

<div class="section">
<h2 class="Community" id="Obtenir_de_l'aide_de_la_communauté">Obtenir de l'aide de la communauté</h2>

<p>Vous avez besoin d'aide pour un problème en CSS et vous ne parvenez pas à trouver la solution dans la documentation ?</p>

<ul>
 <li>Consultez les forums dédiés de Mozilla : {{ListeDeDiscussion("dev-tech-layout", "mozilla.dev.tech.layout")}}</li>
 <li><a class="link-irc" href="irc://irc.mozilla.org/css">Canal IRC #css (en anglais)</a></li>
 <li><a href="https://www.alsacreations.com/" title="https://www.alsacreations.com/">Alsacréations</a>, site avec un forum actif sur les standards web dont CSS</li>
 <li><a class="external" href="https://pompage.net/">Pompage.net</a>, site de traduction d'articles en anglais et liste de discussion sur CSS</li>
 <li><a class="external" href="https://css.developpez.com/">Css.developpez.com</a>, site regroupant l'actualité du css et de nombreux exemples</li>
</ul>

<h2 class="Related_Topics" id="Sujets_liés">Sujets liés</h2>

<ul>
 <li>Langages Open Web sur lesquels CSS s'applique : <a href="/fr/docs/HTML" title="fr/docs/HTML">HTML</a>, <a href="/fr/docs/SVG" title="fr/docs/SVG">SVG</a>, <a href="/fr/docs/XHTML" title="fr/docs/XHTML">XHTML</a>, <a href="/fr/docs/XML" title="fr/docs/XML">XML</a>.</li>
 <li>Technologies Mozilla faisant une utilisation intensive de CSS : <a href="/fr/docs/XUL" title="fr/docs/XUL">XUL</a>, <a href="/fr/docs/Extensions" title="fr/docs/Extensions">extensions</a> et <a href="/fr/docs/Thèmes" title="fr/docs/Thèmes">thèmes</a> pour Firefox et Thunderbird.</li>
</ul>
</div>
</div>
</section>

<p>{{CommunityBox("Mise en page Web", "dev-tech-layout", "mozilla.dev.tech.layout", "", "Stack Overflow|https://stackoverflow.com/questions/tagged/css|sujets sur CSS|Visit Stack Overflow, a collaboratively built and maintained Q&amp;A site. See if you can find an answer; if not, you can ask your question there.||CSS-Discuss|https://www.css-discuss.org/|Liste de diffusion CSS-Discuss|Join the css-discuss mailing list, which is dedicated to discussing practical, real-world use of CSS.")}}</p>