initial commit

2 files changed, 495 insertions, 0 deletions

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>