Merge pull request #40 from fiji-flo/unslugging-it

Unslugging it

4 files changed, 405 insertions, 0 deletions

diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..5d659fa8fd
--- /dev/null
+++ b/files/it/conflicting/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,152 @@
+---
+title: I Selettori
+slug: conflicting/Learn/CSS/Building_blocks/Selectors
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Web/Guide/CSS/Getting_started/Selectors
+original_slug: Conoscere_i_CSS/I_Selettori
+---
+<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/conflicting/learn/css/first_steps/how_css_works/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..87f955fffe
--- /dev/null
+++ b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,119 @@
+---
+title: Come funzionano i CSS
+slug: conflicting/Learn/CSS/First_steps/How_CSS_works
+tags:
+  - Conoscere_i_CSS
+  - DOM
+  - Tutte_le_categorie
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
+original_slug: Conoscere_i_CSS/Come_funzionano_i_CSS
+---
+<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/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html
new file mode 100644
index 0000000000..bd894b245b
--- /dev/null
+++ b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html
@@ -0,0 +1,109 @@
+---
+title: Perché usare i CSS
+slug: >-
+  conflicting/Learn/CSS/First_steps/How_CSS_works_113cfc53c4b8d07b4694368d9b18bd49
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
+original_slug: Conoscere_i_CSS/Perché_usare_i_CSS
+---
+<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>
diff --git a/files/it/conflicting/learn/css/index.html b/files/it/conflicting/learn/css/index.html
new file mode 100644
index 0000000000..134aff0622
--- /dev/null
+++ b/files/it/conflicting/learn/css/index.html
@@ -0,0 +1,25 @@
+---
+title: CSS developer guide
+slug: conflicting/Learn/CSS
+tags:
+  - CSS
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+translation_of_original: Web/Guide/CSS
+original_slug: Web/Guide/CSS
+---
+<p>{{draft}}</p>
+<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p>
+<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p>
+<p>{{LandingPageListSubpages}}</p>
+<h2 id="Pages_elsewhere">Pages elsewhere</h2>
+<p>Here are other pages related to CSS that should be linked to from here.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li>
+  <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li>
+  <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li>
+</ul>