path: root/files/es/learn/css/styling_text/styling_lists/index.html

---
title: Aplicación de estilo a listas
slug: Learn/CSS/Styling_text/Styling_lists
translation_of: Learn/CSS/Styling_text/Styling_lists
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>

<p class="summary">Las <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">listas</a> se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que debes conocer y algunas prácticas recomendadas a tener en cuenta. Este artículo te lo explica.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conocimientos básicos de informática, conocimientos básicos de HTML (estudio <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">introducción a HTML</a>), nociones de cómo trabaja con CSS (estudio <a href="/es/docs/Learn/CSS/First_steps">introducción a CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">Conocimientos básicos de CSS para texto y tipos de letra</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Familiarizarse con las buenas prácticas y propiedades relacionadas con la aplicación de estilo a listas.</td>
  </tr>
 </tbody>
</table>

<h2 id="Un_ejemplo_sencillo_de_lista">Un ejemplo sencillo de lista</h2>

<p>Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de este artículo veremos listas no ordenadas, listas ordenadas y listas de descripciones; todas tienen características de estilo similares, algunas que son particulares del tipo de lista. El ejemplo sin ningún estilo aplicado está <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible en Github</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">código fuente</a>.)</p>

<p>El HTML para nuestro ejemplo de lista se ve así:</p>

<pre class="brush: html notranslate">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Humous&lt;/li&gt;
  &lt;li&gt;Pitta&lt;/li&gt;
  &lt;li&gt;Green salad&lt;/li&gt;
  &lt;li&gt;Halloumi&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;Ingredient description list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;dl&gt;
  &lt;dt&gt;Humous&lt;/dt&gt;
  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
  &lt;dt&gt;Pitta&lt;/dt&gt;
  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
  &lt;dt&gt;Halloumi&lt;/dt&gt;
  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
  &lt;dt&gt;Green salad&lt;/dt&gt;
  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>Si accedes al ejemplo en vivo e investigas los elementos de la lista usando las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollador del navegador</a>, observarás un par de valores de estilo predeterminados:</p>

<ul>
 <li>Los elementos {{htmlelement("ul")}} y {{htmlelement("ol")}} tienen un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>)  y un {{cssxref("padding-left")}} de <code>40px</code> (<code>2.5em</code>.)</li>
 <li>Los elementos de lista {{htmlelement("li")}} no tienen valores de espacio predeterminados.</li>
 <li>El elemento {{htmlelement("dl")}} tiene un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>), pero no tiene ningún {{cssxref("padding")}} establecido.</li>
 <li>Los elementos {{htmlelement("dd")}} tienen un {{cssxref("margin-left")}} de <code>40px</code> (<code>2.5em</code>).</li>
 <li>Los elementos de referencia {{htmlelement("p")}} que hemos incluido tienen un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>), al igual que los diferentes tipos de lista.</li>
</ul>

<h2 id="Manejar_el_espaciado_de_la_lista">Manejar el espaciado de la lista</h2>

<p>Al diseñar listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes; y el mismo espaciado horizontal entre uno y otro (en Github puedes ver el <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">ejemplo de diseño terminado</a>, y también <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">encontrar el código fuente</a>.)</p>

<p>El CSS que se utiliza para aplicar estilo al texto y al espaciado de texto es el siguiente:</p>

<pre class="brush: css notranslate">/* Estilos generales */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Estilos para las listas de descripciones */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}</pre>

<ul>
 <li>La primera regla establece un tipo de letra para todo el sitio y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.</li>
 <li>Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.</li>
 <li>La regla 4 establece el mismo interlineado ({{cssxref("line-height")}}) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente.</li>
 <li>Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (<code>line-height</code>) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.<span id="cke_bm_126E" class="hidden"> </span></li>
</ul>

<h2 id="Estilos_específicos_de_las_listas">Estilos específicos de las listas</h2>

<p>Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos {{htmlelement("ul")}} o {{htmlelement("ol")}}:</p>

<ul>
 <li>{{cssxref("list-style-type")}}: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada.</li>
 <li>{{cssxref("list-style-position")}}: Establece si las viñetas aparecen dentro de los elementos de la lista o fuera de ellos, antes del inicio de cada elemento.</li>
 <li>{{cssxref("list-style-image")}}: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.</li>
