path: root/files/ca/web/guide/css/inici_en_css/index.html

---
title: Inici en CSS
slug: Web/Guide/CSS/Inici_en_CSS
tags:
  - Beginner
  - CSS
  - 'CSS:Getting_Started'
  - Guide
  - Needs
  - NeedsBeginnerUpdate
  - NeedsUpdate
  - Web
translation_of: Learn/CSS/First_steps
translation_of_original: Web/Guide/CSS/Getting_started
---
<p>Aquest tutorial és una introducció a les característiques bàsiques i llenguatge (la sintaxi) per als <strong><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">fulls d'estil en cascada</a></strong><span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS"><strong>(Cascading Style Sheets)</strong></a> (CSS). </span>S'utilitza CSS per canviar l'aspecte d'un document estructurat, com ara una pàgina web. El tutorial també inclou exemples d'exercicis que podeu provar en el vostre ordinador per veure els efectes de les CSS i les característiques que funcionen en els navegadors moderns.</p>

<p>El tutorial és per a principiants i per qualsevol persona que desitji revisar els conceptes bàsics de CSS. Si teniu més experiència amb CSS, la pàgina principal de CSS <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">enumera</a> els recursos més avançats.</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">Què és 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">Per què utilitzar 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">Com funciona el CSS</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">Cascada i herència</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">CSS Llegible</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Estils de text</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">Contingut</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Llistes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Caixes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Disseny</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Taules</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="Que_es_necessita_per_començar"><span class="short_text" id="result_box" lang="ca"><span>Que</span> <span>es</span> <span>necessita</span> <span>per començar</span></span></h2>

<ul>
 <li><span id="result_box" lang="ca"><span>Un editor</span> <span>de text</span></span></li>
 <li><span id="result_box" lang="ca"><span>Un navegador</span> <span>modern</span></span></li>
 <li>Alguna experiència treballant amb editor de text i navegador</li>
</ul>

<p>Encara que els exercicis poden ajudar-te a aprendre, no és necessari realitzar-los. Simplement podeu llegir el tutorial i mirar les imatges.</p>

<p><strong>Nota:</strong> <span id="result_box" lang="ca"><span>El tutorial</span> <span>s'explica</span> <span>com funciona</span> <span>CSS</span> <span>amb el color.</span> <span>Serà més</span> <span>fàcil</span> <span>per</span> <span>completar aquestes</span> <span>seccions</span> <span>amb una pantalla</span> <span>a color</span> <span>i visió de</span> <span>color</span> <span>normal.</span></span></p>

<h2 id="Com_utilitzar_aquest_tutorial"><span class="short_text" id="result_box" lang="ca"><span>Com</span> <span>utilitzar</span> <span>aquest tutorial</span></span></h2>

<p>Per utilitzar aquest tutorial, llegiu les pàgines amb cura i de forma seqüencial. Si es salta una pàgina, pot ser difícil d'entendre les pàgines següents en el tutorial.</p>

<h3 id="Part_I_Els_fonaments_del_CSS"><span class="short_text" id="result_box" lang="ca"><span>Part</span> <span>I: Els</span> <span>fonaments de</span>l<span> CSS</span></span></h3>

<p>A cada pàgina, utilitzeu la secció d'<em>informació</em> per entendre com funciona CSS. Utilitzeu la secció Acció per probar l'ús de CSS en el vostre ordinador.</p>

<p>Per posar a prova la vostre comprensió, prendre el repte al final de cada pàgina. Les solucions als reptes estan vinculats en virtut dels reptes, pel que no és necessari mirar-los si no ho desitjeu.</p>

<p>Per comprendre CSS amb més profunditat, llegiu la informació que es troba en les caselles de subtítols <em>Més detalls</em>. Utilitzeu els enllaços que hi ha per trobar informació de referència sobre CSS</p>

<h3 id="Part_II_L'Abast_del_CSS"><span class="short_text" id="result_box" lang="ca"><span>Part II</span><span>:</span> <span>L'Abast</span> <span>del CSS</span></span></h3>

<p><span id="result_box" lang="ca"><span>Una segona</span> <span>part</span> <span>del programa d'aprenentatge</span> <span>proporciona</span> <span>exemples, que</span> <span>mostren l'abast</span> <span>de CSS</span> <span>amb</span> <span>altres tecnologies</span> <span>web i</span> <span>Mozilla</span></span>.</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>