initial commit

7 files changed, 770 insertions, 0 deletions

diff --git a/files/it/conoscere_i_css/cascata_ed_ereditarietà/index.html b/files/it/conoscere_i_css/cascata_ed_ereditarietà/index.html
new file mode 100644
index 0000000000..4826f292a1
--- /dev/null
+++ b/files/it/conoscere_i_css/cascata_ed_ereditarietà/index.html
@@ -0,0 +1,86 @@
+---
+title: Cascata ed ereditarietà
+slug: Conoscere_i_CSS/Cascata_ed_ereditarietà
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>
+</p><p>Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori.
+</p><p>Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa.
+</p><p><a class="external" href="http://www.example.com">link title</a>== Headline text ==== Informazioni: Cascata ed ereditarietà ==
+Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso.
+Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile.
+</p><p>Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono:
+</p>
+<ul><li>Lo stile predefinito del browser per il linguaggio di marcatura
+</li><li>Lo stile specficato dall'utente che sta leggendo il documento
+</li><li>Lo stile collegato al documento dal suo autore
+</li></ul>
+<p>Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Esempio
+Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti&gt;Opzioni, o dal file <code>userContent.css</code> nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki.
+</caption><tbody><tr><td></td></tr></tbody></table>
+<p><br>
+Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML.
+</p><p>Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio.
+</p><p>Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY.
+</p><p>Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser.
+</p><p>Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore.
+</p><p>Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave <code>!important</code>.
+<p>Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente.
+</p><p>Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">"Assegnare valori alle proprietà, Cascata ed ereditarietà"</a>(EN) nelle specifiche dei CSS.
+</p>
+</td></tr></tbody></table>
+<h3 id="Azione:_Utilizzare_l.27ereditariet.C3.A0" name="Azione:_Utilizzare_l.27ereditariet.C3.A0"> Azione: Utilizzare l'ereditarietà </h3>
+<p>Modifica il tuo file CSS di esempio.
+</p><p>Aggiungi la seguente linea facendo copia e incolla.
+Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG:
+</p>
+<pre>p {color: blue; text-decoration: underline;}
+</pre>
+<p>Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio.
+La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali.
+L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P.
+</p><p>Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P.
+</p>
+<table>
+<tbody><tr>
+<td>
+<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
+<caption>Prima
+</caption><tbody><tr>
+<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td><td>
+<table style="border: 2px outset #36b; padding: 1em;">
+<caption>Dopo
+</caption><tbody><tr>
+<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate:
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
+</p><p>Il foglio di stile d'esempio specifica lo stile per i tag <code>P</code> e <code>STRONG</code> modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo:
+<b><a href="it/Conoscere_i_CSS/I_Selettori">I Selettori</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }}
diff --git a/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html
new file mode 100644
index 0000000000..f85f4b3db0
--- /dev/null
+++ b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html
@@ -0,0 +1,113 @@
+---
+title: Cosa è CSS
+slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti</p>
+
+<h3 id="Informazioni:_Che_cosa_sono_i_CSS.3F" name="Informazioni:_Che_cosa_sono_i_CSS.3F">Informazione: Cosa è CSS?</h3>
+
+<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) è un linguaggio per specificare come i documenti sono presentati all'utente.</p>
+
+<p>Un <em>documento</em> è un insieme di informazioni strutturate utilizzando un <em>linguaggio a marcatori</em>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Esempi</div>
+
+<p>Una pagine web come quella che si legge è un documento.<br>
+ Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML  (HyperText Markup Language).<br>
+ Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.<br>
+ Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.</p>
+</div>
+
+<p>In questa esercitazione, i riquadri titolati <strong>Maggiori dettagli</strong> come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Maggiori dettagli</div>
+
+<p>Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.</p>
+
+<p>Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.</p>
+
+<p>Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/HTML" title="en/HTML">HTML</a></td>
+   <td>per le pagine web</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/XML" title="en/XML">XML</a></td>
+   <td>per i documenti strutturati in generale</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/SVG" title="en/SVG">SVG</a></td>
+   <td>per la grafica</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en/XUL" title="en/XUL">XUL</a></td>
+   <td>per le interfacce utente in Mozillafor user interfaces in Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.</p>
+</div>
+
+<p><em>Presentare </em>un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption> </caption>
+ <tbody>
+  <tr>
+   <td>
+    <div class="tuto_type">Maggiori dettagli</div>
+    CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamato<em>user agent</em> (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser.
+
+    <p>Per qualche definizione formale della terminologia relativa a CSS, vedere le <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definizioni</a> nelle specifiche CSS.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Azione:_Creare_un_documento" name="Azione:_Creare_un_documento">Azione: Creare un documento</h3>
+
+<p>Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.<br>
+ Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome <code>doc1.html</code></p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.</p>
+
+<p>Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:</p>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.</p>
+
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F">E poi?</h4>
+
+<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">prossima sezione</a> si utilizzerà CSS per specificare lo stile.</p>
diff --git a/files/it/conoscere_i_css/come_funzionano_i_css/index.html b/files/it/conoscere_i_css/come_funzionano_i_css/index.html
new file mode 100644
index 0000000000..2c3719a7e7
--- /dev/null
+++ b/files/it/conoscere_i_css/come_funzionano_i_css/index.html
@@ -0,0 +1,117 @@
+---
+title: Come funzionano i CSS
+slug: Conoscere_i_CSS/Come_funzionano_i_CSS
+tags:
+  - Conoscere_i_CSS
+  - DOM
+  - Tutte_le_categorie
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>
+</p><p>Questa pagina spiega il funzionamento dei CSS nel browser.
+Analizzeremo il documento di esempio, rivelando i dettagli del suo stile.
+</p>
+<h3 id="Informazioni:_Come_funzionano_i_CSS" name="Informazioni:_Come_funzionano_i_CSS"> Informazioni: Come funzionano i CSS </h3>
+<p>Quando Mozilla visualizza un documento, deve combinare il suo contenuto con le informazioni sullo stile. Quindi elabora il documento in due fasi:
+</p>
+<ul><li>Nella prima, Mozilla converte il linguaggio di markup e i CSS in un <i><a href="it/DOM">DOM</a></i> (Document Object Model). Il DOM rappresenta il documento nella memoria del computer. Combina il contenuto del documento con il suo stile.
+</li></ul>
+<ul><li>Nella seconda fase Mozilla visualizza il DOM.
+</li></ul>
+<p>Un linguaggio di marcatura utilizza i tag per definire la struttura del documento. Un tag può anche essere un contenitore, con altri tag tra il suo inizio e la sua fine.
+</p><p>Un DOM ha una struttura ad albero. Ogni tag e ogni blocco di testo nel linguaggio di marcatura diviene un <i>nodo</i> della struttura ad albero. I nodi del DOM non sono contenitori. Possono invece essere genitori (parent) dei nodi figli (child).
+</p><p>I nodi corrispondenti ai tag sono consociuti anche come <i>elementi</i>.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempio
+</caption><tbody><tr>
+<td> Nel documento di esempio il tag <code>&lt;p&gt;</code> e il suo tag di chiusura <code>&lt;/p&gt;</code> creano un contenitore:
+<div style="width: 24em;">
+<pre class="eval">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+</div>
+<p>Nel DOM, il nodo corrispondente P è un genitore.
+I suoi figli sono i nodi <small>STRONG</small> e i nodi di testo.
+I nodi <small>STRONG</small> sono a loro volta genitori dei nodi di testo (che ne sono quindi figli):
+</p>
+<div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;">
+<p><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">C</span>"
+│
+├─"<span style="color: black;">ascading</span>"
+│
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">S</span>"
+│
+├─"<span style="color: black;">tyle</span>"
+│
+├─<span style="color: black;">STRONG</span>
+│ │
+│ └─"<span style="color: black;">S</span>"
+│
+└─"<span style="color: black;">heets</span>"
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Comprendere il DOM aiuta nel progettare, correggere e manutenere il CSS, poiché il DOM è il luogo in cui si incontrano CSS e contenuto del documento.
+</p>
+<h3 id="Azione:_Analizzare_un_DOM" name="Azione:_Analizzare_un_DOM"> Azione: Analizzare un DOM </h3>
+<p>Per analizzare il DOM occorre un software particolare.
+In questa guida si utilizza il <a href="it/DOM_Inspector">DOM Inspector</a> di Mozilla (o DOMi) per analizzare il DOM.
+</p><p>Apri il documento di esempio con il browser Mozilla.
+</p><p>Dalla barra dei menu del browser, seleziona Strumenti – DOM Inspector, oppure Strumenti – Sviluppo Web – DOM Inspector.
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> Se il tuo browser Mozilla non possiede il DOMi, è sufficiente reinstallare il browser avendo cura di scegliere l'installazione dei componenti di sviluppo.
+<p>Se non hai intenzione di installare il DOMi, puoi saltare questa parte e andare direttamente alla prossima pagina.
+Saltare questa sezione non interferisce con la comprensione del resto della guida.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Nel DOMi, espandi i nodi del tuo documento cliccando sulle loro freccette.
+</p><p><b>Nota: </b> Gli spazi nel file HTML potrebbero far sì che il DOM mostri alcuni nodi di testo vuoti, che possono essere ignorati.
+</p><p>Il risultato dovrebbe essere simile a questo, a seconda di quali nodi siano stati espansi:
+</p>
+<table style="border: 2px outset #36b; padding: 0 0 0 2em;">
+<tbody><tr>
+<td><div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;">
+<p>│
+<span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span>
+│ │
+│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span>
+│ │
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Quando si seleziona un nodo, nel pannello di destra del DOMi vengono mostrate informazioni ulteriori a proposito di quel nodo.
+Per esempio quando si seleziona un nodo di testo, il DOMi mostra il testo nel pannello di destra.
+</p><p>Quando viene selezionato il nodo di un elemento, il DOMi lo analizza e fornisce una grande quantità di informazioni nel pannello di destra. Le informazioni sullo stile non sono che una parte di quelle fornite.
+</p><p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Nel DOMi, fai clic su un nodo <small>STRONG</small>.
+<p>Utilizza il pannello di destra del DOMi per trovare in quale punto viene definito il colore rosso del nodo e dove il suo aspetto viene reso più marcato del testo normale.
+</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
+</p><p>Se hai eseguito gli esercizi, hai potuto vedere come le informazioni sullo stile siano presenti in diversi posti ed interagiscano per rendere lo stile finale dell'elemento.
+</p><p>La prossima pagina spiega meglio queste interazioni:
+<b><a href="it/Conoscere_i_CSS/Cascata_ed_ereditariet%c3%a0">Cascata ed ereditarietà</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pl": "pl/CSS/Na_pocz\u0105tek/Jak_dzia\u0142a_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha" } ) }}
diff --git a/files/it/conoscere_i_css/css_leggibili/index.html b/files/it/conoscere_i_css/css_leggibili/index.html
new file mode 100644
index 0000000000..e26e23cf8b
--- /dev/null
+++ b/files/it/conoscere_i_css/css_leggibili/index.html
@@ -0,0 +1,156 @@
+---
+title: CSS leggibili
+slug: Conoscere_i_CSS/CSS_leggibili
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>
+</p><p>In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso.
+</p><p>Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile.
+</p>
+<h3 id="Informazioni:_CSS_leggibili" name="Informazioni:_CSS_leggibili"> Informazioni: CSS leggibili </h3>
+<p>E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili.
+Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile.
+</p>
+<h4 id="Spazi_bianchi" name="Spazi_bianchi"> Spazi bianchi </h4>
+<p>Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee.
+Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili.
+</p><p>Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose.
+</p><p>La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempi
+</caption><tbody><tr>
+<td> Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga:
+<pre>
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+<p>Altri preferiscono il metodo "una proprietà per linea":
+</p>
+<div style="width: 45em;">
+<pre class="eval">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+</div>
+<p>Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni:
+</p>
+<div style="width: 45em;">
+<pre class="eval">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+</div>
+<p>Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere):
+</p>
+<div style="width: 45em;">
+<pre class="eval">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+</div>
+<p>Alcuni usano la tabulazione. Altri solo gli spazi.
+</p>
+</td></tr></tbody></table>
+<h4 id="Commenti" name="Commenti"> Commenti </h4>
+<p>I commenti nei CSS iniziano con <code>/*</code> e terminano con <code>*/</code>.
+</p><p>I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per <i>isolare</i> temporaneamente alcune parti di codice per scopi di test.
+</p><p>Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento.
+Il resto del documento deve continuare ad avere una sintassi corretta.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempio
+</caption><tbody><tr>
+<td>Un commento vero e proprio:
+<div style="width: 45em;">
+<pre class="eval">/* stile per la lettere iniziale C del primo paragrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+<p>Un isolamento:
+</p>
+<div style="width: 45em;">
+<pre class="eval"><b>/*</b> isolo una porzione del codice
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+ <b>*/</b>
+</pre>
+</div>
+</td></tr></tbody></table>
+<h4 id="Raggruppare_i_selettori" name="Raggruppare_i_selettori"> Raggruppare i selettori </h4>
+<p>Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole.
+La dichiarazione verrà applicata a tutti gli elementi selezionati.
+</p><p>Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Esempi
+</caption><tbody><tr>
+<td> Questa regola rende gli elementi <small>H1</small>, <small>H2</small> e <small>H3</small> dello stesso colore.
+<p>E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica.
+</p>
+<div style="width: 30em;">
+<pre class="eval">/* colore dei titoli */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+</td></tr></tbody></table>
+<h3 id="Azione:_Aggiungere_commenti_e_migliorare_la_struttura" name="Azione:_Aggiungere_commenti_e_migliorare_la_struttura"> Azione: Aggiungere commenti e migliorare la struttura </h3>
+<p>Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine):
+</p>
+<div style="width: 30em;">
+<pre class="eval">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+</div>
+<p>Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno.
+</p><p>Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa:
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>(Esiste più di un modo per ottenere questo risultato.)
+</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Il foglio di stile dell'esempio utilizza solamente il testo corsivo (<i>italic</i>) o il testo sottolineato (<i>underline</i>).
+La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento:
+<b><a href="it/Conoscere_i_CSS/Stili_del_testo">Stili del testo</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }}
diff --git a/files/it/conoscere_i_css/i_selettori/index.html b/files/it/conoscere_i_css/i_selettori/index.html
new file mode 100644
index 0000000000..09c970edd2
--- /dev/null
+++ b/files/it/conoscere_i_css/i_selettori/index.html
@@ -0,0 +1,150 @@
+---
+title: I Selettori
+slug: Conoscere_i_CSS/I_Selettori
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>
+</p><p>Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza.
+</p><p>Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio
+</p>
+<h3 id="Informazioni:_I_Selettori" name="Informazioni:_I_Selettori"> Informazioni: I Selettori </h3>
+<p>I CSS hanno una terminologia propria per descrivere il linguaggio CSS.
+Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa:
+</p>
+<div style="width: 30em;"><pre>strong {color: red;}
+</pre></div>
+<p>Nella terminologia dei CSS l'intera stringa è una <i>regola</i> (rule). La regola inizia con <code>strong</code>, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola.
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> La parte contenuta all'interno delle parentesi graffe è la <i>dichiarazione</i> (declaration).
+<p>La parola chiave <code>color</code> è una <i>proprietà</i> (property), e <code>red</code> è un <i>valore</i>(value).
+</p><p>Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione.
+</p><p>Questa guida si riferirà ai selettori del tipo di <code>strong</code> come a dei selettori <i>tag</i>.
+Le specifiche dei CSS vi si riferiscono invece come a dei selettori di <i>tipo</i>.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS.
+</p><p>In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico.
+</p><p>Esistono due attributi che hanno uno status speciale nei CSS: <code>class</code> e <code>id</code>.
+</p><p>L'attributo <code>class</code> di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe.
+</p><p>Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore.
+</p><p>L'attributo <code>id</code> di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento.
+</p><p>Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#).
+</p>
+<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;">
+<caption>Esempi
+</caption><tbody><tr>
+<td> Questo tag HTML ha sia un attributo <code>class</code> che uno <code>id</code>:
+<div style="width: 30em;"><pre>
+&lt;P class="key" id="principal"&gt;
+</pre></div>
+<p>L'id "<code>principal</code>" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo <code>class</code>.
+</p><p>In un foglio di stile questa regola rende tutti gli elementi della classe <code>key</code> verdi.
+(Potrebbero anche non essere tutti elementi di tipo <small>P</small>.)
+</p>
+<div style="width: 30em;"><pre>
+.key {color: green;}
+</pre></div>
+<p>Questa regola rende l'unico elemento con l'id <code>principal</code> in grassetto:
+</p>
+<div style="width: 30em;"><pre>
+#principal {font-weight: bolder;}
+</pre></div>
+</td></tr></tbody></table>
+<p><br>
+Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore <code>id</code> è più specifico di un selettore <code>class</code>, che però è più specifico di un selettore di tipo "tag".
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> I selettori possono anche essere combinati così da essere resi più specifici.
+<p>Per esempio, il selettore <code>.key</code> seleziona tutti gli elementi che hanno l'attributo <code>class</code> con il valore <code>key</code>. Il selettore <code>p.key</code> seleziona solo gli elementi P che abbiano il valore <code>key</code> all'attributo <code>class</code>.
+</p><p>Non si è limitati ai due attributi speciali, <code>class</code> e <code>id</code>. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore <code>{{ mediawiki.external('type=button') }}</code> seleziona tutti gli elementi che hanno l'attributo <code>type</code> con il valore <code>button</code> assegnato.
+</p><p>Più avanti in questa guida, la pagina sulle (<a href="it/Conoscere_i_CSS/Tabelle">Tabelle</a>) contiene informazioni sui selettori complessi basati sulle relazioni.
+</p><p>Per informazioni complete sui selettori, consulta "<a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selettori</a>" nelle specifiche CSS.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile.
+</p><p>Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità.
+</p>
+<h3 id="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22" name="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22"> Azione: Utilizzare i selettori "class" e "id" </h3>
+<p>Apri il file HTML e duplica il paragrafo facendo copia/incolla.
+Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file:
+</p>
+<div style="width: 48em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+  &lt;HEAD&gt;
+  &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
+  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;P <strong style="color: black;">id="first"</strong>&gt;
+      &lt;STRONG <strong style="color: black;">class="carrot"</strong>&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;
+    <strong style="color: black;">&lt;P id="second"&gt;
+      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;</strong>
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>Ora apri il file CSS. Sostituisci l'intero contenuto con:
+</p>
+<div style="width: 40em;"><pre>strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+</pre></div>
+<p>Aggiorna il browser per vedere il risultato:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p><br>
+Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso.
+</p><p>I selettori di classe <code>.carrot</code> e <code>.spinach</code> hanno sempre la priorità su il selettore di tag <code>strong</code>.
+</p><p>Il selettore di id <code>#first</code> ha sempre la priorità sui selettori di classe e di tag.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu:
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu:
+</p>
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
+</p><p>Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere:
+<b><a href="it/Conoscere_i_CSS/CSS_leggibili">CSS leggibili</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}
diff --git a/files/it/conoscere_i_css/index.html b/files/it/conoscere_i_css/index.html
new file mode 100644
index 0000000000..1575848fb2
--- /dev/null
+++ b/files/it/conoscere_i_css/index.html
@@ -0,0 +1,42 @@
+---
+title: Iniziare (Esercitazione di CSS)
+slug: Conoscere_i_CSS
+translation_of: Learn/CSS/First_steps
+---
+<p><span id="result_box" lang="it"><span class="hps">Rivolto a</span>i <span class="hps">principianti assoluti</span><span>,</span> <span class="hps">questa <strong>esercitazione di </strong></span><strong><span class="hps">CSS</span></strong> <span class="hps">per principianti</span> <span class="hps">presenta</span> il </span><a href="https://developer.mozilla.org/en-US/docs/CSS" title="/en-US/docs/CSS">Cascading Style Sheets</a><span id="result_box" lang="it"> <span class="atn hps">(</span><span>CSS)</span><span>.</span> <span class="hps">Guida l'utente</span> <span class="hps">attraverso le</span> <span class="hps">caratteristiche di base del linguaggio </span><span class="hps">con</span> <span class="hps">esempi pratici</span> <span class="hps">che possono essere provati</span> <span class="hps">sul proprio computer</span> <span class="hps">e illustra</span> <span class="hps">le caratteristiche standard</span> <span class="hps">di CSS</span> <span class="hps">che funzionano</span> <span class="hps">nei moderni browser</span><span class="hps">.</span></span></p>
+
+<p>Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.</p>
+
+<nav class="fancyTOC"><a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/What_is_CSS" title="Chapter 'What is CSS' of the CSS tutorial">Cos'è CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Perchè usare CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Come lavora CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascata e ereditarietà</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selettori</a><a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial"> CSS leggibili</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Stili di testo</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Colore</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Contenuto</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Elenchi</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Box</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Impaginazione</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tabelle</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav>
+
+<h3 id="Di_cosa_hai_bisogno_per_iniziare">Di cosa hai bisogno per iniziare?</h3>
+
+<p>Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.</p>
+
+<p>Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.</p>
+
+<p><strong>Nota: </strong> CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.</p>
+
+<h3 id="Come_utilizzare_questa_esercitazione">Come utilizzare questa esercitazione</h3>
+
+<p>Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.</p>
+
+<p>In ogni pagina, puoi usare la sezione <em>Informazioni </em>per capire come funziona CSS. Usare la sezione <em>Azione</em> per provare ad utilizzare CSS sul proprio computer.</p>
+
+<p>Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.</p>
+
+<p>Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati <em>Maggiori dettagli</em>. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.</p>
+
+<h2 id="Esercitazione_Parte_II">Esercitazione Parte II</h2>
+
+<p>Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla</p>
+
+<ol>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Grafica SVG</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dati XML</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Collegamento XBL</a></strong></li>
+ <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfacce utente XUL</a></strong></li>
+</ol>
+
+<p> </p>
diff --git a/files/it/conoscere_i_css/perché_usare_i_css/index.html b/files/it/conoscere_i_css/perché_usare_i_css/index.html
new file mode 100644
index 0000000000..b7d304c91f
--- /dev/null
+++ b/files/it/conoscere_i_css/perché_usare_i_css/index.html
@@ -0,0 +1,106 @@
+---
+title: Perché usare i CSS
+slug: Conoscere_i_CSS/Perché_usare_i_CSS
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p> </p>
+
+<p>Questa pagina spiega perché i documenti utilizzano i CSS. Utilizzerai i CSS per aggiungere un foglio di stile (stylesheet) al tuo documento di esempio.</p>
+
+<h3 id="Informazioni:_Perch.C3.A9_usare_i_CSS.3F" name="Informazioni:_Perch.C3.A9_usare_i_CSS.3F">Informazioni: Perché usare i CSS?</h3>
+
+<p>I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come <em>stile</em>. Mantenere lo stile separato dal contenuto permette di:</p>
+
+<ul>
+ <li>Evitare duplicazioni</li>
+ <li>Rendere la modifica e la manutenzione più semplice</li>
+ <li>Applicare allo stesso contenuto stili diversi per diversi scopi</li>
+</ul>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Esempi</caption>
+ <tbody>
+  <tr>
+   <td>1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine.
+    <p>2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Di più...</caption>
+ <tbody>
+  <tr>
+   <td>Un linguaggio di marcatura come HTML fornisce qualche sistema per specificare lo stile, ad esempio l'uso del tag <code>&lt;b&gt;</code> per segnare un testo in grassetto o la definizione del colore di sfondo della pagina all'interno del tag <code>&lt;body&gt;</code> (questo secondo esempio è fortemente deprecato).
+    <p>Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Azione:_Creare_un_foglio_di_stile" name="Azione:_Creare_un_foglio_di_stile">Azione: Creare un foglio di stile</h3>
+
+<p>Crea un altro file di testo vuoto nella stessa directory utilizzata prima. Questo file sarà il foglio di stile. Nominalo come: <code>style1.css</code></p>
+
+<p>Nel file CSS, copia e incolla questa singola stringa, poi salva il file:</p>
+
+<div style="width: 40em;">
+<pre class="eval">strong {color: red;}
+</pre>
+</div>
+
+<h4 id="Collegare_il_foglio_di_stile_al_proprio_documento" name="Collegare_il_foglio_di_stile_al_proprio_documento">Collegare il foglio di stile al proprio documento</h4>
+
+<p>Per collegare il foglio di stile al tuo documento occorre modificare il file HTML. Aggiungi la linea segnalata in grassetto:</p>
+
+<div style="width: 40em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+  &lt;HEAD&gt;
+  &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
+  <strong style="color: black;">&lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;</strong>
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;P&gt;
+      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Salva il file e ricarica la finestra del browser. Il foglio di stile renderà ora le lettere iniziali in rosso, come segue:</p>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;">
+ <caption>Esercizi</caption>
+ <tbody>
+  <tr>
+   <td>Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F">Cos'altro?</h4>
+
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.</p>
+
+<p>Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: <strong><a href="it/Conoscere_i_CSS/Come_funzionano_i_CSS">Come funzionano i CSS</a></strong></p>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS" } ) }}</p>