</ul>

<h3 id="El_estilo_de_la_viñeta">El estilo de la viñeta</h3>

<p>Como ya sabes, la propiedad {{cssxref("list-style-type")}} te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:</p>

<pre class="brush: css notranslate">ol {
  list-style-type: upper-roman;
}</pre>

<p>Esto nos da el aspecto siguiente:</p>

<p><img alt="Una lista ordenada con las viñetas establecidas para aparecer fuera del texto del elemento de lista." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>

<p>Puedes encontrar muchas más opciones si echas un vistazo a la página de referencia de {{cssxref("list-style-type")}}.</p>

<h3 id="La_posición_de_la_viñeta">La posición de la viñeta</h3>

<p>La propiedad {{cssxref("list-style-position")}} establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es <code>outside</code>, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.</p>

<p>Si estableces el valor en <code>inside</code>, las viñetas se ubican dentro de las líneas:</p>

<pre class="brush: css notranslate">ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}</pre>

<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>

<h3 id="Uso_de_una_imagen_personalizada_como_viñeta">Uso de una imagen personalizada como viñeta</h3>

<p>La propiedad {{cssxref("list-style-image")}} te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:</p>

<pre class="brush: css notranslate">ul {
  list-style-image: url(star.svg);
}</pre>

<p>Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. Es más conveniente usar la familia de propiedades {{cssxref("background")}}, de la cual aprenderás mucho más en el módulo <a href="/es/docs/Learn/CSS/Building_blocks">Aplicar diseño a las cajas</a>.</p>

<p>En nuestro ejemplo terminado, hemos aplicado estilo a la lista no ordenada de este modo (encima de lo que ya has visto arriba):</p>

<pre class="brush: css notranslate">ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}</pre>

<p>Aquí hemos hecho lo siguiente:</p>

<ul>
 <li>
  <p dir="ltr" id="tw-target-text">Reducir el valor de la propiedad {{cssxref("padding-left")}} del elemento {{htmlelement ("ul")}} desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer<br>
   la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (<code>padding</code>) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado.</p>
 </li>
 <li>
  <p dir="ltr" id="tw-target-text">Establecer la propiedad {{cssxref("list-style-type")}} en <code>none</code>, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedades {{cssxref("background")}} para manejar las viñetas.</p>
 </li>
 <li>Insertar una viñeta en cada elemento de la lista sin ordenar. Las propiedades relevantes son las siguientes:
  <ul>
   <li>{{cssxref("background-image")}}: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta.</li>
   <li>{{cssxref("background-position")}}: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos <code>0 0</code>, que significa que la viñeta va a aparecer en el extremo superior izquierdo de cada elemento de lista.</li>
   <li>{{cssxref("background-size")}}: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de <code>1.6rem</code> (<code>16px</code>), que encaja muy bien con el área de relleno de <code>20px</code> que hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien.</li>
   <li>{{cssxref("background-repeat")}}: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad en <code>no-repeat</code>.</li>
  </ul>
 </li>
</ul>

<p>Esto nos da el resultado siguiente:</p>

<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>

<h3 id="Propiedad_abreviada_list-style">Propiedad abreviada list-style</h3>

<p>Es posible configurar las tres propiedades anteriores con una sola propiedad abreviada, {{cssxref("list-style")}}. Por ejemplo, observa el CSS siguiente:</p>

<pre class="brush: css notranslate">ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}</pre>

<p>Podría reemplazarse por esto:</p>

<pre class="notranslate">ul {
  list-style: square url(example.png) inside;
}</pre>

<p>Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son <code>disc</code>, <code>none</code> y <code>outside</code>). Si se especifican tanto <code>type</code> como <code>image</code>, el tipo se usa como una segunda opción en el caso de que la imagen no sea posible cargar la imagen por cualquier motivo.</p>

<h2 id="Control_de_numeración_de_las_listas">Control de numeración de las listas</h2>

<p>A veces puedes querer numerar las listas de manera diferente, por ejemplo, que empiece con un número que no sea el 1, o que cuente hacia atrás, o que cuente a saltos de más de una unidad. HTML y CSS tienen algunas herramientas para ayudarte con esto.</p>

