initial commit

10 files changed, 2415 insertions, 0 deletions

diff --git a/files/it/learn/css/building_blocks/index.html b/files/it/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..ef61b8c18b
--- /dev/null
+++ b/files/it/learn/css/building_blocks/index.html
@@ -0,0 +1,89 @@
+---
+title: La costruzione del CSS
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Principiante
+  - building blocks
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Questo modulo di apprendimento è il seguito di <a href="/en-US/docs/Learn/CSS/First_steps">Primi passi con il CSS</a>: dopo aver familiarizzato con il linguaggio e la sua sintassi e dopo aver acquisito una minima esperienza di utilizzo, è ora di andare più a fondo. In questo modulo verranno trattati: funzionamento a cascata ed ereditarietà, tutti i tipi di selettori disponibili, unità di misura, dimensioni, stilizzazione di sfondi e contorni, debug e molto altro.</p>
+
+<p class="summary">Lo scopo del modulo è fornire gli strumenti per sviluppare CSS efficaci e le basi teoriche essenziali, prima di procedere verso discipline più specifiche come la <a href="/it/docs/Learn/CSS/Styling_text">stilizzazione del testo</a> e il <a href="/it/docs/Learn/CSS/CSS_layout">layout CSS</a>.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Per affrontare questo modulo è necessario:</p>
+
+<ol>
+ <li>Familiarità con l'utilizzo di computer e navigazione passiva sul Web (ovvero consultare semplicemente i contenuti, senza manipolarli).</li>
+ <li>Un ambiente di lavoro base come specificato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a> e le conoscenze necessarie a creare e gestire file, come specificato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a>.</li>
+ <li>Una minima familiarità con l'HTML, come trattato nel modulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione all'HTML</a>.</li>
+ <li>Comprensione delle basi del CSS come trattato nel modulo <a href="/en-US/docs/Learn/CSS/First_steps">Primi passi con il CSS</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<p>Questo modulo contiene i seguenti articoli, che coprono le basi del linguaggio CSS. Lungo il percorso sono previsti vari esercizi per verificare la comprensione dell'argomento.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade ed ereditarietà</a></dt>
+ <dd>L'obiettivo di questa lezione è sviluppare la comprensione di alcuni dei concetti fondamentali del CSS (il <em>cascade</em>, la specificità e l'ereditarietà) che regolano l'applicazione del CSS all'HTML e la risoluzione dei conflitti.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selettori CSS</a></dt>
+ <dd>Esiste una grande varietà di selettori CSS, che permettono di selezionare con estrema precisione gli elementi da stilizzare. In questo articolo e nelle sue sotto-sezioni osservando come funzionano nel dettaglio le differenti tipologie. Le sotto-sezioni sono le seguenti:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tipo, classi, e selettori ID</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selettori di attributi</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classi e pseudo-elementi</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinatori</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Il modello a contenitori CSS</a></dt>
+ <dd>Ogni elemento CSS è racchiuso in un contenitore. Comprendere il funzionamento dei contenitori è fondamentale per creare layout con il CSS o allineare fra loro gli elementi. In questa lezione studieremo il <em>modello a contenitori</em> del CSS, una premessa necessaria per acquisire dimestichezza con il loro funzionamento e relativa terminologia prima di passare a configurazioni di layout più complesse.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Sfondi e contorni</a></dt>
+ <dd>In questa lezione accenneremo alle potenzialità creative del CSS mediante la stilizzazione di sfondi e contorni. Affronteremo numerose delle domande più frequenti sul CSS come aggiungere gradienti, immagini di sfondo e angoli arrotondati.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestire direzioni di testo differenti</a></dt>
+ <dd>Recentemente il CSS si è evoluto per supportare meglio differenti direzioni del contenuto, sia quella da destra verso sinistra che quella dall'alto verso il basso (come il giapponese). Queste differenti direzioni sono chiamate <strong>writing modes</strong>, cioè modalità di scrittura. Introduciamo l'argomento perché più avanti, quando inizieremo a lavorare con i layout, sarà utile capire le modalità di scrittura.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflow dei contenuti</a></dt>
+ <dd>In questa lezione vedremo un altro importante concetto nel CSS: l'<strong>overflow</strong>. L'overflow si verifica quando il contenuto è troppo per essere adeguatamente racchiuso in un contenitore. In questa guida impareremo di cosa si tratta e come gestirlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valori e unità CSS</a></dt>
+ <dd>Ogni proprietà usata nel CSS ha un valore o un insieme di valori consentiti per quella proprietà. In questa lezione affronteremo i valori e le unità più diffusi.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Ridimensionare gli elementi nel CSS</a></dt>
+ <dd>Nelle precedenti lezioni abbiamo incontrato diversi metodi per ridimensionare elementi in una pagina web utilizzando il CSS. È importante essere in grado di calcolare la dimensione dei diversi elementi nel proprio concetto grafico. In questa lezione riassumeremo i vari metodi per definire la grandezza di un elemento tramite il CSS e alcuni termini riguardo le grandezze che potranno esserti d'aiuto in futuro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Immagini, contenuti multimediali e moduli</a></dt>
+ <dd>In questa lezione vedremo come alcuni elementi speciali vengono gestiti nel CSS. Gli elementi di immagini, altri contenuti multimediali e moduli presentano leggere differenze in termini di possibilità di stilizzazione in contenitori regolari. Sapere cosa sia possibile e cosa no può evitare errori frustranti. In questa lezione evidenzieremo le conoscenze più importanti che ci serviranno.</dd>
+ <dt><a href="/it/docs/Learn/CSS/Building_blocks/Styling_tables">Stili e tabelle</a></dt>
+ <dd>Stilizzare una tabella HTML non è il lavoro più entusiasmante al mondo, ma a volte tocca a farlo. Questo articolo fornisce una guida per rendere le tabelle HTML graficamente gradevoli, presentando anche tecniche di stilizzazione specifiche.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Fare il debug in CSS</a></dt>
+ <dd>Un problema comune nello sviluppo del CSS è quando il codice presenta comportamenti imprevisti. Questo articolo fornisce una traccia per compiere il debug di un problema con il CSS e mostra come impiegare i DevTools (gli strumenti per sviluppatore incorporati in tutti i browser moderni) per individuare le anomalie.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizzare il CSS</a></dt>
+ <dd>Quando si inizia a lavorare su fogli di stile e progetti sempre più corposi, ci si rende conto che mantenere un file CSS di grandi dimensioni può essere impegnativo. In questo articolo affronteremo velocemente alcune buone pratiche per scrivere un foglio CSS facilmente gestibile e altre soluzioni escogitate dai vari sviluppatori per semplificare la gestione del codice.</dd>
+</dl>
+
+<h2 id="Valutazioni">Valutazioni</h2>
+
+<p>Per chi desidera mettersi alla prova, le seguenti valutazioni sono realizzate appositamente per verificare la comprensione degli argomenti CSS affrontati nelle guide precedenti.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Comprensione delle basi di CSS</a></dt>
+ <dd>Questa valutazione verifica la comprensione della sintassi CSS di base, selettori, specificità, modelli di contenitori e altro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Realizza una carta da lettere intestata</a></dt>
+ <dd>Per fare una buona prima impressione non c'è niente di meglio che scrivere una lettera su carta intestata ricercata. Per superare questa valutazione dovrai realizzare un modello di carta intestata online dalla grafica accattivante.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Un gran bel contenitore</a></dt>
+ <dd>In questa valutazione faremo pratica con la stilizzazione di sfondi e contorni per realizzare un contenitore che non passa inosservato.</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Effetti avanzati di stilizzazione</a></dt>
+ <dd>Questo articolo è una sorta di scatola dei trucchi: fornisce un'introduzione ad alcune interessanti funzionalità avanzate di stilizzazione come ombre, modalità di fusione e filtri.</dd>
+</dl>
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html
new file mode 100644
index 0000000000..cf0f6662cf
--- /dev/null
+++ b/files/it/learn/css/building_blocks/selettori/index.html
@@ -0,0 +1,231 @@
+---
+title: selettori CSS
+slug: Learn/CSS/Building_blocks/Selettori
+tags:
+  - Attributo
+  - CSS
+  - Classe
+  - Impara
+  - Principiante
+  - Pseudo
+  - Selettori
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenze informatiche di base, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">istallazione di software fondamentali</a>, conoscenze base di <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">gestione dei file</a>, basi di HTML (vedi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione ad HTML</a>) ed avere un'idea di base di come funzionano i CDD (vedi <a href="/en-US/docs/Learn/CSS/First_steps">primi passi con i CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivo:</th>
+   <td>Apprendere nel dettaglio il funzionamento dei selettori CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cosé_un_selettore">Cos'é un selettore?</h2>
+
+<p>Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come <em>soggetto del selettore</em>.</p>
+
+<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi <code>h1</code> oppure una classe come <code>.special</code>.</p>
+
+<p>Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.</p>
+
+<h2 id="Liste_di_selettori">Liste di selettori</h2>
+
+<p>Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un <code>h1</code> ed anche per la classe <code>.special</code>, potrei scriverlo nel seguente modo.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.</p>
+
+<pre class="brush: css notranslate"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.</p>
+
+<pre class="brush: css notranslate"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.</p>
+
+<p>Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore <code>h1</code> non presenta errori e la sua dichiarazione verrá eseguita correttamente.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p>Tuttavia se combinati, né il selettore <code>h1</code> né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.</p>
+
+<pre class="brush: css notranslate"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="Tipi_di_selettori">Tipi di selettori</h2>
+
+<p>I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.</p>
+
+<h3 id="Selettori_di_tipo_classe_e_ID">Selettori di tipo, classe e ID</h3>
+
+<p>Questo gruppo include i selettori usati per gli elementi della pagina HTML come <code>&lt;h1&gt;</code>.</p>
+
+<pre class="brush: css notranslate">h1 { }</pre>
+
+<p>Include inoltre i selettori di classe:</p>
+
+<pre class="brush: css notranslate">.box { }</pre>
+
+<p>oppure di ID:</p>
+
+<pre class="brush: css notranslate">#unique { }</pre>
+
+<h3 id="Selettori_di_attributo">Selettori di attributo</h3>
+
+<p>Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:</p>
+
+<pre class="brush: css notranslate">a[title] { }</pre>
+
+<p>Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:</p>
+
+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+
+<h3 id="Pseudo-classi_e_pseudo-elementi">Pseudo-classi e pseudo-elementi</h3>
+
+<p>Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe <code>:hover</code> seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:</p>
+
+<pre class="brush: css notranslate">a:hover { }</pre>
+
+<p>Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, <code>::first-line</code> seleziona sempre la prima riga di testo di un elemento (un elemento <code>&lt;p&gt;</code> nell'esempio seguente), come se questa fosse messa dentro un blocco  <code>&lt;span&gt;</code>  e selezionata.</p>
+
+<pre class="brush: css notranslate">p::first-line { }</pre>
+
+<h3 id="Combinatori">Combinatori</h3>
+
+<p>L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <code>&lt;article&gt;</code> utilizzando il combinatore (<code>&gt;</code>):</p>
+
+<pre class="brush: css notranslate">article &gt; p { }</pre>
+
+<h2 id="Prossimo_passo">Prossimo passo</h2>
+
+<p>Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">selettori di tipo, classe e id</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Tabella_riassuntiva_dei_selettori">Tabella riassuntiva dei selettori</h2>
+
+<p>La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selettore</th>
+   <th scope="col">Esempio</th>
+   <th scope="col">Tutorial sui CSS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Type_selectors">Selettore di tipo</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Selettore di tipo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Class_selectors">Selettore di classe</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Selettore di classe</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td>
+   <td><code>article p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/it/learn/css/building_blocks/styling_tables/index.html b/files/it/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..990188c01c
--- /dev/null
+++ b/files/it/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,294 @@
+---
+title: Stili e tabelle
+slug: Learn/CSS/Building_blocks/Styling_tables
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Applicare stili a tabelle HTML non è il lavoro più stimolante che esista, ma di tanto in tanto va fatto. Questo articolo vi guiderà nel compito di rendere gradevoli le tabelle HTML, usando gli attributi spiegati in articoli precedenti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Basi HTML (vedi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), tabelle HTML (vedi il modulo tabelle HTML (TBD)), e un'idea di come funzioni un CSS (studia <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Uso efficace degli stili su tabelle HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Una_tipica_tabella_HTML">Una tipica tabella HTML</h2>
+
+<p>Iniziamo a vedere una tipica tabella HTML. Beh, diciamo tipica — gli esempi di tabella contengono scarpe, meteo, dipendenti; rendiamo le cose più interessanti usando le più famose band punk del Regno Unito. Il codice quindi sarà questo:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Band&lt;/th&gt;
+      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
+      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
+      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+     ... alcune righe rimosse per concisione
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>La tabella è ben formata, è facile applicarle stili, è accessibile, grazie all'uso di attributi come {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, ecc. Però non ha un bell'aspetto quando vista su schermo (vedila su <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Ha un aspetto rozzo, poco leggibile e noioso. Dobbiamo usare un po' di CSS per rimediare.</p>
+
+<h2 id="Apprendere_attivamente_Diamo_stile_alla_tabella">Apprendere attivamente: Diamo stile alla tabella</h2>
+
+<p>In questa sezione di apprendimento attivo daremo stile insieme alla nostra tabella.</p>
+
+<ol>
+ <li>Per iniziare, fai una copia in locale del <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">codice di esempio</a>, scarica le immagini (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> e <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), e e metti i tre files in una directory di lavoro sul tuo computer.</li>
+ <li>Quindi, crea un nuovo file e salvalo col nome <code>style.css</code> nella stessa directory degli altri file.</li>
+ <li>Collega il file CSS all'interno del codice HTML scrivendo questa riga di HTML all'interno della sezione {{htmlelement("head")}}:
+  <pre class="brush: html">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="Spaziatura_e_layout">Spaziatura e layout</h3>
+
+<p>La prima cosa da fare è mettere ordine nella spaziatura/layout, visto che lo stile predefinito è davvero rozzo! Per ottenere questo risultato, mettiamo queste definizioni CSS al file <code>style.css</code>:</p>
+
+<pre class="brush: css">/* spaziatura */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>Le definizioni più importanti da notare sono:</p>
+
+<ul>
+ <li>Impostare il valore di {{cssxref("table-layout")}} a <code>fixed</code> è una buona idea per le tabelle: ne renderà l'aspetto di default più prevedibile. Di norma, le colonne adattano la loro larghezza in base ai contenuti, il che può portare a strani risultati. Con <code>table-layout: fixed</code>, puoi dimensionare le colonne in base alla larghezza delle intestazioni, e far fluire i contenuti di conseguenza. Ecco perché selezionare le 4 intestazioni con <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}})  ("Seleziona il figlio <em>n</em>esimo in una sequenza di elementi {{htmlelement("th")}}, dentro un elemento {{htmlelement("thead")}}") e ne impostarne la larghezza in percentuale. L'intera colonna avrà la larghezza dell'intestazione; e le colonne sono a posto. Chris Coyier parla in dettaglio di questa tecnica in <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
+  <br>
+  A questo associamo un {{cssxref("width")}} al 100%, cioè la tabella riempie in larghezza il suo contenitore, in automatico (anche se ci vuole del lavoro per farcela stare su schermi molto stretti).</li>
+ <li>Impostare l'attributo {{cssxref("border-collapse")}} a <code>collapse</code> è ormai una buona pratica standard. Per default, se imposti i bordi alle caselle, avranno un spazio tra loro, come mostrato dall'immagine: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> Non è bellissimo da vedere (anche se magari è ciò che volevi). Con <code>border-collapse: collapse;</code> i bordi collassano diventando singoli, e l'aspetto migliora notevolmente: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>Abbiamo messo un {{cssxref("border")}} intorno alla tabella: <span class="tlid-translation translation" lang="it"><span title="">serve perché poi metteremo dei bordi attorno a intestazione e footer della tabella. L'aspetto sarebbe strano e sconnesso senza un bordo intorno</span> <span title="">alla tabella e avremmo anche spazi vuoti</span></span>.</li>
+ <li>Impostiamo anche del {{cssxref("padding")}} nei {{htmlelement("th")}} e nei {{htmlelement("td")}} — questo darà un respiro maggiore ai dati rendendo la tabella più leggibile.</li>
+</ul>
+
+<p>A uesto punto, la nostra tabella ha già un aspetto molto migliore:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Semplici_concetti_tipografici">Semplici concetti tipografici</h3>
+
+<p>Ora diamo una sistemata al contenuto.</p>
+
+<p>Innanzi tutto, abbiamo trovato un font su <a href="https://www.google.com/fonts">Google Fonts</a> intonato alle nostre band punk. Puoi andare a sceglierne uno diverso se vuoi; devi solo sostituire l'elemento {{htmlelement("link")}} e la {{cssxref("font-family")}} con quelli che Google Fonts ti fornirà.</p>
+
+<p>Prima, inserisci il seguente elemento {{htmlelement("link")}} nella sezione head, prima dell'altro elemento <code>&lt;link&gt;</code>:</p>
+
+<pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>Ora aggiungi in testa al tuo file <code>style.css</code> i seguenti attributi CSS:</p>
+
+<pre class="brush: css">/* tipografia */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="it"><span title="">Non c'è nulla di specifico per tabelle;</span> <span title="">in generale impostiamo lo stile dei caratteri per rendere tutto di più facile lettura</span></span>:</p>
+
+<ul>
+ <li>We have set a global sans-serif font stack; this is purely a stylistic choice. We've also set our custom font on the headings inside the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements, for a nice grungy, punky look.</li>
+ <li>We've set some {{cssxref("letter-spacing")}} on the headings and cells, as we feel it aids readability. Again, mostly a stylistic choice.</li>
+ <li>We've center-aligned the text in the table cells inside the {{htmlelement("tbody")}} so that they line up with the headings. By default, cells are given a {{cssxref("text-align")}} value of <code>left</code>, and headings are given a value of <code>center</code>, but generally it looks better to have the alignments set the same for both. The default bold weight on the heading fonts is enough to differentiate their look.</li>
+ <li>We've right-aligned the heading inside the {{htmlelement("tfoot")}} so that it is visually associated better with its data point.</li>
+</ul>
+
+<p>The result looks a bit neater:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Grafica_e_colori">Grafica e colori</h3>
+
+<p>Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.</p>
+
+<p>Start by adding the following CSS to your style.css file, again at the bottom:</p>
+
+<pre class="brush: css">thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>Again, there's nothing specific to tables here, but it is worthwhile to note a few things.</p>
+
+<p>We've added a {{cssxref("background-image")}} to the {{htmlelement("thead")}} and {{htmlelement("tfoot")}}, and changed the {{cssxref("color")}} of all the text inside the header and footer to white (and given it a {{cssxref("text-shadow")}}) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.</p>
+
+<p>We've also added a linear gradient to the {{htmlelement("th")}} and {{htmlelement("td")}} elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.</p>
+
+<h4 id="Zebra_striping">Zebra striping</h4>
+
+<p>We wanted to dedicate a separate section to showing you how to implement <strong>zebra stripes</strong> — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your <code>style.css</code> file:</p>
+
+<pre class="brush: css">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>Earlier on you saw the {{cssxref(":nth-child")}} selector being used to select specific child elements. It can also be given a formula as a parameter, so it will select a sequence of elements. The formula <code>2n-1</code> would select all the odd numbered children (1, 3, 5, etc.) and the formula <code>2n</code> would select all the even numbered children (2, 4, 6, etc.) We've used the <code>odd</code> and <code>even</code> keywords in our code, which do exactly the same things as the aforementioned formulae. In this case we are giving the odd and even rows different (lurid) colors.</li>
+ <li>We've also added a repeating background tile to all the body rows, which is just a bit of noise (a semi-transparent <code>.png</code> with a bit of visual distortion on it) to provide some texture.</li>
+ <li>Lastly, we've given the entire table a solid background color so that browsers that don't support the <code>:nth-child</code> selector still have a background for their body rows.</li>
+</ul>
+
+<p>This color explosion results in the following look:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.</p>
+
+<h3 id="Stile_del_titolo">Stile del titolo</h3>
+
+<p>There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your <code>style.css</code> file:</p>
+
+<pre class="brush: css">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p>There is nothing remarkable here, except for the {{cssxref("caption-side")}} property, which has been given a value of <code>bottom</code>. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+
+<h2 id="Apprendere_attivamente_Uno_stile_per_la_tua_tabella">Apprendere attivamente: Uno stile per la tua tabella</h2>
+
+<p>At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.</p>
+
+<h2 id="Trucchi_per_gli_stili_delle_tabelle">Trucchi per gli stili delle tabelle</h2>
+
+<p>Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:</p>
+
+<ul>
+ <li>Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.</li>
+ <li>Use {{cssxref("table-layout")}}<code>: fixed</code> to create a more predictable table layout that allows you to easily set column widths by setting {{cssxref("width")}} on their headings ({{htmlelement("th")}}).</li>
+ <li>Use {{cssxref("border-collapse")}}<code>: collapse</code> to make table elements borders collapse into each other, producing a neater and easier to control look.</li>
+ <li>Use {{htmlelement("thead")}}, {{htmlelement("tbody")}}, and {{htmlelement("tfoot")}} to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.</li>
+ <li>Use zebra striping to make alternative rows easier to read.</li>
+ <li>Use {{cssxref("text-align")}} to line up your {{htmlelement("th")}} and {{htmlelement("td")}} text, to make things neater and easier to follow.</li>
+</ul>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></li>
+</ul>
diff --git a/files/it/learn/css/css_layout/flexbox/index.html b/files/it/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..cc88b74d61
--- /dev/null
+++ b/files/it/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,344 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div><a href="/it/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox </a>è un metodo di layout monodimensionale per disporre i componenti in righe oppure in colonne. Quando l'area che li contiene aumenta, i componenti si espandono per colmarne lo spazio, quando invece si restringe anche i componenti si restringono.<br>
+Questo articolo comprende i concetti fondamentali.</div>
+
+<div></div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Le basi di HTML (leggi <a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione a HTML</a>) e nozioni sul funzionamento del CSS (leggi <a href="/en-US/docs/Learn/CSS/First_steps">Introduzione a CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Apprendere l'utilizzo di Flexbox per impostare il layout delle pagine web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Perchè_Flexbox">Perchè Flexbox?</h2>
+
+<p>Per molto tempo, le uniche tecniche affidabili per creare layout CSS compatibili con tutti i browser utilizzavano <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">elementi float</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">posizionamento</a>. Funzionavano a sufficienza, ma erano per alcuni aspetti limitati e frustranti.</p>
+
+<p>Per esempio con quelle tecniche era difficile o del tutto impossibile definire in maniera flessibile e vantaggiosa le seguenti impostazioni:</p>
+
+<ul>
+ <li>Centrare verticalmente un blocco di contenuti all'interno del proprio contenitore.</li>
+ <li>Fare in modo che i figli di un contenitore occupino lo stesso spazio in larghezza o altezza indipendentemente dalle dimensioni del contenitore stesso.</li>
+ <li>Fare in modo che in un layout multicolonna, le colonne siano ugualmente alte anche se i loro contenuti differiscono per lunghezza.</li>
+</ul>
+
+<p>Nelle sezioni seguenti apprenderemo come flexbox faciliti notevolmente questi compiti. Iniziamo!</p>
+
+<h2 id="Introduzione_a_un_semplice_esempio">Introduzione a un semplice esempio</h2>
+
+<p>Questo articolo presenta una serie di esercizi per aiutare a comprendere il funzionamento di flexbox. Per cominciare copiamo in locale il file di partenza <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> presente in github. Carichiamolo con un browser moderno, ad esempio Firefox o Chrome e facciamo attenzione al codice nell'editor. É possibile in alternativa visionarlo attraverso la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">versione live</a>.</p>
+
+<p><img alt="Image showing the starting point of Flexbox tutorial" src="https://i.imgur.com/Bih741v.png" style="height: 670px; width: 1310px;"></p>
+
+<p>Come vediamo la pagina è formata da un {{htmlelement("header")}} contenente il titolo principale, poi un elemento {{htmlelement("section")}} che contiene tre {{htmlelement("article")}}. Partiamo da questa situazione per creare un layout a tre colonne abbastanza comune.</p>
+
+<h2 id="Individuare_gli_elementi_da_impostare_come_box_flessibili">Individuare gli elementi da impostare come box flessibili</h2>
+
+<p>Per cominciare occorre scegliere il gruppo di elementi che devono apparire come box flessibili; per farlo occorre impostare un valore particolare della proprietà {{cssxref("display")}} del loro elemento padre. In questo caso specifico desideriamo sistemare gli elementi {{htmlelement("article")}}, perciò agiamo sul loro contenitore {{htmlelement("section")}}:</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Questa impostazione trasforma &lt;section&gt; in un <strong>contenitore flex</strong> e gli elementi figli in <strong>componenti flex</strong>. Questo è l'aspetto che otteniamo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>Proprio così: con questa semplice regola abbiamo già ottenuto tutto ciò che volevamo! Il layout diventa multicolonna e le colonne che lo formano sono della medesima larghezza e lunghezza. Tutto ciò avviene grazie ai componenti flex, cioè i figli del contenitore impostato come flex, che, grazie a valori predefiniti, risolvono automaticamente problemi tipici come questo.</p>
+
+<p>Ripassiamo cosa è avvenuto: l'elemento il cui valore di  {{cssxref("display")}} è <code>flex</code> si comporta come un elemento blocco all'interno della pagina, ma i suoi figli vengono disposti come componenti flex. Nella prossima sezione capiremo meglio che cosa significa. Notiamo che in alternativa possiamo usare il valore <code>inline-flex</code> per <code>display</code> cosicché gli elementi figlio diventano comunque componenti flex, ma il contenitore si comporta come un elemento in linea.</p>
+
+<h2 id="Il_modello_flex">Il modello flex</h2>
+
+<p>In qualità di componenti flex, gli elementi si dispongono lungo due assi:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>L’<strong>asse principale</strong> (main axis) è l'asse che traccia la direzione lungo la quale i componenti si dispongono, corrispondente in senso orizzontale alle righe oppure in senso verticale alle colonne. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse principale</strong> (main start) e <strong>termine dell'asse principale</strong> (main end).</li>
+ <li>L’<strong>asse traverso</strong> (cross axis) è l'asse perpendicolare alla direzione dei componenti flex. Definiamo l'inizio e la fine di questo asse <strong>inizio dell'asse traverso</strong> (cross start) e <strong>termine dell'asse traverso</strong> (cross end).</li>
+ <li>L'elemento su cui viene impostata la regola <code>display: flex</code>, che nel nostro esempio è {{htmlelement("section")}} è chiamato <strong>contenitore flex</strong> (flex container).</li>
+ <li>Gli elementi disposti come box flessibili all'interno del contenitore flex vengono chiamati <strong>componenti flex</strong> (flex items), che nel nostro caso sono gli elementi {{htmlelement("article")}}.</li>
+</ul>
+
+<p>Si tengano a mente queste definizioni durante le sezioni successive. In caso di confusione con i termini potete comunque tornare a rileggere questa sezione.</p>
+
+<h2 id="Colonne_o_righe">Colonne o righe?</h2>
+
+<p>Flexbox offre una proprietà chiamata flex-direction {{cssxref("flex-direction")}} che indica quale direzione deve seguire l'asse principale, ovvero come vengono disposti i contenuti flexbox;il valore predefinito è <code>row</code>, in modo che i contenuti si schierino in riga secondo il verso della lingua preimpostata dal browser, che per le quelle occidentali è da sinistra a destra.</p>
+
+<p>Proviamo ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p>
+
+<pre class="brush: css  notranslate">flex-direction: column;</pre>
+
+<p>Come vediamo i componenti tornano a schierarsi in colonna, come in un il flusso normale senza aggiungere CSS. Cancelliamo pure questa dichiarazione dall'esercizio, prima di continuare.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Potremmo anche invertire la disposizione dei componenti flex utilizzando i valori <code>row-reverse</code> o <code>column-reverse</code>. Sono da sperimentare!</p>
+</div>
+
+<h2 id="Effettuare_il_Wrapping">Effettuare il Wrapping</h2>
+
+<p>Il problema che sorge nel layout quando la larghezza o l'altezza vengono esplicitate è che il gruppo dei contenuti flexbox potrebbe eccedere il limite del contenitore, guastando il layout. Diamo un'occhiata all'esempio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>,di cui viene fornita la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">visione live</a>. Per eseguire le procedure mostrate da questo punto in poi, salvate una copia del file in locale.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Come vediamo i contenuti figli eccedono effettivamente il limite del loro contenitore. Una possibile soluzione consiste nell'aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:</p>
+
+<pre class="brush: css  notranslate">flex-wrap: wrap;</pre>
+
+<p>Proviamo anche ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("article")}}:</p>
+
+<pre class="brush: css  notranslate">flex: 200px;</pre>
+
+<p>Ricaricando possiamo notare il miglioramento che abbiamo ottenuto grazie queste modifiche.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">Adesso possiamo notare che si sono formate un certo numero di righe, ovviamente tante quante ne servono per tutti i contenuti flexbox: quando un contenuto eccede i limiti, scala alla riga successiva. L'impostazione <code>flex: 200px</code> dichiarata per gli articoli significa che ognuno di essi occuperà almeno 200px; questa proprietà verrà discussa con maggior dettaglio più avanti nell'articolo. Notiamo anche che ciascuno degli ultimi contenuti che occupano l'ultima riga è molto più largo in modo da riempirla completamente.</p>
+
+<p>Possiamo sperimentare ancora: innanzitutto assegnare alla proprietà {{cssxref("flex-direction")}} il valore <code>row-reverse</code>, così da ottenere un layout con numerose righe come il precedente in cui però i contenuti si schierano a partire dall'angolo opposto della finestra del browser e fluiscono in maniera inversa.</p>
+
+<h2 id="La_forma_contratta_flex-flow">La forma contratta flex-flow</h2>
+
+<p>Occorre notare a questo punto che esiste una forma contratta, {{cssxref("flex-flow")}, per le proprietà {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} — }. É possibile per esempio sostituire</p>
+
+<pre class="brush: css  notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>con</p>
+
+<pre class="brush: css  notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Dimensionamento_flessibile_dei_componenti_flex">Dimensionamento flessibile dei componenti flex</h2>
+
+<p>Ora torniamo al primo esempio per capire come determinare la proporzione che occupa ogni componente flex nello spazio rispetto ai componenti suoi pari. Riapriamo il file locale <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, oppure, come punto di partenza, prendiamo il nuovo file <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> di cui viene fornita anche la<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html"> versione live</a>.</p>
+
+<p>Cominciamo aggiungendo la seguente regola al termine del nostro CSS:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Si indica in questo modo un valore proporzionale, privo di unità di misura, che determina lo spazio che occupa ogni componente flex rispetto agli altri. In questo caso tutti gli elementi {{htmlelement("article")}} hanno valore 1, il che significa, al netto di spaziature interne (padding) ed esterne (margin), che lo spazio verrà equamente ripartito tra tutti i componenti. Questo è un valore relativo a tutti i componenti flex del medesimo gruppo, perciò, se invece di 1 viene scritto un altro valore, 400000 ad esempio, otteniamo lo stesso risultato.</p>
+
+<p>Di seguito scriviamo questa regola:</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Si noti, dopo aver ricaricando la pagina, che il terzo componente {{htmlelement("article")}} riempie il doppio dello spazio occupato da ciascuno degli altri due. Lo spazio totale è ora diviso in quattro, cioè una spaziatura per il primo elemento, una per il secondo e due per il terzo (1+1+2=4), quindi il primo e il secondo occupano un quarto (1/4) di spazio ciascuno mentre il terzo ne occupa due quarti (2/4) ovvero la metà.</p>
+
+<p>Si può anche specificare una misura reale minima al di sotto del quale non è possibile andare. Correggiamo le regole degli articoli in questo modo:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>Con queste regole affermiamo fondamentalmente quanto segue: "Ogni componente flex occupa almeno 200px nello spazio a disposizione, mentre lo spazio che rimane viene occupato rispettando le unità proporzionali." Ricaricando la pagina possiamo notare la differenza nella ripartizione delle spaziature.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>La potenza di flexbox risiede nella sua flessibilità ovvero nella responsività con cui gestisce il layout: se ridimensioniamo la finestra del browser oppure inseriamo un nuovo elemento {{htmlelement("article")}} il layout continuerà a funzionare bene.</p>
+
+<h2 id="flex_forma_contratta_al_posto_della_forma_estesa">flex: forma contratta al posto della forma estesa</h2>
+
+<p>La proprietà  {{cssxref("flex")}} rappresenta la forma contratta delle seguenti tre proprietà::</p>
+
+<ul>
+ <li>la proporzione, priva di unità di misura reale, di cui abbiamo già discusso, che può essere individualmente espressa utilizzando la forma estesa {{cssxref("flex-grow")}}.</li>
+ <li>Una seconda unità proporzionale, {{cssxref("flex-shrink")}} che gioca un ruolo importante nel momento in cui i componenti flex stanno per oltrepassare i limiti del contenitore, specificando la misura in cui questi componenti possono restringersi in modo da non sbordare. Questa però è una proprietà piuttosto avanzata di flexbox che eviteremo di approfondire in questo articolo.</li>
+ <li>Una spaziatura reale minima di cui abbiamo già parlato, che può essere individualmente espressa utilizzando la forma estesa flex-basis {{cssxref("flex-basis")}}.</li>
+</ul>
+
+<p>È consigliabile non utilizzare le forme estese della proprietà flex, a meno che non si possa fare altrimenti, come per esempio sostituire un valore stabilito in precedenza, perché costringono a scrivere una maggior quantità di codice che può risultare in qualche modo confusionario.</p>
+
+<h2 id="Allineamento_orizzontale_e_verticale">Allineamento orizzontale e verticale</h2>
+
+<p>Con flexbox è possibile allineare i componenti flex lungo l'asse principale (main axis) o lungo l'asse traverso (cross axis). Facciamo alcune prove con la nuova pagina di esempio, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> di cui è presente anche la <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">versione live</a> , per mostrare come creare una bottoniera, o barra degli strumenti, semplice e flessibile.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>Apriamo il codice in locale.</p>
+
+<p>Aggiungiamo al termine del file CSS la regola seguente:</p>
+
+<pre class="brush: css  notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p>
+
+<p>Dopo aver ricaricato la pagina, i bottoni vengono ben centrati, sia orizzontalmente che verticalmente. Abbiamo ottenuto questo risultato operando con due nuove proprietà:</p>
+
+<p>Attraverso {{cssxref("align-items")}} controlliamo l'allineamento rispetto all'asse traverso (cross axis).</p>
+
+<ul>
+ <li>Il valore predefinito è <code>stretch</code>, che allunga o comprime tutti i componenti flex affinché riempiano lo spazio del loro contenitore lungo l’asse traverso (cross axis). In un contenitore che non ha una misura fissa lungo l’asse traverso, tutti quanti suoi componenti assumono la lunghezza del maggiore fra di loro, perciò nel primo esempio dell'articolo tutti i componenti risultano della stessa altezza senza doverlo specificare.</li>
+ <li>In questo esempio viene invece specificato il valore <code>center</code>, per cui ogni componente si dimensiona in funzione del contenuto che possiede, in base a questa dimensione viene quindi centrato lungo l’asse traverso. Questa è la ragione per cui, in questo esempio, i bottoni che sono centrati in verticale.</li>
+ <li>Altri valori disponibili sono <code>flex-start</code> e <code>flex-end</code>, che allineano i componenti rispettivamente all’inizio o al temine dell’asse traverso. Per i dettagli vai {{cssxref("align-items")}}.</li>
+</ul>
+
+<p>É possibile sostituire l'impostazione data da align-items {{cssxref("align-items")}} , utilizzando la proprietà {{cssxref("align-self")}} di ogni singolo componente figlio. Ad esempio se proviamo ad aggiungere la seguente regola:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p>
+
+<p>Dopo aver verificato l’effetto, possiamo cancellare questa regola per ritornare alla situazione precedente.</p>
+
+<p>Attraverso {{cssxref("justify-content")}} controlliamo il tipo di schieramento dei componenti flex lungo l'asse principale (main axis).</p>
+
+<ul>
+ <li>Il valore predefinito è <code>flex-start</code>, per cui il gruppo dei componenti si posiziona all'inizio dell'asse principale.</li>
+ <li>Con <code>flex-end</code>, il gruppo si posiziona al termine.</li>
+ <li>Con <code>center </code>o altrimenti <code>justify-content</code>, l'allineamento parte dal centro dell'asse principale.</li>
+ <li>Con <code>space-around</code>, che è il valore utilizzato nell'esempio, i componenti si distribuiscono equamente lungo l'asse principale; inoltre viene creato un margine all'inizio e al termine dell'asse.</li>
+ <li>Con <code>space-between</code> impostiamo una situazione molto simile a <code>space-around</code>, eccettuati i margini alle estremità che non vengono creati.</li>
+</ul>
+
+<p>É consigliabile sperimentare le proprietà con valori suddetti prima di continuare a leggere l'articolo.</p>
+
+<h2 id="Ordinare_i_componenti_flex">Ordinare i componenti flex</h2>
+
+<p>Con flexbox è possibile cambiare l'ordine dei componenti senza intervenire manualmente nel sorgente HTML. Questa opportunità non esisteva con le metodologie di layout precedenti.</p>
+
+<p>Proviamo ad aggiungere al CSS una nuova semplice regola:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Una volta ricaricato notiamo che il bottone con label "Sorriso" si è spostato al termine dell'asse principale. Vediamo in dettaglio cosa è successo:</p>
+
+<ul>
+ <li>Il valore predefinito della proprietà {{cssxref("order")}} di tutti i componenti flex è 0.</li>
+ <li>I componenti flex che hanno un valore di ordine maggiore compaiono dopo a quelli con un ordine minore.</li>
+ <li>I componenti flex che hanno lo stesso valore compaiono nello stesso ordine del sorgente HTML. Poniamo ad esempio di avere quattro componenti il cui corrispettivo valore è 2, 1, 1 e 0; il loro ordine di apparizione risulterà questo: all'inizio il quarto, poi il secondo, poi il terzo e al termine il primo.</li>
+ <li>Il terzo appare dopo il secondo perché hanno lo stesso valore order, dunque viene rispettata la successione con cui vengono definiti nel sorgente.</li>
+</ul>
+
+<p>Se impostiamo un valore negativo di order, il componente compare prima di quelli con valore 0. Proviamo ora ad applicare la regola impostando per esempio l'ordine del bottone "Imbarazzo":</p>
+
+<pre class="brush: css  notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Flex_box_annidati">Flex box annidati</h2>
+
+<p>Con flexbox possiamo creare layout piuttosto complessi; è del tutto lecito impostare un componente flex in modo che contenga a sua volta componenti annidati flex che vengono visualizzati come flex box. Diamo un'occhiata a <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">see it live also</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>La struttura HTML è abbastanza semplice, l'elemento {{htmlelement("section")}} contiene gli elementi figli {{htmlelement("article")}}. , il terzo di questi contiene tre {{htmlelement("div")}} :</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Ora guardiamo il codice che ha creato il layout.</p>
+
+<p>Innanzitutto, impostiamo i figli di {{htmlelement("section")}} affinché diventino flex box.</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Quindi valorizziamo alcune proprietà flex all'interno degli stessi {{htmlelement("article")}}. Si noti in particolare la seconda regola, in cui si impone che il terzo elemento {{htmlelement("article")}} abbia a sua volta componenti innestati flex, i quali però devono essere incolonnati.</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>Quindi, impostiamo per il primo &lt;div&gt; la proprietà flex a 1 100px; in modo che abbia un'altezza reale di almeno 100px; la proprietà successiva stabilisce che anche gli elementi figli, cioè i (the {{htmlelement("button")}}, divengano componenti flex; tali elementi si dispongono in riga e allineati a partire dal centro dello spazio disponibile mantenendo i margini alle estremità, proprio come l'esempio del bottone visto in precedenza.</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Infine viene definita una regola per la dimensione dei bottoni., ma la parte più interessante è la proprietà flex che ha valore 1 auto; questa impostazione genera un comportamento peculiare che notiamo quando restringiamo la finestra del browser: i bottoni cercano di occupare il massimo dello spazio disponibile, si schierano uno accanto all'altro finché c'è spazio disponibile, e poi scalano alla riga seguente.</p>
+
+<pre class="brush: css  notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Compatibilità_tra_browser">Compatibilità tra browser</h2>
+
+<p>Gran parte delle ultime versioni dei browser supportano flexbox, cioè Firefox, Chrome, Opera, Microsoft Edge, IE 11, le versioni recenti di Android/iOS ecc. Occorre tuttavia considerare anche la presenza delle versioni antiquate dei browser che non supportano flexbox oppure lo fanno solo parzialmente.</p>
+
+<p>Il problema non incide granché quando ne studiamo e ne proviamo le funzionalità, tuttavia quando si cerca di utilizzare flexbox per creare un sito web reale dobbiamo controllare e assicurarci che l'esperienza utente sia comunque accettabile in quanti più browser possibile.</p>
+
+<p>Applicare flexbox è un po' più complicato di altre funzionalità CSS. Se per esempio il browser non supporta l'ombreggiatura (drop shadow) è facile che l'usabilità del sito rimanga comunque valida, se invece manca il supporto a flexbox è probabile che il layout della pagina si disintegri rendendola inutilizzabile.</p>
+
+<p>Le strategie per ovviare ai problemi di compatibilità tra browser vengono affrontate nel modulo <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a>.</p>
+
+<h2 id="Metti_alla_prova_le_tue_capacità!">Metti alla prova le tue capacità!</h2>
+
+<p>Questo articolo è denso di informazioni, ma riesci a ricordare quelle più importanti?</p>
+
+<p>Prima di continuare possiamo verificare la nostra comprensione alla pagina <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>In conclusione dell'articolo sulle basi di flexbox speriamo di aver suscitato interesse e un buon punto di partenza nel nostro percorso di apprendimento. Nel prossimo articolo ci occupiamo di un altro importante aspetto del layout CSS: le Griglie CSS.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
+</div>
diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..31a85170fa
--- /dev/null
+++ b/files/it/learn/css/css_layout/index.html
@@ -0,0 +1,78 @@
+---
+title: Layout CSS
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - Positioning
+  - alignment
+  - flexbox
+  - float
+  - table
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">A questo punto abbiamo già visto i fondamenti di CSS, come assegnare uno stile a un testo e come modificare lo stile e l'impostazione dei riquadri nei quali risiede il contenuto. Ora impareremo come posizionare i riquadri rispetto all'area di visualizzazione e l'uno rispetto all'altro. Abbiamo già appreso i prerequisiti necessari per approfondire il layout CSS, analizzare le diverse impostazioni di display, i moderni strumenti di layout quali flexbox, griglia CSS, posizionamento e alcune tecniche legacy che potrebbe comunque tornare utile conoscere.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Per affrontare questo modulo è necessario:</p>
+
+<ol>
+ <li>Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [<a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>].</li>
+ <li>Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].</li>
+ <li>Comprendere come assegnare uno stile ai riquadri [<a href="it/docs/Learn/CSS/Building_blocks">Styling boxes</a>].</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo <a href="http://jsbin.com/">JSBin</a> oppure <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<p>I seguenti articoli insegnano a utilizzare gli strumenti fondamentali di layout e le tecniche disponibili nel linguaggio CSS. Alla fine delle lezioni è previsto un test di valutazione per verificare la propria comprensione dei metodi di layout applicandoli a una pagina web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduzione ai layout CSS [Introduction to CSS layout]</a></dt>
+ <dd>Questo articolo riassume alcune delle caratteristiche dei layout CSS già incontrate nei moduli precedenti (ad esempio i diversi valori di {{cssxref("display")}}) e introduce diversi concetti che affronteremo in questo modulo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flusso normale [Normal flow]</a></dt>
+ <dd>Gli elementi di una pagina web si dispongono secondo un <em>flusso normale</em>, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox [Flexbox]</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox [Flexbox]</a> è un metodo di layout monodimensionale per disporre gli elementi in righe e colonne. Gli elementi si espandono per riempire lo spazio extra e si contraggono per adattarsi a uno spazio più ridotto. Questo articolo ne spiega i concetti fondamentali. Dopo aver studiato la guida potrai testare le tue competenze su flexbox <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">[test your flexbox skills]</a> per accertarti di averlo compreso prima di passare all'argomento successivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Griglie [Grids]</a></dt>
+ <dd>La Griglia layout CSS è un sistema bidimensionale di layout per il Web. Permette di disporre i contenuti in righe e colonne, inoltre offre diverse funzionalità per semplificare la costruzione di layout complessi. Questo articolo contiene tutte le informazioni necessarie per iniziare a costruire il layout della pagina, quindi mettere alla prova le proprie abilità sulla griglia <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">[test your grid skills]</a> prima di passare all'argomento successivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elementi float [Floats]</a></dt>
+ <dd>Originariamente usata per inserire le immagini all'interno di blocchi di testo, la proprietà {{cssxref("float")}} è diventata uno dei più comuni strumenti per creare layout multicolonna nelle pagine web. Con la comparsa di Flexbox e Griglia è tornata alla sua finalità originale, come spiegato in questo articolo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posizionamento [Positioning]</a></dt>
+ <dd>Il posizionamento permette di isolare gli elementi dal normale flusso della pagina assegnando loro un comportamento diverso, ad esempio sovrapporsi uno sull'altro o mantenere sempre la stessa posizione all'interno dell'area di visualizzazione del browser. Questo articolo spiega i differenti valori di {{cssxref("position")}} e come utilizzarli.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Layout multicolonna [Multiple-column layout]</a></dt>
+ <dd>Le specifiche del layout multicolonna offrono un metodo per strutturare il contenuto in colonne come sulla pagina di un quotidiano. L'articolo spiega come sfruttare questa caratteristica.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Design reattivo [Responsive design]</a></dt>
+ <dd>Con la comparsa di dispositivi di varie dimensioni in grado di accedere al Web, è nato il concetto di web design reattivo (o RWD, dall'inglese Responsive Web Design): un insieme di procedure che permettono alle pagine web di modificare il proprio layout e aspetto per adattarsi a diverse larghezze, risoluzioni, ecc. Si tratta di un'idea che ha cambiato il modo di progettare il Web multi-dispositivo e questo articolo aiuta a capire le principali tecniche necessarie a padroneggiarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guida per principianti alle media query [Beginner's guide to media queries]</a></dt>
+ <dd>Le <strong>media query CSS</strong> danno modo di applicare i fogli di stile CSS solo quando il browser e le condizioni del dispositivo corrispondono alle regole specificate, ad esempio "l'area di visualizzazione è più larga di 480 pixel". Le media query sono un elemento fondamentale del web design reattivo, poiché non solo permettono di stabilire layout differenti a seconda della grandezza dell'area di visualizzazione, ma anche di rilevare altre condizioni dell'ambiente in cui un sito viene riprodotto, ad esempio se l'utente usa un touchscreen o un mouse. In questa lezione impareremo innanzitutto la sintassi usata nelle media query e poi le applicheremo in un esempio reale che mostra come trasformare un design semplice in reattivo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">I metodi di layout legacy [Legacy layout methods]</a></dt>
+ <dd>Una caratteristica molto comune dei layout CSS sono i sistemi di griglia. Prima della Griglia Layout CSS cercavamo di realizzare l'impaginazione utilizzando elementi float o altre caratteristiche del layout. Il layout veniva concepito come un numero dato di colonne immaginarie (ad esempio 4, 6 o 12) all'interno delle quali inserire i contenuti. In questo articolo vedremo come funzionano questi metodi ormai obsoleti per capirne l'impostazione in caso dovessimo lavorare su progetti più datati.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporto per i browser più datati [Supporting older browsers]</a></dt>
+ <dd>
+ <p>In questo modulo consigliamo di usare Flexbox e Griglia quali principali metodi di progettazione. Va però considerato che alcuni utenti potrebbero visualizzare il nostro sito con browser più datati o che, semplicemente, non supportano i metodi da noi scelti. Bisogna sempre tenerne conto nel Web: man mano che nuove funzionalità vengono messe a punto, ciascun browser si concentra sull'implementarne alcune, a scapito di altre. Questo articolo spiega come usare le moderne tecniche del Web senza escludere chi utilizza tecnologia più datata.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]</a></dt>
+ <dd>Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.</dd>
+</dl>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Esempi pratici di posizionamento [Practical positioning examples]</a></dt>
+ <dd>Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.</dd>
+</dl>
diff --git a/files/it/learn/css/css_layout/introduction/index.html b/files/it/learn/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..3a3238e551
--- /dev/null
+++ b/files/it/learn/css/css_layout/introduction/index.html
@@ -0,0 +1,711 @@
+---
+title: Introduzione al layout CSS
+slug: Learn/CSS/CSS_layout/Introduction
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Questo articolo riassume alcune caratteristiche del CSS viste nei moduli precedenti, come ad esempio i diversi valori di {{cssxref("display")}}, e presenta alcuni concetti che verranno trattati nel corso di questo modulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Le basi di HTML (leggi <a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduzione a HTML</a>) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Offrire una panoramica sulle tecniche di CSS usate nei layout delle pagine web. Ogni tecnica viene approfondita negli articoli a seguire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le tecniche di CSS applicate al layout di pagina permettono di controllare il posizionamento degli elementi contenuti nella pagina web relativamente alla loro posizione predefinita nel flusso normale di layout, agli elementi contigui, al contenitore padre o all'area di visualizzazione/finestra principale. Le tecniche per il layout di pagina che approfondiremo in questo modulo sono:</p>
+
+<ul>
+ <li>Flusso normale</li>
+ <li>La proprietà {{cssxref("display")}}</li>
+ <li>Flexbox</li>
+ <li>Griglie</li>
+ <li>Elementi float</li>
+ <li>Posizionamento</li>
+ <li>Layout con tabelle</li>
+ <li>Layout multicolonna</li>
+</ul>
+
+<p>Ogni tecnica ha i propri casi d'uso, vantaggi e svantaggi. Nessuna di esse è concepita per funzionare in isolamento. Una volta compreso per quale scopo è stato progettato ciascun metodo, risulterà facile scegliere lo strumento di layout più adatto alle diverse esigenze.</p>
+
+<h2 id="Flusso_normale">Flusso normale</h2>
+
+<p>Per flusso normale si intende il layout predefinito di una pagina HTML, ovvero come viene visualizzata senza interventi da parte nostra. Ecco un breve esempio di codice HTML:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Amo il mio gatto.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Compra il cibo per gatti&lt;/li&gt;
+  &lt;li&gt;Esercitati&lt;/li&gt;
+  &lt;li&gt;Tira su di morale un amico&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Fine!&lt;/p&gt;</pre>
+
+<p>Secondo le impostazioni predefinite, il browser visualizza il codice in questo modo:</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>Notiamo come l'HTML venga visualizzato nell'esatto ordine in cui appare nel codice sorgente, con gli elementi incolonnati uno sotto l'altro: primo paragrafo, elenco non ordinato, secondo paragrafo.</p>
+
+<p>Gli elementi che compaiono uno sotto l'altro vengono definiti come elementi <em>blocco</em>, al contrario degli elementi <em>in linea</em>, che sono disposti uno accanto all'altro come le singole parole di un paragrafo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La direzione in cui si dispongono i contenuti di elementi blocco viene definita direzione blocco. La direzione blocco è verticale in lingue come l'inglese, che hanno una modalità di scrittura orizzontale. Al contrario, è orizzontale in lingue come il giapponese, che hanno una modalità di scrittura verticale. La corrispondente direzione in linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.</p>
+</div>
+
+<p>Nella maggior parte dei casi, il flusso normale è sufficiente a disporre gli elementi nella pagina come ci servono. Tuttavia, per ottenere layout più complessi, occorre modificare la disposizione predefinita grazie ad alcuni strumenti disponibili nel CSS. Partire da un codice HTML ben strutturato è importante, perché permette di ritoccare la disposizione predefinita degli elementi, invece di stravolgerla.</p>
+
+<p>I metodi per influenzare la disposizione degli elementi con il CSS sono i seguenti:</p>
+
+<ul>
+ <li><strong>La proprietà {{cssxref("display")}}</strong>: i valori standard come <code>block</code>, <code>inline</code> o <code>inline-block</code> possono mutare il comportamento degli elementi nel flusso normale, ad esempio far sì che un elemento blocco si comporti come un elemento in linea (per maggiori informazioni vedi Tipi di box CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>]). Esistono anche metodi che influiscono sull'intero layout, ridefinendo il posizionamento degli elementi figlio una volta che assegnamo all'elemento padre che li contiene determinati valori di <code>display</code>. Vedi, per esempio, Griglie CSS [<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a>] e Flexbox [<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>].</li>
+ <li><strong>Elementi float</strong>: applicando a {{cssxref("float")}} un valore come <code>left</code> è possibile affiancare altri elementi agli elementi blocco, proprio come le illustrazioni contornate da testo nei layout delle riviste cartacee.</li>
+ <li><strong>La proprietà {{cssxref("position")}}</strong>: permette un preciso posizionamento di elementi box all'interno di altri box. <code>static</code> è il valore predefinito nel flusso normale, ma applicando altri valori è possibile definire un comportamento differente, come ad esempio fissare il box in cima all'area di visualizzazione.</li>
+ <li><strong>Layout con tabelle</strong>: le caratteristiche utilizzate per lo stile di una tabella HTML possono essere riproposte su elementi non tabellari impostando <code>display: table</code> e altre proprietà associate.</li>
+ <li><strong>Layout multicolonna</strong>: le proprietà del Layout multicolonna [<a href="/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a>] possono distribuire in colonne il contenuto di un blocco, come nella pagina di un quotidiano cartaceo.</li>
+</ul>
+
+<h2 id="La_proprietà_display">La proprietà display</h2>
+
+<p>I modi principali per realizzare il layout di una pagina via CSS risiedono nei diversi valori della proprietà <code>display</code>. Questa proprietà permette di cambiare l'impostazione predefinita per la visualizzazione di un elemento. Nel flusso normale, tutti gli elementi hanno un valore <code>display</code> predefinito, che definisce il comportamento per cui sono stati progettati. Ad esempio, il fatto che i paragrafi di testo nelle lingue occidentali vengano visualizzati uno sotto l'altro è dovuto al loro stile predefinito <code>display: block</code>. Se all'interno di un paragrafo si inserisce un link in una porzione del testo, il link rimane allineato con il resto del testo invece di andare a capo poiché lo stile predefinito dell'elemento {{htmlelement("a")}} è <code>display: inline</code>.</p>
+
+<p>Il tipo di visualizzazione predefinito può essere modificato. Ad esempio, l'impostazione predefinita dell'elemento {{htmlelement("li")}} è <code>display: block</code>. Ciò significa che le voci dell'elenco nel documento vengono visualizzate una sotto l'altra, secondo l'impostazione occidentale. Se il valore di display viene modificato in <code>inline</code>, gli elementi dell'elenco verranno visualizzati uno accanto all'altro, come le parole di una frase. La possibilità di modificare il valore di <code>display</code> per tutti gli elementi significa che è possibile mantenere il loro significato semantico definito nell'HTML, indipendentemente dal modo in cui verranno visualizzati. Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento.</p>
+
+<p>Oltre alla possibilità di cambiare la presentazione dei componenti da <code>block</code> a <code>inline</code> e vice versa, si possono creare layout con metodi più complessi, iniziando proprio dall'impostazione del valore di <code>display</code>. Tuttavia, occorre solitamente abbinarlo ad altre proprietà per realizzare un layout complesso. I due valori principali quando parliamo di layout sono <code>display: flex</code> e <code>display: grid</code>.</p>
+
+<h2 id="Flexbox">Flexbox</h2>
+
+<p>Flexbox è l'abbreviazione di Modulo <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>, progettato per facilitare la creazione di layout monodimensionali degli elementi sia in riga che in colonna. Per utilizzare Flexbox, occorre impostare <code>display: flex</code> al padre degli elementi su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio.</p>
+
+<p>Il markup HTML sottostante presenta una classe <code>wrapper</code> associata a un elemento contenitore, nel quale sono presenti tre elementi {{htmlelement("div")}}. Secondo il loro valore predefinito, nel documento d'esempio che ha una direzione di scrittura occidentale, gli elementi dovrebbero essere visualizzati come elementi blocco, uno sotto l'altro.</p>
+
+<p>Tuttavia, una volta specificato <code>display: flex</code> sul padre, i tre componenti figlio si dispongono in colonna. Questo accade perché essi ora sono <em>componenti flex</em> e assumono il medesimo valore iniziale che Flexbox attribuisce loro attraverso il contenitore padre. In questo caso vengono presentati in riga perché il valore iniziale di {{cssxref("flex-direction")}} impostato dal padre è <code>row</code>. Si allungano tutti fino a raggiungere l'altezza del componente più alto perché il valore iniziale della proprietà {{cssxref("align-items")}} viene impostato a <code>stretch</code> dal padre. Quindi i componenti si distendono fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. Tutti i componenti si schierano al principio del contenitore, lasciando spazio libero alla fine della riga.</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Flexbox_Example_1">Flexbox Example 1</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Uno&lt;/div&gt;
+  &lt;div class="box2"&gt;Due&lt;/div&gt;
+  &lt;div class="box3"&gt;Tre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>Oltre alle suddette proprietà applicabili al contenitore flex, esistono anche proprietà che possono essere impostate sui componenti figlio. Tra le altre cose, queste proprietà possono cambiare il modo in cui i componenti si flettono, facendoli espandere o contrarre per adattarsi allo spazio disponibile.</p>
+
+<p>È possibile, per esempio, aggiungere la proprietà {{cssxref("flex")}} a tutti i componenti figlio, con valore <code>1</code>. Questo fa sì che tutti i componenti aumentino in dimensione sino a riempire il contenitore, invece di lasciare dello spazio vuoto alla fine. Se lo spazio aumenta, i componenti si allargano. Se lo spazio diminuisce, si contraggono. Inoltre, se viene aggiunto un nuovo elemento al markup, tutti i componenti diminuiscono la propria dimensione per far spazio al nuovo inserimento continuando a riempire la medesima area, qualsiasi essa sia.</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Due&lt;/div&gt;
+    &lt;div class="box3"&gt;Tre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Questa è solo una breve introduzione alle possibilità di Flexbox. Per approfondire l'argomento vai all'articolo <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
+</div>
+
+<h2 id="Griglia_layout">Griglia layout</h2>
+
+<p>Mentre Flexbox è stato progettato per il layout monodimensionale, la Griglia layout è stata progettata per essere bidimensionale, cioè per disporre gli elementi in righe e colonne.</p>
+
+<p>Per passare alla modalità Griglia layout occorre innanzitutto impostare un valore di display specifico, <code>display: grid</code>. L'esempio seguente usa un markup simile a quello visto negli esempi di flex: presenta un contenitore e alcuni elementi figlio. Oltre a usare <code>display: grid</code>, definiamo anche una regola per righe e colonne nell'elemento padre utilizzando rispettivamente le proprietà {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}. Definiamo tre colonne di <code>1fr</code> ciascuna e due righe di <code>100px</code>. Non occorre specificare alcuna regola per gli elementi figlio, che verranno inseriti nelle celle create dalla nostra griglia in maniera automatica.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Grid_example_1">Grid example 1</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Due&lt;/div&gt;
+    &lt;div class="box3"&gt;Tre&lt;/div&gt;
+    &lt;div class="box4"&gt;Quattro&lt;/div&gt;
+    &lt;div class="box5"&gt;Cinque&lt;/div&gt;
+    &lt;div class="box6"&gt;Sei&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>Una volta impostata la griglia, è possibile posizionarvi all'interno i componenti in maniera esplicita invece di affidarsi all'impostazione automatica come nell'esempio precedente. Nel secondo esempio qui sotto viene definita la stessa griglia, ma in questo caso definiamo delle regole anche per i componenti figlio. La linea iniziale e quella finale di ogni componente vengono impostate nelle proprietà {{cssxref("grid-column")}} e {{cssxref("grid-row")}}. Questo fa sì che i componenti seguano tracciati diversi.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Grid_example_2">Grid example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Due&lt;/div&gt;
+    &lt;div class="box3"&gt;Tre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Questi due esempi dimostrano solo una piccola parte delle potenzialità della Griglia layout; per scoprirne altre vedi l'articolo Griglia layout [<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>].</p>
+</div>
+
+<p>La parte restante di questa guida tratta di altri metodi di strutturazione, meno rilevanti per l'impostazione del layout principale della pagina, ma utili per operazioni specifiche. Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.</p>
+
+<h2 id="Elementi_float">Elementi float</h2>
+
+<p>Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. L'elemento viene spostato a sinistra o a destra e isolato dal flusso normale, il contenuto circostante scorre intorno a questo elemento.</p>
+
+<p>La proprietà {{cssxref("float")}} ha quattro possibili valori:</p>
+
+<ul>
+ <li><code>left</code>: sposta l'elemento a sinistra.</li>
+ <li><code>right</code>: sposta l'elemento a destra.</li>
+ <li><code>none</code>: non causa alcuno spostamento ed è il valore predefinito.</li>
+ <li><code>inherit</code>: "eredita" il valore della proprietà <code>float</code> dall'elemento padre.</li>
+</ul>
+
+<p>Nel seguente esempio, un elemento <code>&lt;div&gt;</code> viene spostato a sinistra e il suo {{cssxref("margin")}} impostato a destra per creare uno spazio tra il testo e l'elemento. In questo modo, il corpo del testo fluisce intorno al box. Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float.</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Floats_example">Floats example</h6>
+
+<pre class="brush: css notranslate">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Esempio semplice di float&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Gli elementi float vengono spiegati in maniera esauriente nell'articolo sulle proprietà <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float e clear</a>. Prima dell'esistenza di metodi come Flexbox e Griglia layout, gli elementi float venivano utilizzati anche come sistema per suddividere il layout in colonne. È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. Lo scopriremo nella lezione sui <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">metodi di layout legacy</a>.</p>
+</div>
+
+<h2 id="Tecniche_di_posizionamento">Tecniche di posizionamento</h2>
+
+<p>Il posizionamento permette di spostare un elemento dalla posizione che assumerebbe nel flusso normale a una nuova posizione. Il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare la posizione di un componente specifico.</p>
+
+<p>Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà {{cssxref("position")}}. Comprendere la tecnica del posizionamento permette anche di capire cos'è il flusso normale e come estromettere un componente da esso.</p>
+
+<p>I tipi di posizionamento che ci serve conoscere sono cinque:</p>
+
+<ul>
+ <li><strong>Posizionamento statico</strong>: è il valore preimpostato sugli elementi e significa semplicemente "inserisci l'elemento nella posizione stabilita dal flusso di layout del documento, nessuna istruzione speciale".</li>
+ <li><strong>Posizionamento relativo</strong>: permette di cambiare la posizione dell'elemento e spostarlo in relazione al flusso normale, come anche di sovrapporlo ad altri elementi nella pagina.</li>
+ <li><strong>Posizionamento assoluto</strong>: l'elemento viene completamente isolato dal flusso normale della pagina, come se si trovasse su un livello separato. Da lì è possibile fissarne la posizione ai margini dell'elemento <code>&lt;html&gt;</code> (o del suo elemento contenitore più prossimo). Questa caratteristica è utile per produrre effetti sul layout come i box a scheda, organizzati come un certo numero di schede disposte una sopra l'altra e mostrate o nascoste a comando. Un altro esempio sono i box di notifica, posti inizialmente al di fuori dello schermo, ma che possono essere richiamati nell'area di visualizzazione usando un pulsante di controllo.</li>
+ <li><strong>Posizionamento fisso</strong>: assomiglia molto al posizionamento assoluto, con la differenza che àncora l'elemento in relazione all'area di visualizzazione del browser invece che a un altro elemento. Viene usato per creare effetti quali i menu di navigazione che mantengono sempre la stessa posizione sul monitor, anche quando il resto del contenuto scorre.</li>
+ <li><strong>Posizionamento adesivo</strong>: è un nuovo tipo di posizionamento per cui un elemento si comporta come se fosse impostato su <code>position: static</code> sino a quando non raggiunge un determinato margine dell'area di visualizzazione, a quel punto muta il suo comportamento in <code>position: fixed</code>.</li>
+</ul>
+
+<h3 id="Semplice_esempio_di_posizionamento">Semplice esempio di posizionamento</h3>
+
+<p>Per familiarizzare con queste tecniche di layout, vediamo un paio di semplici esempi basati sullo stesso codice HTML:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento&lt;/h1&gt;
+
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p class="positioned"&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;</pre>
+
+<p>Il seguente CSS mostra lo stile preimpostato dell'HTML:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>L'output mostrato è il seguente:</p>
+
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
+
+<h3 id="Posizionamento_relativo">Posizionamento relativo</h3>
+
+<p>Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. Si potrebbe perciò realizzare lo spostamento di un'icona un po' più in basso per allinearla a un'etichetta testuale, aggiungendo la seguente istruzione:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>In questo caso, il secondo paragrafo ha un attributo {{cssxref("position")}} di valore <code>relative</code> che non produce alcun effetto di per sé. Quindi, aggiungiamo le proprietà {{cssxref("top")}} e {{cssxref("left")}}, che spostano l'elemento associato in basso e a destra. Questo passaggio potrebbe sembrare controintuitivo, ma basta figurarselo come se l'elemento subisse una spinta da sinistra e dall'alto che ne provocasse lo spostamento a destra e in basso.</p>
+
+<p>Aggiungendo questo codice, si ottiene il seguente risultato:</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Relative_positioning_example">Relative positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento relativo&lt;/h1&gt;
+
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p class="positioned"&gt;Elemento con posizionamento relativo&lt;/p&gt;
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="Posizionamento_assoluto">Posizionamento assoluto</h3>
+
+<p>Il posizionamento assoluto serve a rimuovere un elemento dal flusso normale e riposizionarlo stabilendo l'offset dai margini di un blocco contenitore.</p>
+
+<p>Riprendendo l'originale esempio senza posizionamento, implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>In questo caso, assegniamo <code>absolute</code> alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}. Il codice però produce il risultato seguente.</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento assoluto&lt;/h1&gt;
+
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;
+&lt;p class="positioned"&gt;Elemento con posizionamento assoluto.&lt;/p&gt;
+&lt;p&gt;Elemento blocco essenziale.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>La differenza si nota! L'elemento a cui viene assegnato il posizionamento è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. Le proprietà {{cssxref("top")}} e {{cssxref("left")}} applicate all'elemento producono un effetto diverso a seconda del tipo di posizionamento, se assoluto oppure relativo. In questo caso, l'offset viene calcolato rispetto al lato superiore e sinistro della pagina. L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">posizionamento</a>.</p>
+
+<h3 id="Posizionamento_fisso">Posizionamento fisso</h3>
+
+<p>Il posizionamento fisso estrae l'elemento a cui è applicato dal flusso del documento allo stesso modo del posizionamento assoluto. Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. Poiché il componente rimane fisso rispetto all'area di visualizzazione, siamo in grado di costruire componenti come un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante.</p>
+
+<p>Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola <code>position: fixed</code>.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento fisso&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fisso&lt;/div&gt;
+
+&lt;p&gt;Paragrafo 1.&lt;/p&gt;
+&lt;p&gt;Paragrafo 2.&lt;/p&gt;
+&lt;p&gt;Paragrafo 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento fisso&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fisso&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Posizionamento_adesivo">Posizionamento adesivo</h3>
+
+<p>L'ultimo tipo di posizionamento a nostra disposizione è il posizionamento adesivo. Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola <code>position: sticky</code> scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in <code>position: fixed</code>.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posizionamento adesivo&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Adesivo&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: per saperne di più sul posizionamento, vedi l'articolo Posizionamento [<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>].</p>
+</div>
+
+<h2 id="Layout_con_tabelle">Layout con tabelle</h2>
+
+<p>La tabelle HTML sono appropriate per rendere i dati tabulari. Tuttavia, molti anni fa, prima che i vari browser supportassero i più elementari CSS in maniera affidabile, gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. Questo approccio funzionava, ma presentava molti problemi: i layout basati su tabella non erano reattivi, generavano un markup molto pesante, creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader).</p>
+
+<p>Il modo in cui una tabella appare nella pagina web si deve a un'impostazione di proprietà CSS che ne definisce il layout. È possibile utilizzare queste proprietà anche per posizionare elementi diversi dalle tabelle. Talvolta, questo utilizzo viene definito come “tabelle CSS”.</p>
+
+<p>Di seguito viene mostrato un esempio di questo uso. Tuttavia, i layout realizzati con tabelle CSS dovrebbero ormai essere considerati un metodo legacy, riservato a situazioni in cui occorre garantire la compatibilità con browser datati, che non supportano Flexbox e Griglia.</p>
+
+<p>Diamo un'occhiata all'esempio. Innanzitutto vi sono alcuni semplici markup che generano il modulo HTML. Ogni elemento HTML ha un'etichetta, in più è presente un paragrafo contenente una didascalia. Tutti i campi di input accoppiati alle etichette vengono inseriti in {{htmlelement("div")}} al fine di produrre il layout.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Prima di tutto, dichiara il tuo nome e la tua età.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;Nome:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Cognome:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Età:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Segue il CSS dell'esempio. Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà {{cssxref("display")}}. Gli elementi {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}} e {{htmlelement("input")}} vengono rispettivamente impostati come una tabella, righe di tabella e celle di tabella. Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. Rimane solo da regolare la dimensione, i margini ecc. per far apparire l'insieme più gradevole.</p>
+
+<p>Si noti che il paragrafo contenete la didascalia è stato impostato con la regola <code>display: table-caption</code>, che determina un comportamento simile a {{htmlelement("caption")}} all'interno di una tabella. Inoltre, per motivi estetici, ha l'attributo <code>caption-side: bottom;</code>. In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <code>&lt;input&gt;</code>.</p>
+
+<p>Ciò consente una notevole flessibilità.</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>Otteniamo il seguente risultato:</p>
+
+<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>
+
+<p>Si veda anche l'esempio dal vivo <strong>[TODO]</strong> e il codice sorgente [<strong>TODO IT</strong> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a>]</p>
+
+<p>You can also see this example live at <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a> too.)</p>
+
+<h2 id="Layout_multicolonna">Layout multicolonna</h2>
+
+<p>Il modulo di layout multicolonna permette di strutturare il contenuto in colonne, in maniera simile al testo di un quotidiano cartaceo. Il layout a colonne non è una visualizzazione ottimale nei siti web, in quanto costringe chi legge a scorrere continuamente su e giù per la pagina. Tuttavia, in alcuni casi, suddividere il contenuto in colonne si rivela utile.</p>
+
+<p>Il blocco si può trasformare in un contenitore multicolonna grazie alla proprietà {{cssxref("column-count")}}, che indica al browser il numero di colonne desiderate, oppure alla proprietà {{cssxref("column-width")}}, che specifica la larghezza delle colonne (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).</p>
+
+<p>Nel seguente esempio, un elemento <code>&lt;div&gt;</code> con classe <code>container</code> contiene un blocco di codice HTML.</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;h1&gt;Layout multi-colonna&lt;/h1&gt;
+
+    &lt;p&gt;Paragrafo 1.&lt;/p&gt;
+    &lt;p&gt;Paragrafo 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>La proprietà <code>column-width</code> con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Multicol_example">Multicol example</h6>
+
+<pre class="brush: html notranslate">    &lt;div class="container"&gt;
+        &lt;h1&gt;Layout multi-colonna&lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;
+        </pre>
+
+<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css notranslate">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. Continua la lettura per approfondire ogni singolo aspetto di questa tecnologia!</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="it/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/it/learn/css/css_layout/normal_flow/index.html b/files/it/learn/css/css_layout/normal_flow/index.html
new file mode 100644
index 0000000000..01e197ad76
--- /dev/null
+++ b/files/it/learn/css/css_layout/normal_flow/index.html
@@ -0,0 +1,108 @@
+---
+title: Flusso normale
+slug: Learn/CSS/CSS_layout/Normal_Flow
+tags:
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+  - float
+  - grid
+  - normal flow
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">Questo articolo illustra il flusso normale ovvero il modo in cui si dispongono gli elementi che formano una pagina web in maniera spontanea, senza manipolazioni.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Le basi di HTML (leggi Introduzione a HTML [<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>]) e nozioni sul funzionamento del CSS (leggi Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].)</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Comprendere come i browser predispongono il layout delle pagine web prima di intervenire su di esso applicando le regole di stile CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Come specificato nella lezione precedente, che introduceva al layout CSS, gli elementi di una pagina web si dispongono secondo il flusso normale, a meno che non vengano applicate alcune regole CSS che ne mutano il comportamento.<br>
+ Come premesso, è possibile cambiare il comportamento degli elementi adattando la loro posizione all'interno del flusso oppure estrapolandoli da esso.<br>
+ La maniera migliore per costruire una pagina web è iniziare impostando una struttura chiara e solida, adatta a essere visualizzata nel flusso normale.<br>
+ In questo modo ci assicuriamo che il contenuto sia leggibile, anche quando l'utente usa un browser molto limitato oppure un dispositivo che, tramite screen reader, enuncia il contenuto della pagina.<br>
+ Inoltre, poiché il flusso normale è stato progettato per rendere leggibile il documento, possiamo cominciare da questa impostazione per effettuare le modifiche in maniera armonica, senza forzature.</p>
+
+<p>Prima di esplorare in maniera approfondita i vari metodi di layout, ripassiamo alcune nozioni apprese nei moduli precedenti sul flusso normale del documento.</p>
+
+<h2 id="Come_si_dispongono_gli_elementi_con_impostazione_predefinita">Come si dispongono gli elementi con impostazione predefinita?</h2>
+
+<p>Prima di tutto, il riquadro di un determinato elemento varia a seconda del suo contenuto. Successivamente intervengono altri fattori quali la spaziatura interna, il bordo e il margine esterno, seguendo esattamente la logica del Box Model che abbiamo studiato in precedenza.</p>
+
+<p>Come da impostazione predefinita, la larghezza del contenuto di un elemento di tipo blocco [<a href="/en-US/docs/Web/HTML/Block-level_elements">block level element</a>] copre il 100% della larghezza dell'elemento padre, mentre l'altezza dipende dall'altezza del suo contenuto. Invece, nel caso degli elementi in linea [<a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>], sia la larghezza che l'altezza dipendono dal contenuto. Non è possibile imporre una larghezza o un'altezza degli elementi in linea, perché essi si posizionano come contenuti fluidi all'interno di un elemento blocco. Se vogliamo stabilire le sue dimensioni, occorre usare <code>display:block</code> per fare in modo che assuma le proprietà di un elemento blocco (oppure <code>display: inline-block</code>, che presenta caratteristiche di entrambi gli stili).</p>
+
+<p>Il layout del flusso normale, lo abbiamo detto nell'introduzione al layout CSS, è il sistema impiegato dai browser per disporre gli elementi all'interno dell'area di visualizzazione. Come da impostazione predefinita, gli elementi di tipo blocco si dispongono secondo la direzione blocco, determinata dalla proprietà <a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a> dell'elemento padre (che assume valore <em>iniziale</em> horizontal-tb). Ciascun elemento occupa un'intera linea; inoltre è possibile inserire margini per separare i vari elementi. Nel caso di lingue come l'inglese, con la direzione di scrittura preimpostata da sinistra verso destra e dall’alto verso il basso, gli elementi blocco vengono disposti verticalmente dall'alto in basso.</p>
+
+<p>Gli elementi in linea si comportano diversamente: non occupano una nuova linea ciascuno, bensì si susseguono lungo la medesima linea e si allineano ai contenuti testuali adiacenti sino a riempire l'intera larghezza dell'elemento padre di tipo blocco. Quando non vi è più spazio, gli elementi vanno fluidamente a capo per occupare la linea successiva.</p>
+
+<p>Se due elementi adiacenti hanno margini contigui, il margine maggiore prevale su quello più esiguo che sparirà del tutto. Questo comportamento, già trattato negli articoli sui CCS di Mozilla, prende il nome di "margin collapsing" (compressione dei margini).</p>
+
+<p>Il basilare esempio di seguito illustra il comportamento del flusso normale:</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html notranslate">&lt;h1&gt;Flusso di base del documento&lt;/h1&gt;
+
+&lt;p&gt;Io sono un tipico elemento blocco. L'elemento blocco che viene dopo di me, occupa la linea orizzontale successiva&lt;/p&gt;
+
+&lt;p&gt;Da impostazione predefinita occupiamo il 100% della larghezza del nostro elemento padre, mentre l'altezza di ciascuno è determinata dal suo contenuto. Le nostre larghezza e altezza totali sono uguali a contenuto + margine interno + altezza/larghezza del bordo.&lt;/p&gt;
+
+&lt;p&gt;Siamo separati dai margini. A causa del "margin collapse", tra uno e l'altro di noi rimane un solo margine, il maggiore, mentre il minore si comprime.&lt;/p&gt;
+
+&lt;p&gt;Gli elementi in linea &lt;span&gt;come questo&lt;/span&gt; e &lt;span&gt;quest’altro&lt;/span&gt; si collocano entrambi sulla stessa linea e, spazio permettendo, sulla stessa linea dei nodi di testo adiacenti.
+Gli elementi in linea che eccedono la larghezza dell'elemento padre, &lt;span&gt; se possibile vanno a capo, continuando su una nuova linea, proprio come questo testo,&lt;/span&gt;, altrimenti si spostano direttamente sulla linea successiva proprio come la seguente immagine: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Ora che abbiamo compreso il flusso normale, cioè il meccanismo predefinito con cui un browser dispone gli elementi nella pagina, passiamo a studiare come cambiare l'impostazione predefinita di visualizzazione al fine di sviluppare il layout secondo la progettazione desiderata.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_questo_modulo">In questo modulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/it/learn/css/index.html b/files/it/learn/css/index.html
new file mode 100644
index 0000000000..9ffaa802c9
--- /dev/null
+++ b/files/it/learn/css/index.html
@@ -0,0 +1,65 @@
+---
+title: Impara a stilizzare HTML usando i CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - NeedsContent
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>I fogli di stile a cascata - o {{glossary("CSS")}} - sono la seconda tecnologia che dovresti iniziare a imparare dopo l' {{glossary("HTML")}}. Mentre l'HTML è usato per definire la struttura e la semantica del tuo contenuto, i CSS vengono utilizzati per modellarlo e disporlo graficamente. Per esempio puoi utilizzare il CSS per modificare il colore e la dimensione di un testo, animare certi elementi della pagina, aggiungere margini e bordi e molte altre casistiche.</div>
+
+<div></div>
+
+<div>Percorso di apprendimento</div>
+
+<div>Dovresti imparare prima i concetti base dell' HTML prima di cimentarti con i CSS. Ti consigliamo di leggere prima il modulo di introduzione <a href="/it/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.</div>
+
+<div>Con tale modulo potrai imparare:</div>
+
+<div></div>
+
+<ul>
+ <li>CSS, iniziando con il modulo <a href="it/docs/Learn/CSS/First_steps">Introduzione ai CSS</a></li>
+ <li>Una semantica <a href="/it/docs/Web/HTML/HTML5">HTML</a> più avanzata</li>
+ <li><a href="/it/docs/Web/JavaScript/Cos%C3%A8_JavaScript">Javascript</a>, e come usarlo per aggiungere funzionalità dinamiche alle pagine web</li>
+</ul>
+
+<p>Una volta che avrai compreso i fondamenti dell'HTML, ti consigliamo di imparare HTML e CSS contemporaneamente. Questo perchè l'HTML è molto più interessante e più divertente da imparare quando applichi anche i CSS, e non puoi imparare veramente i CSS senza conoscere l'HTML.</p>
+
+<p>Prima di iniziare questi argomenti, dovresti avere una certa familiarità nell'uso dei computer e nella navigazione sul web. Dovresti avere un ambiente di lavoro di base impostato secondo i dettagli forniti in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a>, e sapere come creare e gestire file, come esposto in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gestire i file</a> — entrambi fanno parte della nostra guida completa per principianti <a href="/en-US/docs/Learn/Getting_started_with_the_web">Primi passi con il web</a>.</p>
+
+<p>Ti raccomandiamo di completare con <a href="/en-US/docs/Learn/Getting_started_with_the_web">Primi passi con il web</a> prima di continuare con questo argomento. Questo non è assolutamente indispensabile in quanto molti argomenti affrontati nell'articolo sulle basi del CSS sono anche affrontati nella nostra <a href="it/docs/Learn/CSS/First_steps">Introduzione ai CSS</a>, anche se in dettaglio molto maggiore.</p>
+
+<h2 id="Moduli">Moduli</h2>
+
+<p>Questo argomento contiene i seguenti moduli, suggeriti in ordine di lettura. Dovresti iniziare con il primo modulo.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduzione al CSS</a></dt>
+ <dd>Questo modulo ti introdurrà alle basi di come funzionano i CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS ad HTML, come specificare lunghezza, colore ed altri elementi in CSS, ereditarietà e cascata, basi del box model ed il debug di CSS.</dd>
+ <dt><a href="/it/docs/Learn/CSS/Styling_text">Styling text</a></dt>
+ <dd>Guardiamo ai fondamenti di formattazione del testo, inclusa l'impostazione del carattere, grassetto e corsivo, la spaziatura di lettere e l'interlinea, ombreggiatura ed altre caratteristiche del testo. Concludiamo il modulo guardando a come applicare un carattere personalizzato alla tua pagina e stilizzando liste e collegamenti.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
+ <dd>Subito dopo diamo un occhio a come stilizzare i contenitori, uno dei passi fondamentali verso la creazione di una pagina web. In questo modulo riepiloghiamo il modello dei contenitori per poi affrontare il controllo della disposizione degli elementi impostando riempimento, bordi e margini, impostando colori di sfondo, immagini ed altre caratteristiche come ombre e filtri sui contenitori.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>A questo punto abbiamo già esaminato i fondamenti dei CSS, come modellare il testo e come modellare e manipolare le caselle in cui si trovano i tuoi contenuti. Ora è il momento di vedere come posizionare le tue box nel posto giusto rispetto al viewport e tra di loro. Abbiamo coperto i prerequisiti necessari in modo che ora possiamo immergerci in profondità nel layout CSS, esaminando diverse impostazioni di visualizzazione, metodi di layout tradizionali che coinvolgono float e posizionamento e nuovi strumenti di layout fangled come flexbox.</dd>
+</dl>
+
+<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2>
+
+
+
+<p>Usare CSS per risolvere problemi comuni fornisce collegamenti a sezioni di contenuto che spiegano come utilizzare CSS per risolvere problemi molto comuni durante la creazione di una pagina web: Styling Box.</p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS su MDN</a></dt>
+ <dd>Il punto d'ingresso principale per la documentazione CSS su MDN, dove troverai documentazione di riferimento dettagliata per tutte le funzionalità del linguaggio CSS. Vuoi conoscere tutti i valori che una proprietà può assumere? Questo è un buon posto dove andare.</dd>
+</dl>
diff --git a/files/it/learn/css/styling_text/definire_stili_link/index.html b/files/it/learn/css/styling_text/definire_stili_link/index.html
new file mode 100644
index 0000000000..b6bdc7a6fa
--- /dev/null
+++ b/files/it/learn/css/styling_text/definire_stili_link/index.html
@@ -0,0 +1,438 @@
+---
+title: Definire gli stili dei link
+slug: Learn/CSS/Styling_text/Definire_stili_link
+translation_of: Learn/CSS/Styling_text/Styling_links
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">Quando si vogliono assegnare degli stili ai <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">link</a>, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenza informatica di base, elementi di HTML (leggi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), elementi di CSS (leggi <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fondamenti di testo e font con CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Obbiettivo:</th>
+   <td>Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Uno_sguardo_ai_link">Uno sguardo ai link</h2>
+
+<p>Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le <em>best practices</em> viste in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creare gli hyperlink</a>. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le <em>best practices</em> per la definizione degli stili dei link.</p>
+
+<h3 id="Stati_dei_link">Stati dei link</h3>
+
+<p>La prima cosa da capire è il concetto di <em>stato dei link</em> — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">pseudo-class</a>i:</p>
+
+<ul>
+ <li><strong>Link (unvisited)</strong>: è lo stato predefinito in cui il link risiede, quando non è in un altro stato. A questo stato può essere attribuito specificatamente uno stile utilizzando la pseudo-classe {{cssxref(":link")}}.</li>
+ <li><strong>Visited</strong>: stato del link quando è già stato visitato (esiste nella storia del browser), si può attribuire la pseudo-classe {{cssxref(":visited")}}.</li>
+ <li><strong>Hover</strong>: stato del link quando si passa il mouse sopra di esso, si può attribuire la pseudo-classe {{cssxref(":hover")}}.</li>
+ <li><strong>Focus</strong>: stato del link quando è focalizzato (ad esempio se ci si posiziona tramite la tastiera usando il tasto <kbd>Tab</kbd> o simili, oppure via programma usando {{domxref("HTMLElement.focus()")}}) — a questo si può attribuire la pseudo-classe {{cssxref(":focus")}}.</li>
+ <li><strong>Active</strong>: stato del link quando è attivato (ad esempio cliccandoci sopra), si può attribuire la pseudo-classe {{cssxref(":active")}}.</li>
+</ul>
+
+<h3 id="Stili_predefiniti">Stili predefiniti</h3>
+
+<p>L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="#"&gt;A simple link&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">p {
+  font-size: 2rem;
+  text-align: center;
+}</pre>
+
+<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli <code>#</code> (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il <code>#</code> (cancelletto) invece si connette esclusivamente alla pagina corrente.</p>
+</div>
+
+<p>Quando esplorerete gli stili predefiniti, si noteranno alcune cose:</p>
+
+<ul>
+ <li>I link sono sottolineati.</li>
+ <li>I link non visitati sono blu.</li>
+ <li>I link visitati sono viola.</li>
+ <li>Passando il mouse sopra un link, il puntatore si trasforma in una manina.</li>
+ <li>I link con focus attivo sono contornati — dovresti essere in grado di attivare il focus sui link della pagina utilizzando il tasto Tab (su Mac, occorre abilitare l'opzione <em>Full Keyboard Access: All controls</em>premendo <kbd>Ctrl</kbd> + <kbd>F7</kbd>).</li>
+ <li>I link attivi sono rossi (provare a tenere premuto il mouse sul link quando vi si clicca sopra).</li>
+</ul>
+
+<p>E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:</p>
+
+<ul>
+ <li>Utilizzare la sottolineatura solo per i link, e non per altri elementi. Se non si vuole usare la sottolineatura per i link, occorrerebbe evidenziarli in qualche altro modo.</li>
+ <li>Far reagire i link quando vi si passa il mouse sopra o li si evidenzia con il focus, ed anche in un modo leggermente diverso quando si attivano.</li>
+</ul>
+
+<p>Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:</p>
+
+<ul>
+ <li>{{cssxref("color")}} per il colore del testo.</li>
+ <li>{{cssxref("cursor")}} per lo stile del puntatore del mouse — è consigliabile non disattivare questo stile, a meno che non si abbia una buona ragione.</li>
+ <li>{{cssxref("outline")}} per l'outline del testo (l'outline è simile al bordo, la sola differenza è che il bordo occupa spazio nel riquadro mentre l'outline no; esso si colloca esternamente rispetto al background). L'outline è considerato un valido aiuto alla accessibilità, pertanto occorre fare una attenta valutazione prima di disattivarlo; si dovrebbero almeno raddoppiare gli stili dati sia per lo stato <em>hover</em>, che  per lo stato <em>focus</em>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !</p>
+</div>
+
+<h3 id="Definiamo_qualche_stile">Definiamo qualche stile</h3>
+
+<p>Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.</p>
+
+<p>Per cominciare, scriviamo il nostro set di stili vuoto:</p>
+
+<pre class="brush: css">a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}</pre>
+
+<p>Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, <em><strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te</em>.</p>
+
+<p>Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:</p>
+
+<pre class="brush: css">body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}</pre>
+
+<p>Forniamo anche il seguente esempio HTML a cui applicare il CSS:</p>
+
+<pre class="brush: html">&lt;p&gt;There are several browsers available, such as &lt;a href="#"&gt;Mozilla
+Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Mettendoli insieme il risultato sarà questo:</p>
+
+<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p>
+
+<p>Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:</p>
+
+<ul>
+ <li>Le prime due regole non sono interessanti per la discussione.</li>
+ <li>La terza regola usa il selettore <code>a</code>  per sbarazzarsi della sottolineatura del testo e dell'outline per il focus (che comunque variano a seconda dei browser) , ed aggiunge una piccola quantità di <em>padding</em> ad ogni link — tutto questo diventerà chiaro più avanti.</li>
+ <li>Per i successivi usiamo i selettori <code>a:link</code> e <code>a:visited</code> per impostare una coppia di variazioni dei colori sui link dei visitati e non visitati, così sono distinti.</li>
+ <li>Le due regole successive usano <code>a:focus</code> e<code>a:hover</code> per impostare i link del focus e del passaggio del mouse in modo da avere differenti colori di background, più una sottolineatura per evidenziare ulteriormente il link. Qui sono due i punti da notare:
+  <ul>
+   <li>La sottolineatura è stata creata usando {{cssxref("border-bottom")}}, e non {{cssxref("text-decoration")}} — alcune persone preferiscono questo stile perché il precedente consente migliori opzioni rispetto al secondo, ed è anche disegnato leggermente pù sottile, in questo modo non taglia le lettere discendenti delle parole da sottolinare (per esempo le code delle g e delle y).</li>
+   <li>Il valore {{cssxref("border-bottom")}} è stato impostato con <code>1px solid</code>, senza indicare un colore. In questo modo, il bordo adotta lo stesso colore del testo dell'elemento, ed è utile in quei casi in cui il testo usa un colore differente per ciascun caso.</li>
+  </ul>
+ </li>
+ <li>Per ultimo, <code>a:active</code> imposta i link con uno schema di colore invertito quando sono attivati, per render chiaro che sta succedendo qualcosa di importante!</li>
+</ul>
+
+<h3 id="Active_learning_Definisci_i_tuoi_stili">Active learning: Definisci i tuoi stili</h3>
+
+<p>In questa sessione di <em>active learning</em>, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.</p>
+
+<p>Se fai un errore, puoi sempre ripartire usando il pulsante <em>Reset</em>. E se rimani bloccato, clicca sul bottone S<em>how solution</em> per inserire l'esempio che ti abbiamo mostrato sopra.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;p&gt;There are several browsers available, such as &lt;a href="#"&gt;Mozilla
+ Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;a {
+
+}
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Includere_le_icone_nei_link">Includere le icone nei link</h2>
+
+<p>Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo <a href="https://icons8.com/web-app/741/external-link">il grande esempio fornito da icons8.com</a>.</p>
+
+<p>Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:</p>
+
+<pre class="brush: html">&lt;p&gt;For more information on the weather, visit our &lt;a href="#"&gt;weather page&lt;/a&gt;,
+look at &lt;a href="#"&gt;weather on Wikipedia&lt;/a&gt;, or check
+out &lt;a href="#"&gt;weather on Extreme Science&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Quindi il CSS:</p>
+
+<pre class="brush: css">body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p>
+
+<p>So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">custom bullets on list items</a> in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify <code>no-repeat</code> so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.</p>
+
+<p>We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.</p>
+
+<p>Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.</p>
+
+<p>A final word — how did we select just external links? Well, if you are writing your <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML links</a> properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">attribute selector</a>: <code>a[href*="http"]</code> selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.</p>
+
+<p>So that's it — try revisiting the active learning section above and trying this new technique out!</p>
+
+<div class="note">
+<p><strong>Note</strong>: Don't worry if you are not familiar with <a href="/en-US/docs/Learn/CSS/Styling_boxes">backgrounds</a> and <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">responsive web design</a> yet; these are explained in other places.</p>
+</div>
+
+<h2 id="Definire_i_link_come_bottoni">Definire i link come bottoni</h2>
+
+<p>The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.</p>
+
+<p>In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.</p>
+
+<p>First, some HTML:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Finland&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>And now our CSS:</p>
+
+<pre class="brush: css">body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}</pre>
+
+<p>This gives us the following result:</p>
+
+<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p>
+
+<p>Let's explain what's going on here, focusing on the most interesting parts:</p>
+
+<ul>
+ <li>Our second rule removes the default {{cssxref("padding")}} from the {{htmlelement("ul")}} element, and sets its width to span 100% of the outer container (the {{htmlelement("body")}}, in this case).</li>
+ <li>{{htmlelement("li")}} elements are normally block by default (see <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">types of CSS boxes</a> for a refresher), meaning that they will sit on their own lines. In this case, we are creating a horizontal list of links, so in the third rule we set the {{cssxref("display")}} property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements.</li>
+ <li>The fourth rule — which styles the {{htmlelement("a")}} element — is the most complicated here; let's go through it step by step:
+  <ul>
+   <li>As in previous examples, we start by turning off the default {{cssxref("text-decoration")}} and {{cssxref("outline")}} — we don't want those spoiling our look.</li>
+   <li>Next, we set the {{cssxref("display")}} to <code>inline-block</code> — {{htmlelement("a")}} elements are inline by default and, while we don't want them to spill onto their own lines like a value of <code>block</code> would achieve, we do want to be able to size them. <code>inline-block</code> allows us to do this.</li>
+   <li>Now onto the sizing! We want to fill up the whole width of the {{htmlelement("ul")}}, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the {{cssxref("width")}} to 19.5%, and the {{cssxref("margin-right")}} to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <code>&lt;ul&gt;</code> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <code>&lt;a&gt;</code> in the list, and removes the margin from it. Done!</li>
+   <li>The last three declarations are pretty simple and are mainly just for cosmetic purposes. We center the text inside each link, set the {{cssxref("line-height")}} to 3 to give the buttons some height (which also has the advantage of centering the text vertically), and set the text color to black.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/it/learn/css/styling_text/index.html b/files/it/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..ce435ca33b
--- /dev/null
+++ b/files/it/learn/css/styling_text/index.html
@@ -0,0 +1,57 @@
+---
+title: Styling text
+slug: Learn/CSS/Styling_text
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Fonts
+  - Landing
+  - Links
+  - Module
+  - NeedsTranslation
+  - Text
+  - TopicStub
+  - font
+  - letter
+  - line
+  - lists
+  - shadow
+  - web fonts
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt>
+ <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt>
+ <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt>
+ <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
+ <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
+</dl>