<h3 id="start">start</h3>

<p>El atributo {{htmlattrxref("start","ol")}} te permite empezar la numeración de la lista en un número diferente de 1. Observa el ejemplo siguiente:</p>

<pre class="brush: html notranslate">&lt;ol start="4"&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>Este código da el resultado siguiente:</p>

<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>

<h3 id="reversed">reversed</h3>

<p>El atributo {{htmlattrxref("reversed","ol")}} empieza la lista contando hacia atrás, en lugar de hacia adelante. Observa el ejemplo siguiente:</p>

<pre class="brush: html notranslate">&lt;ol start="4" reversed&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>Da el resultado siguiente:</p>

<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>

<div class="note">
<p><strong>Nota</strong>: Si en una lista inversa hay más elementos de lista que el valor que se ha establecido para el atributo <code>start</code>, la numeración continuará hasta cero y luego con valores negativos.</p>
</div>

<h3 id="value">value</h3>

<p>El atributo {{htmlattrxref("value","ol")}} te permite establecer para tus elementos de lista unos valores numéricos específicos. Observa el ejemplo siguiente:</p>

<pre class="brush: html notranslate">&lt;ol&gt;
  &lt;li value="2"&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li value="8"&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>Da el resultado siguiente:</p>

<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>

<div class="note">
<p><strong>Nota</strong>: Incluso si utilizas una propiedad {{cssxref("list-style-type")}} sin números, vas a tener que usar los valores numéricos equivalentes para el atributo <code>value</code>.</p>
</div>

<h2 id="Aprendizaje_activo_aplicar_estilo_a_una_lista_anidada">Aprendizaje activo: aplicar estilo a una lista anidada</h2>

<p>En esta sesión de aprendizaje activo, queremos que tomes lo que has aprendido arriba y pruebes a aplicar estilo a una lista anidada. Te hemos provisto con un HTML, y queremos que hagas lo siguiente:</p>

<ol>
 <li>Poner viñetas cuadradas en la lista no ordenada.</li>
 <li>Establecer un interlineado de 1,5 con respecto al tamaño de la letra tanto para la lista ordenada como para la lista no ordenada.</li>
 <li>Poner letras minúsculas en la lista ordenada.</li>
 <li>Juega con el ejemplo, libremente y cuanto quieras, experimenta con los tipos de viñetas, los espacios, o cualquier otra cosa con que te encuentres.</li>
</ol>

<p>Si te equivocas, puedes volver a empezar con el botón <em>Reinicio</em>. Si te quedas encallado, pulsa el botón <em>Mostrar la solución</em> para ver una posible solución.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&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;ul&gt;
  &lt;li&gt;First, light the candle.&lt;/li&gt;
  &lt;li&gt;Next, open the box.&lt;/li&gt;
  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
    &lt;ol&gt;
      &lt;li&gt;The book of spells&lt;/li&gt;
      &lt;li&gt;The shiny rod&lt;/li&gt;
      &lt;li&gt;The goblin statue&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
&lt;/ul&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;&lt;/textarea&gt;

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&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 notranslate">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 = 'ul {\n  list-style-type: square;\n}\n\nul li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\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="Véase_también">Véase también</h2>

<p>Los contadores CSS proporcionan herramientas avanzadas para la personalización de las numeraciones y la aplicación de estilo a las listas, pero son bastante complejos. Te recomendamos echarles un vistazo si quieres ampliar tus conocimientos. Consulta:</p>

<ul>
 <li>{{cssxref("@counter-style")}}</li>
 <li>{{cssxref("counter-increment")}}</li>
 <li>{{cssxref("counter-reset")}}</li>
</ul>

<h2 id="Resumen">Resumen</h2>

<p>La aplicación de estilo a listas se domina con relativa facilidad una vez que conoces algunos principios básicos y propiedades específicas asociados. En el artículo siguiente vamos a continuar con las técnicas de aplicación de estilo a enlaces.</p>

<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Nociones de aplicación de estilo con CSS a textos y tipos de letra</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicar estilo a listas</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicar estilo a enlaces</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li>
 <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribir una página de inicio para la comunidad escolar</a></li>
</ul>