initial commit

5 files changed, 1812 insertions, 0 deletions

diff --git a/files/es/learn/css/styling_text/fuentes_web/index.html b/files/es/learn/css/styling_text/fuentes_web/index.html
new file mode 100644
index 0000000000..7bfa162217
--- /dev/null
+++ b/files/es/learn/css/styling_text/fuentes_web/index.html
@@ -0,0 +1,197 @@
+---
+title: Fuentes web
+slug: Learn/CSS/Styling_text/Fuentes_web
+translation_of: Learn/CSS/Styling_text/Web_fonts
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">En el primer artículo del módulo, exploramos las características básicas del CSS disponibles para aplicar estilos a tipos de letra y al texto. En este artículo vamos a ir más lejos: exploraremos en detalle las tipografías web, que permiten que te descargues tipos de letra personalizados junto con tu página web para lograr un estilo de texto más variado y personalizado.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">texto CSS y los fundamentos de la fuente</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a aplicar tipos de letra a una página web, ya sea desde un servicio de terceros o desde tu código.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumen_de_las_familias_de_tipos_de_letra">Resumen de las familias de tipos de letra</h2>
+
+<p>Como observamos en el artículo <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">Texto y tipos de letra</a>, puedes controlar los tipos de letra que aplicas a tu HTML con la propiedad {{cssxref ("font-family")}}. Este atributo toma uno o más nombres de familia de tipos de letra y el navegador recorre esta lista hasta que encuentra un tipo de letra disponible en el sistema en el que se ejecuta:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>Este sistema funciona bien, pero las opciones de tipo de letra tradicionales de los desarrolladores web eran limitadas. Solo hay un puñado de tipos de letra que puedes garantizar que están disponibles en todos los sistemas comunes: las llamadas <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals#Familia_de_tipos_de_letras">fuentes seguras para la web</a>. Puedes usar la lista de tipos de letra para especificar cuáles prefieres, seguido de alternativas seguras para la web y del tipo de letra predeterminado del sistema. El problema es que esto añade trabajo extra en términos de pruebas para asegurarte de que tus diseños se ven bien con cada tipo de letra, etc.</p>
+
+<h2 id="Tipografías_web">Tipografías web</h2>
+
+<p>Hay una alternativa, sin embargo, que funciona muy bien hasta con versiones posteriores a la versión 6 de Internet Explorer. Las tipografías web son una función del CSS que te permite especificar los archivos de tipo de letra que se van a descargar junto con tu sitio web a medida que el usuario acceda a ellos, lo que significa que cualquier navegador que admita tipografías web puede disponer de los tipos de letra que especificas. ¡Increíble! Observa a continuación la sintaxis que se necesita.</p>
+
+<p>En primer lugar, tienes un bloque {{cssxref ("@font-face")}} al comienzo del CSS, que especifica los archivos de los tipos de letra que quieres que se descarguen:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}</pre>
+
+<p>A continuación, puedes usar el nombre de la familia de tipos de letra especificado en <code>@font-face</code> para aplicar tu tipo de letra personalizado a cualquier elemento que desees:</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}</pre>
+
+<p>La sintaxis es un poco más compleja; más adelante la veremos más detalladamente.</p>
+
+<p>Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:</p>
+
+<ol>
+ <li>Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.</li>
+ <li>Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!</p>
+</div>
+
+<h2 id="Aprendizaje_activo_Un_ejemplo_de_tipo_de_letra_seguro_para_web">Aprendizaje activo: Un ejemplo de tipo de letra seguro para web</h2>
+
+<p>Con esto en mente, vamos a construir un ejemplo básico de uso de un tipo de letra seguro para web a partir de los principios básicos. Es difícil hacer un ejemplo de demostración de este aspecto con un ejemplo en vivo incrustado, por lo tanto, nos gustaría que siguieses los pasos que se detallan en las secciones siguientes para que te hagas una idea de cómo funciona el proceso.</p>
+
+<p>Como punto de partida hay que utilizar los archivos <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> a los que añadir tu código (véase el <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">ejemplo en vivo</a>). Haz una copia de estos archivos en un directorio nuevo de tu equipo. En el archivo <code>web-font-start.css</code>, encontrarás un poco de CSS para trabajar con el aspecto y los tipos de letra básicos del ejemplo.</p>
+
+<h3 id="Encontrar_tipos_de_letra">Encontrar tipos de letra</h3>
+
+<p>Para este ejemplo, utilizaremos dos tipografías web: una para los títulos de encabezado y otra para el texto base. Para empezar, hay que encontrar los archivos que contienen el tipo de letra. Los tipos de letra se crean en estudios de diseño y se guardan en diversos formatos de archivo. En general, hay tres tipos de sitios donde puedes obtener fuentes:</p>
+
+<ul>
+ <li>Un distribuidor gratuito de tipos de letra: Es un sitio web que pone a disposición tipos de letra para descargar de forma gratuita (aunque puede haber algunas condiciones de licencia, como la acreditación del creador del tipo de letra). Algunos ejemplos de sitios web donde puedes encontrar tipos de letra gratis son <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> y <a href="https://everythingfonts.com/">Everything Fonts</a>.</li>
+ <li>Un distribuidor de fuentes de pago: En este sitio web puedes encontrar tipos de letra a cambio de un precio, dos ejemplos son <a href="http://www.fonts.com/">fonts.com</a> o <a href="http://www.myfonts.com/">myfonts.com</a>. También puedes comprar tipos de letra directamente de estudios de diseño, por ejemplo, <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, o <a href="http://www.exljbris.com/">Exljbris</a>.</li>
+ <li>Un servicio de tipos de letra en línea: Es un sitio que guarda y te sirve los tipos de letra, lo que te facilita todo el proceso. Consulta la sección {{anch ("Los servicios de tipos de letra en línea")}} para obtener más información.</li>
+</ul>
+
+<p>Vamos a ver algunos tipos de letra. Ve a <a href="https://www.fontsquirrel.com/">Font Squirrel</a> y elige dos tipos de letra: uno que te resulte agradable e interesante para los títulos (quizá una buena tipografía de tipo Display o Slab Serif), y otro un poco menos llamativo y más legible para los párrafos. Cuando encuentres los tipos de letra, pulsa el botón de descarga y guarda el archivo en el mismo directorio que los archivos HTML y CSS que guardaste anteriormente. No importa si son TTF (True Type Fonts) u OTF (Open Type Fonts).</p>
+
+<p>En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: <em>thin</em>, <em>medium</em>, <em>bold</em>, <em>italic</em>, <em>thin italic</em>, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.</p>
+</div>
+
+<h3 id="Generar_el_código">Generar el código</h3>
+
+<p>Ahora deberás generar el código que necesitas (y aplicar el estilo al tipo de letra). Para cada tipo de letra, sigue estos pasos:</p>
+
+<ol>
+ <li>Asegúrate de cumplir con todos los requisitos de la licencia, sobre todo si vas a usarlo en un proyecto comercial y/o en una web.</li>
+ <li>Ve a <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator </a>de Fontsquirrel.</li>
+ <li>Sube tus dos archivos de tipo de letra con el botón <em>Cargar Fuentes</em>.</li>
+ <li>Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web».</li>
+ <li>Haz clic en <em>Descarga tu paquete</em>.</li>
+</ol>
+
+<p>Una vez que el generador haya finalizado el procesamiento, deberías obtener un archivo ZIP para descargar; guárdalo en el mismo directorio que tus archivos HTML y CSS.</p>
+
+<h3 id="El_código_de_tu_ejemplo_de_demostración">El código de tu ejemplo de demostración</h3>
+
+<p>En este punto, descomprime el paquete con los tipos de letra web que acabas de generar. En el directorio descomprimido verás tres elementos útiles:</p>
+
+<ul>
+ <li>Las distintas versiones de cada tipo de letra, por ejemplo: <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, etc.; los tipos de letra exactos proporcionados se actualizarán con el tiempo a medida que cambien los requisitos técnicos del navegador. Como se ya hemos dicho, se necesita más de un tipo de letra para garantizar la compatibilidad entre navegadores: esta es la forma en que Fontsquirrel se asegura de que tengas todo lo que necesitas.</li>
+ <li>Un archivo HTML con un ejemplo de demostración para cada tipo de letra: cárgalos en tu navegador para ver cómo se ve la fuente en diferentes contextos de uso.</li>
+ <li>Un archivo <code>stylesheet.css</code>, que contiene el código @font-face que necesitas.</li>
+</ul>
+
+<p>Para implementar estos tipos de letra en tu ejemplo de demostración, sigue estos pasos:</p>
+
+<ol>
+ <li>Cambia el nombre del directorio descomprimido a algo fácil y simple, como <code>fonts</code>.</li>
+ <li>Abre el archivo <code>stylesheet.css</code> y copia los dos bloques <code>@font-face</code> incluidos en tu archivo <code>web-font-start.css</code>. Debes ponerlos en la parte superior, antes de cualquier elemento CSS, ya que los tipos de letra deben importarse antes que los puedas utilizar en tu sitio web.</li>
+ <li>Cada una de las funciones <code>url()</code> apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade <code>fonts/</code> al inicio de cada ruta (ajusta la ruta como sea necesario).</li>
+ <li>Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo:
+  <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre>
+ </li>
+</ol>
+
+<p>Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">ejecuta el ejemplo terminado en vivo</a>).</p>
+</div>
+
+<h2 id="Los_servicios_de_tipos_de_letra_en_línea">Los servicios de tipos de letra en línea</h2>
+
+<p>Los servicios de tipos de letra en línea en general guardan tipos de letra y los proporcionan a los usuarios, por lo que no tienes que preocuparte por escribir el código <code>@font-face</code>, solo necesitas insertar una o dos sencillas líneas de código en tu sitio web para que todo funcione. Los ejemplos incluyen <a href="https://fonts.adobe.com/">Adobe Fonts</a> y <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de <a href="https://www.google.com/fonts">Google Fonts</a>, un servicio gratuito y muy útil, sobre todo para trabajos de prueba rápida y escritura de ejemplos de demostración.</p>
+
+<p>La mayoría de estos servicios son fáciles de usar, por lo que no vamos a exponerlos en gran detalle. Vamos a echar un vistazo rápido a las fuentes de Google, para que te hagas una idea. De nuevo, usa copias de <code>web-font-start.html</code> y <code>web-font-start.css</code> como punto de partida.</p>
+
+<ol>
+ <li>Ve a <a href="https://www.google.com/fonts">Google Fonts</a>.</li>
+ <li>Usa los filtros del lado izquierdo para indicar los tipos de letra que deseas escoger y elige un par de tipos de letra que te gusten.</li>
+ <li>Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado.</li>
+ <li>Cuando hayas elegido las familias de tipos de letra, pulsa la barra <em>[número] familias seleccionadas</em> que encontrarás en la parte inferior de la página.</li>
+ <li>En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.</li>
+ <li>Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar una versión completa en <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si necesitas comparar tu trabajo con el nuestro (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">consúltalo en vivo</a>).</p>
+</div>
+
+<h2 id="font-face_con_más_detalle">@font-face con más detalle</h2>
+
+<p>Vamos a explorar que la sintaxis correspondiente a <code>@font-face</code> que te ha generado Fontsquirrel. Uno de los bloques se verá así:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}</pre>
+
+<p>Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicación de Paul Irish, en los tiempos en que <code><code>@font-face</code></code> empezaba a popularizarse (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Vamos a ver qué hace:</p>
+
+<ul>
+ <li><code><code><code>font-family</code></code></code>: Esta línea especifica el nombre con el que vas a referirte a la fuente. Puedes poner el que quieras, siempre y cuando lo uses de manera coherente a lo largo de tu CSS.</li>
+ <li><code><code><code>src</code></code></code>: Estas líneas especifican las rutas de acceso a los archivos de tipos de letra para que puedas importarlos a tu CSS (la parte <code><code><code>URL</code></code></code>) y el formato de cada archivo de tipo de letra (la parte <code><code><code>format</code></code></code>). La última parte en cada caso es opcional, pero es útil declararla porque permite que los navegadores encuentren más rápido un tipo de letra que puedan usar. Se pueden enumerar varias declaraciones, separadas por comas: el navegador buscará por ellas y usará la primera que encuentre. Por lo tanto, es mejor poner formatos nuevos y mejores, como WOFF2 y formatos más antiguos, no tan buenos, como TTF. La única excepción son las fuentes EOT: se colocan primero para corregir un par de errores en versiones anteriores de Internet Explorer, por lo que intentará usar lo primero que encuentre, incluso si realmente no puede usar la fuente.</li>
+ <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Estas líneas especifican qué grueso tiene el tipo de letra y si se muestra en cursiva o no. Si vas a importar diversos grosores del mismo tipo de letra, puedes especificar cuál es su grueso/estilo y luego usar valores de {{cssxref("font-weight")}} / {{cssxref("font-style")}} diferentes para elegir entre ellos, en lugar de tener que llamar a todos los diferentes miembros de la familia de tipos de letra con nombres distintos. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@tip-face tip: define font-weight and font-stile to keep your CSS simple</a> de Roger Johansson muestra qué hacer con más detalle.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.</p>
+</div>
+
+<h2 id="Tipos_de_letra_variables">Tipos de letra variables</h2>
+
+<p>Los navegadores disponen hoy de una tecnología de tipos de letra reciente llamada tipos de letra variables: se trata de tipos de letra que permiten incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo separado para cada ancho, grosor o estilo. Es demasiado avanzado para nuestro curso para principiantes, pero si te apetece avanzar y echarles un vistazo, lee nuestra <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guía de tipos de letra variables</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora que has leído nuestros artículos sobre nociones de aplicación de estilo al texto, es hora de evaluar cuánto has retenido del módulo a partir de la creación de una composición tipográfica de una página de inicio de una escuela comunitaria.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "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">Texto fundamental y estilo de fuente</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Dar estilo a las listas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Dar estilo a los enlaces</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Las fuentes web</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Composición tipográfica de una página de inicio de una escuela comunitaria</a></li>
+</ul>
diff --git a/files/es/learn/css/styling_text/fundamentals/index.html b/files/es/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..a1fa747e27
--- /dev/null
+++ b/files/es/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,732 @@
+---
+title: Fundamentos de texto y fuentes tipográficas
+slug: Learn/CSS/Styling_text/Fundamentals
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary">En este artículo vas a iniciar tu viaje hacia el dominio la aplicación de estilos a textos con {{glossary("CSS")}}. </span> Aquí trataremos en detalle todos los fundamentos básicos del diseño del texto y las fuentes tipográficas, incluyendo la configuración de su grosor, la familia y el estilo de letra, las propiedades abreviadas para los tipos de letra, la alineación del texto, el espaciado entre líneas y letras, y otros efectos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conceptos básicos de HTML (estudio de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), conceptos básicos de CSS (estudio de <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender las propiedades y técnicas fundamentales necesarias para dar estilo al texto en las páginas web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_implica_aplicar_estilo_a_texto_en_CSS">¿Qué implica aplicar estilo a texto en CSS?</h2>
+
+<p>Como ya habrás experimentado en tu trabajo con el HTML y el CSS, el texto incluido en un elemento se dispone dentro de la caja de contenido del elemento. Esta empieza en la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido de los lenguajes RTL, o right-to-left, que se escriben de derecha a izquierda) y fluye hacia el final de la línea. Una vez que llega al final, baja a la línea siguiente y sigue, y luego continúa a la línea siguiente, hasta que todo el contenido se ha ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuidos en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se llega al final de la línea, a menos que se fuerce un salto de línea manual con el elemento {{htmlelement("br")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">modelo de caja</a> antes de continuar.</p>
+</div>
+
+<p>Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse generalmente en dos categorías, que veremos por separado en este artículo:</p>
+
+<ul>
+ <li><strong>Estilos del tipo de letra</strong>: Propiedades que afectan al texto (qué tipo de letra se usa, su tamaño, si es negrita, itálica, etc.).</li>
+ <li><strong>Estilos de disposición del texto</strong>: Propiedades que afectan al espaciado y otras características relativas a la disposición del texto, lo que permite la elección de, por ejemplo, el espacio entre líneas y letras, y el modo como el texto se alinea dentro de la caja contenedora.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como <a href="/es/docs/Web/CSS/::first-letter">::first-letter</a> (selecciona la primera letra del texto de un elemento), <a href="/es/docs/Web/CSS/::first-line">::first-line</a> (selecciona la primera línea del texto de un elemento), o <a href="/es/docs/Web/CSS/::selection">::selection</a> (selecciona el texto que está resaltado por el cursor).</p>
+</div>
+
+<h2 id="Tipos_de_letra">Tipos de letra</h2>
+
+<p>Veamos las propiedades que permiten definir el estilo del tipo de letra. En este ejemplo aplicaremos algunas propiedades CSS diferentes al mismo ejemplo HTML, que presentamos a continuación:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+
+<p>Puedes ver el <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">ejemplo completo en Github</a> (consulta también <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">el código fuente</a>.)</p>
+
+<h3 id="Color">Color</h3>
+
+<p>La propiedad {{cssxref("color")}} establece el color del contenido de los elementos seleccionados (que normalmente es texto, pero también puede incluir un par cosas más, como un subrayado o una línea superpuesta al texto con la propiedad {{cssxref("text-decoration")}} ).</p>
+
+<p>La propiedad <code>color</code> puede admitir cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color CSS</a>, por ejemplo:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>Esto mostrará el contenido de los párrafos en color rojo, en lugar del negro que es el estándar por defecto del navegador:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p>
+
+<h3 id="Familia_de_tipos_de_letras">Familia de tipos de letras</h3>
+
+<p>Usamos la propiedad {{cssxref("font-family")}} para definir un tipo de letra diferente para nuestro texto. Esta propiedad indica al navegador el tipo de letra (o una lista de tipos de letra) que debe aplicar a los elementos seleccionados. El navegador solo aplica el tipo de letra si la máquina que accede al sitio web dispone de ella; en caso contrario, simplemente usa el tipo de letra que tiene definido por defecto ({{anch("Default fonts", "default font")}}). Aquí tienes un ejemplo sencillo:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: arial;
+}</pre>
+
+<p>Con esto, todos los párrafos de una página adoptan el tipo de letra Arial, que se encuentra en cualquier ordenador.</p>
+
+<h4 id="Tipos_de_letra_seguros_para_la_web">Tipos de letra seguros para la web</h4>
+
+<p>Solo hay un cierto número de tipos de letra que están disponibles en todos los sistemas en general, y que en consecuencia pueden utilizarse sin demasiadas preocupaciones. Son los llamados <em>tipos de letra seguros para la web</em>, o <em><strong>web safe fonts</strong></em>.</p>
+
+<p>La mayor parte del tiempo, como desarrolladores web deseamos tener un control específico mayor sobre los tipos de letra con que se va a mostrar para mostrar nuestro contenido de texto. El problema está en encontrar una manera de saber de qué tipo de letra dispone el ordenador que se utiliza para acceder a nuestras páginas. No hay manera de saber esto en todos los casos, pero al menos contamos con que los tipos de letra seguros para la web están disponibles en casi todos los sistemas operativos más utilizados (las distribuciones Linux más comunes, Windows, Mac, Android, e iOS).</p>
+
+<p>La lista de los tipos de letra seguros para la web cambia al ir evolucionando los sistemas operativos, pero es correcto considerar los tipos de letra siguientes como seguros para la web, al menos por ahora (muchos de ellos se han popularizado gracias a la iniciativa <em><a href="https://es.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the web</a></em> de Microsoft, de finales de la década de 1990 y principios de la del 2000):</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nombre</th>
+   <th scope="col" style="white-space: nowrap;">Tipo de letra genérico</th>
+   <th scope="col">Observaciones</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Arial</td>
+   <td>sans-serif</td>
+   <td>A menudo se considera una buena práctica añadir también <em>Helvética</em> como opción preferida a <em>Arial</em> porque, aunque tienen casi el mismo aspecto y <em>Arial</em> está más ampliamente disponible, se considera que <em>Helvética</em> tiene una forma más agradable.</td>
+  </tr>
+  <tr>
+   <td>Courier New</td>
+   <td>monospace</td>
+   <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Courier New</em> llamado <em>Courier</em>. Se considera una buena práctica usar ambos, con <em>Courier New</em> como la opción preferida.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Georgia</td>
+   <td>serif</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Times New Roman</td>
+   <td>serif</td>
+   <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Times New Roman</em> llamado <em>Times</em>. Se considera una buena práctica usar ambos, con <em>Times New Roman</em> como la opción preferida.</td>
+  </tr>
+  <tr>
+   <td>Trebuchet MS</td>
+   <td>sans-serif</td>
+   <td>Hay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles.</td>
+  </tr>
+  <tr>
+   <td>Verdana</td>
+   <td>sans-serif</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota</strong>: Entre otros recursos, el sitio <a href="http://www.cssfontstack.com/">cssfontstack.com</a> mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: <strong>web fonts</strong>. Esto es un poco más complejo, y lo vamos a exponer más adelante en un <a href="/es/docs/Learn/CSS/Styling_text/Fuentes_web">artículo independiente</a> del módulo.</p>
+</div>
+
+<h4 id="Fuentes_predeterminadas">Fuentes predeterminadas</h4>
+
+<p>CSS define cinco nombres genéricos para los tipos de letra <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> y <code>fantasy</code>. Son muy genéricos y el tipo de letra exacto que se va a utilizar cuando se especifiquen dichos nombres dependerá de cada navegador y puede variar dependiendo del sistema operativo. Representa el <em>peor escenario posible</em>, en el que el navegador tratará de proporcionar al menos una fuente que parezca apropiada. <code>serif</code>, <code>sans-serif</code> y <code>monospace</code> son bastante predecibles y el navegador debería proporcionar algo razonable. Por otra parte, <code>cursive</code> y <code>fantasy</code> son menos predecibles y te recomendamos que las uses con cautela, y vayas probando a medida que avanzas.</p>
+
+<p>Los cinco nombres se definen de la manera siguiente:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nombre</th>
+   <th scope="col">Definición</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>serif</code></td>
+   <td>Tipos de letra que tienen <em><a href="https://es.wikipedia.org/wiki/Gracia_(tipograf%C3%ADa)">serifas</a></em> (pequeños adornos, en general en los extremos de los trazos de los caracteres tipográficos)</td>
+   <td><span style="font-family: serif;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>sans-serif</code></td>
+   <td>Tipos de letra que carecen de <em>serifas</em>.</td>
+   <td><span style="font-family: sans-serif;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>monospace</code></td>
+   <td>Tipos de letra en que cada carácter tiene el mismo ancho; se usan con frecuencia en las listas de sentencias de los códigos de programación.</td>
+   <td><span style="font-family: monospace;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>cursive</code></td>
+   <td>Tipos de letra que intentan emular la letra manuscrita, con trazos fluidos y conectados.</td>
+   <td><span style="font-family: cursive;">Mi gran elefante rojo</span></td>
+  </tr>
+  <tr>
+   <td><code>fantasy</code></td>
+   <td>Tipos de letra que pensados para ser decorativos.</td>
+   <td><span style="font-family: fantasy;">Mi gran elefante rojo</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Listas_de_tipos_de_letra">Listas de tipos de letra</h4>
+
+<p>Ya que no puedes garantizar la disponibilidad de los tipos de letra que deseas utilizar (incluso un tipo de letra seguro para la web podría fallar por alguna razón), puedes proporcionar un <strong>lista de tipos de letra</strong> para que el navegador tenga diversos tipos de letra entre los que elegir. Consiste simplemente en introducirlo como el valor de <code>font-family</code>, que consistirá en una lista de diversos nombres de tipos de letra separados por comas, por ejemplo.</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>En tal caso, el navegador comienza al principio de la lista y busca si el primer tipo de letra está disponible en la máquina. Si es así, aplica ese tipo de letra a los elementos seleccionados, y si no, lo intenta con el nombre siguiente de la lista; y así sucesivamente.</p>
+
+<p>Es una buena idea proporcionar un nombre de tipo de letra genérico al final de la lista para que el navegador pueda al menos proporcionar algo aproximadamente adecuado en el caso de que ninguno de los tipos de letra que deseas esté disponible. Para ilustrar este punto: los navegadores asignan a los párrafos el tipo de letra <em>serif</em> por defecto, que normalmente es Times New Roman, si no hay ninguna otra opción disponible, pero esto no resulta conveniente cuando se espera un tipo de letra <em>sans-serif</em>!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los nombres de los tipos de letra que están constituidos por más de una palabra (como <code>Trebuchet MS</code> ) han de ponerse entre comillas, por ejemplo <code>"Trebuchet MS"</code>.</p>
+</div>
+
+<h4 id="Un_ejemplo_con_font-family">Un ejemplo con font-family</h4>
+
+<p>Vamos a introducir en nuestro ejemplo anterior una fuente de tipo sans-serif para los párrafos:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>Esto nos da el resultado siguiente:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }}</p>
+
+<h3 id="Tamaño_de_la_letra">Tamaño de la letra</h3>
+
+<p>En el artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">Unidades y valores de CSS</a> de nuestro módulo anterior, revisamos las unidades de longitud y tamaño. El tamaño del tipo de letra (establecido con la propiedad {{cssxref("font-size")}}) puede tomar valores medidos en la mayoría de estas unidades (y en otras, como <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Porcentajes">porcentajes</a>). Sin embargo, las unidades más comunes que vas a usar para ajustar el tamaño del texto son:</p>
+
+<ul>
+ <li>Unidades <code>px</code> (píxeles): El número de píxeles de altura que deseas que tenga el texto. Esta es una unidad absoluta, da como resultado el mismo valor calculado final para el tipo de letra en la página en casi cualquier situación.</li>
+ <li>Unidades <code>em</code>: 1em equivale al tamaño de tipo de letra que se haya establecido en el elemento padre del elemento activo al que aplicamos estilo (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Este puede ser complejo de resolver si hay muchos elementos anidados con diferentes tamaños de tipo de letra establecidos, pero es factible, como verás a continuación. Pero, ¿para qué molestarse en ello? Porque resulta bastante natural una vez que te acostumbras a ello, y puedes usar unidades <code>em</code> para establecer el tamaño de todo, no solo del texto. Puedes tener un sitio web completo dimensionado con unidades <code>em</code>, lo que facilita su mantenimiento.</li>
+ <li>Unidades <code>rem</code>: Funcionan igual que las unidades <code>em</code>, excepto que 1<code>rem</code> equivale al tamaño del tipo de letra establecido en el elemento raíz del documento (es decir, en {{htmlelement("html")}}), no en el elemento padre. Esto facilita mucho los cálculos de los tamaños del tipo de letra, aunque te puede dar mucha guerra si quieres incluir navegadores que ya son muy antiguos porque las versiones de Internet Explorer 8 y anteriores no admiten la unidad <code>rem</code>.</li>
+</ul>
+
+<p>La propiedad <code>font-size</code> de un elemento se hereda del elemento padre. Todo comienza con el elemento raíz de todo el documento ({{htmlelement("html")}}) cuya propiedad <code>font-size</code> se establece a en 16px como estándar en todos los navegadores. Cualquier párrafo (o cualquier otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16px. Otros elementos pueden tener diferentes tamaños predeterminados, por ejemplo un elemento {{htmlelement("h1")}} tiene de manera predeterminada un tamaño establecido de 2em, por lo que tendrá un tamaño final de 32px.</p>
+
+<p>Las cosas se vuelven más complicadas cuando se empieza a alterar el tamaño del tipo de letra de los elementos anidados. Por ejemplo, si tu página incluye un elemento {{htmlelement("article")}} y estableces un tamaño de fuente de <code>1.5em</code> (que resultará en un tamaño final de 24px), y luego quieres que los párrafos dentro del elemento <code>&lt;article&gt;</code> tengan un tamaño de letra calculado de 20px, ¿qué valor de unidad <code>em</code> deberías usar?</p>
+
+<pre class="brush: html notranslate">&lt;!-- El tamaño de letra base del documento es 16px --&gt;
+&lt;article&gt; &lt;!-- Si mi tamaño de letra es 1.5em --&gt;
+  &lt;p&gt;Mi párrafo&lt;/p&gt; &lt;!-- ¿Cómo calculo el tamaño del tipo de letra para que de 20px? --&gt;
+&lt;/article&gt;</pre>
+
+<p>Necesitarías establecer el valor en unidades <code>em</code> de 20/24, es decir, <code>0.83333333 em</code>. El cálculo puede ser complicado, por lo que hay que pensarlo bien a la hora de aplicar estilo a las cosas. Lo mejor es usar unidades <code>rem</code> donde se pueda, porque simplifican las cosas, y evitar establecer un tamaño de letra concreto para los elementos del contenedor, siempre que sea posible.</p>
+
+<h4 id="Un_ejemplo_sencillo_de_definición_de_tamaños">Un ejemplo sencillo de definición de tamaños</h4>
+
+<p>Al dimensionar el texto, en general es una buena idea establecer el tamaño básico del tipo de letra del documento (<code>font-size</code>) en 10 px, de modo que los cálculos son mucho más fáciles de resolver, puesto que entonces los valores (r)em que necesites son el tamaño del tipo de letra en píxeles dividido por 10, no por 16. Luego de hacer eso, puedes establecer con facilidad los diferentes tamaños de los tipos de letra de tu documento como desees. Es una buena idea hacer una lista de todos los conjuntos de reglas de tamaño de fuente (<code>font-size</code>) en una zona concreta de tu hoja de estilo para que resulten fáciles de encontrar.</p>
+
+<p>Nuestro nuevo resultado es:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('Un_ejemplo_sencillo_de_definición_de_tamaños', '100%', 220) }}</p>
+
+<h3 id="Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto">Estilo y cuerpo del tipo de letra, efectos y decoración del texto</h3>
+
+<p>El CSS proporciona cuatro propiedades comunes para alterar el efecto visual / énfasis del texto:</p>
+
+<ul>
+ <li>{{cssxref("font-style")}}: Se usa para activar y desactivar el texto en cursiva. Los valores posibles son los siguientes (raramente usarás esto, a menos que desees desactivar algún estilo de cursiva por alguna razón):
+  <ul>
+   <li><code>normal</code>: Pone el texto en tipo de letra normal (desactiva la cursiva).</li>
+   <li><code>italic</code>: Pone el texto en la versión cursiva del tipo de letra, si está disponible; si no está disponible, simulará cursiva con el modo <code>oblique</code> en su lugar.</li>
+   <li><code>oblique</code>: Pone el texto en una versión de tipo de letra cursiva simulada, que se genera inclinando la versión normal.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("font-weight")}}: Establece el grueso o peso del texto. Puede haber muchos valores si dispones de muchas variantes de fuente (como <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), pero en realidad raramente usarás alguna de ellas, más allá de los estilos <code>normal</code> y <code>bold</code>:
+  <ul>
+   <li><code>normal</code>, <code>bold</code>: Grueso del tipo de letra normal y <strong style="font-weight: bold;">negrita</strong></li>
+   <li><code>lighter</code>, <code>bolder</code>: Establece el grueso de la negrita del elemento activo un nivel por debajo o por encima del grueso de su elemento padre.</li>
+   <li><code>100</code>–<code>900</code>: Valores numéricos de negrita, que proporcionan un control más detallado que las palabras clave anteriores, si es necesario.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-transform")}}: Te permite practicar algunas transformaciones sobre tu tipo de letra. Los valores incluyen:
+  <ul>
+   <li><code>none</code>: Impide cualquier transformación.</li>
+   <li><code>uppercase</code>: Transforma TODO EL TEXTO A MAYÚSCULAS.</li>
+   <li><code>lowercase</code>: Transforma todo el texto a minúsculas.</li>
+   <li><code>capitalize</code>: Transforma <span style="text-transform: capitalize;">Las Letras Iniciales De Cada Palabra A Mayúscula</span>.</li>
+   <li><code>full-width</code>: Transforma todos los caracteres para cada uno quede <span style="text-transform: full-width;">dentro de una caja de ancho fijo</span>, similar a una fuente monoespaciada, lo que permite, por ejemplo, la alineación de caracteres latinos junto con caracteres asiáticos (chino, japonés, coreano.)</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-decoration")}}: Activa/desactiva decoraciones en los tipos de letra (usarás esto principalmente para desactivar el subrayado por defecto de los enlaces al aplicarles estilo). Los valores disponibles son:
+  <ul>
+   <li><code>none</code>: Desactiva cualquier decoración de texto que presente.</li>
+   <li><code>underline</code>: <u>Subraya el texto</u>.</li>
+   <li><code>overline</code>: <span style="text-decoration: overline;">Proporciona al texto una línea superpuesta</span>.</li>
+   <li><code>line-through</code>: Coloca un <s style="text-decoration: line-through;">tachado sobre el texto</s>.</li>
+  </ul>
+  Observa que {{cssxref("text-decoration")}} puede aceptar diversos valores a la vez, de modo que puedes incluir diversas decoraciones simultáneas, por ejemplo <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Ten encuenta también que {{cssxref("text-decoration")}} es una propiedad abreviada de {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} y {{cssxref("text-decoration-color")}}. Puedes utilizar combinaciones de los valores de esta propiedad para crear efectos interesantes, por ejemplo <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li>
+</ul>
+
+<p>Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto', '100%', 220) }}</p>
+
+<h3 id="Textos_sombreados">Textos sombreados</h3>
+
+<p>Puedes aplicar sombras a tus textos con la propiedad {{cssxref("text-shadow")}}. Esta propiedad puede tomar hasta cuatro valores, como se muestra en ejemplo siguiente:</p>
+
+<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red;</pre>
+
+<p>Las cuatro propiedades son las siguientes:</p>
+
+<ol>
+ <li>El desplazamiento horizontal de la sombra desde el texto original; admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone CSS, pero lo más habitual es usar <code>px</code>. Es un valor obligatorio.</li>
+ <li>El desplazamiento vertical de la sombra desde el texto original; se comporta básicamente igual que el desplazamiento horizontal, excepto porque mueve la sombra arriba/abajo, y no hacia derecha/izquierda. Es un valor obligatorio.</li>
+ <li>El radio de desenfoque; cuanto más alto es este valor, mayor es la dispersión de la sombra. Si no se incluye este valor, el valor por defecto es 0, y no hay desenfoque. Esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone el CSS.</li>
+ <li>El color de base de la sombra, que admite cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color de que dispone CSS</a>. Si no se incluye este valor, el valor predeterminado es <code>negro</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo <code>-1px -1px</code>, mueven la sombrea hacia la izquierda o hacia arriba.</p>
+</div>
+
+<h4 id="Sombras_múltiples">Sombras múltiples</h4>
+
+<p>Puedes aplicar diversas sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>,
+             <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>,
+             <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>,
+             <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo <em>Tommy The Cat</em>, obtenemos esto:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 26px;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 14px;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sombras_múltiples', '100%', 220) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver más ejemplos interesantes del uso de <code>text-shadow</code> en el artículo de <em>Sitepoint</em> <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
+</div>
+
+<h2 id="Diseño_del_texto">Diseño del texto</h2>
+
+<p>Una vez tratadas las propiedades básicas para los tipos de letra, echemos un vistazo a las propiedades que podemos usar para la disposición del texto.</p>
+
+<h3 id="Alineación_del_texto">Alineación del texto</h3>
+
+<p>La propiedad {{cssxref("text-align")}} se usa para controlar la forma en que el texto se alinea dentro de la caja que lo contiene. Los valores disponibles para esta propiedad son los siguientes, y funcionan de la misma forma que en una aplicación de procesamiento de texto:</p>
+
+<ul>
+ <li><code>left</code>: Alinea el texto por la izquierda.</li>
+ <li><code>right</code>: Alinea el texto por la derecha.</li>
+ <li><code>center</code>: Centra el texto.</li>
+ <li><code>justify</code>: Varía los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Debes usar este valor con prudencia porque puede quedar terrible, especialmente si el párrafo al que se aplica contiene muchas palabras largas. Si tienes intención de utilizar esta propiedad, también deberías pensar en alguna otra, como {{cssxref("hyphens")}}, para dividir las palabras largas entre las líneas.</li>
+</ul>
+
+<p>Si aplicamos <code>text-align: center;</code> al elemento {{htmlelement("h1")}} de nuestro ejemplo, obtendremos esto:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Alineación_del_texto', '100%', 220) }}</p>
+
+<h3 id="Interlineado">Interlineado</h3>
+
+<p>La propiedad {{cssxref("line-height")}} establece la altura entre cada línea de texto; esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>, pero también puede tomar un valor sin unidades, que actúa como un multiplicador y generalmente se considera la mejor opción porque se multiplica la propiedad {{cssxref("font-size")}} para obtener la altura de la línea (<code>line-height</code>). El texto del cuerpo (<code>body</code>) generalmente se ve mejor y es más fácil de leer si hay más separación entre las líneas; la altura recomendada de la línea es entre 1.5-2 (a doble espacio). Por lo tanto, para configurar nuestras líneas de texto a 1.5 veces la altura de la fuente, deberías usar esto:</p>
+
+<pre class="brush: css notranslate">line-height: 1.5;</pre>
+
+<p>Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos daría este resultado:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Interlineado', '100%', 250) }}</p>
+
+<h3 id="Espacio_entre_letras_y_espacio_entre_palabras">Espacio entre letras y espacio entre palabras</h3>
+
+<p>Las propiedades {{cssxref("letter-spacing")}} y {{cssxref("word-spacing")}} te permiten establecer el espacio entre las letras y entre las palabras del texto. No los usarás a menudo, pero podría ser útil para obtener una apariencia determinada o para mejorar la legibilidad de un tipo de letra particularmente denso. Estas propiedades admiten la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>.</p>
+
+<p>Así, como ejemplo, podemos aplicar a la primera línea de los elementos {{htmlelement("p")}} de nuestro ejemplo lo siguiente:</p>
+
+<pre class="brush: css notranslate">p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}</pre>
+
+<p>y obtendremos:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Espacio_entre_letras_y_espacio_entre_palabras', '100%', 250) }}</p>
+
+<h3 id="Otras_propiedades_interesantes">Otras propiedades interesantes</h3>
+
+<p>Las propiedades anteriores nos dan una idea de cómo empezar a aplicar texto a una página web, pero hay muchas más propiedades que puedes usar. Nuestro objetivo aquí es solo exponer las más importantes. Cuando te hayas acostumbrado a usar las propiedades anteriores, también deberías explorar las siguientes:</p>
+
+<p>Aplicación de estilos a tipos de letra:</p>
+
+<ul>
+ <li>{{cssxref("font-variant")}}: Cambia entre las opciones de versalita y normal del tipo de letra.</li>
+ <li>{{cssxref("font-kerning")}}: Activa/Desactiva las opciones de interletraje del tipo de letra.</li>
+ <li>{{cssxref("font-feature-settings")}}: Activa/Desactiva diversas características de los tipos de letra <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li>
+ <li>{{cssxref("font-variant-alternates")}}: Controla el uso de los caracteres alternativos para un tipo de letra dado.</li>
+ <li>{{cssxref("font-variant-caps")}}: Controla el uso de los caracteres alternativos de las mayúsculas.</li>
+ <li>{{cssxref("font-variant-east-asian")}}: Controla el uso de los caracteres alternativos en textos en idiomas del Asia Oriental, como el japonés y el chino.</li>
+ <li>{{cssxref("font-variant-ligatures")}}: Controla qué ligaduras y formas contextuales se usarán en el texto.</li>
+ <li>{{cssxref("font-variant-numeric")}}: Controla el uso de los caracteres alternativos para números, fracciones y marcadores de ordinales.</li>
+ <li>{{cssxref("font-variant-position")}}: Controla el uso de los caracteres alternativos de tamaños más pequeños posicionados como subíndice y superíndice.</li>
+ <li>{{cssxref("font-size-adjust")}}: Ajusta el tamaño visual del texto independientemente del tamaño real del tipo de letra.</li>
+ <li>{{cssxref("font-stretch")}}: Cambia entre posibles versiones ampliadas de un tipo de letra determinado.</li>
+ <li>{{cssxref("text-underline-position")}}: Especifica la posición de los subrayados con el valor <code>underline</code> de la propiedad <code>text-decoration-line</code>.</li>
+ <li>{{cssxref("text-rendering")}}: Intenta optimizar la representación del texto.</li>
+</ul>
+
+<p>Estilos de disposición de los textos</p>
+
+<ul>
+ <li>{{cssxref("text-indent")}}: Especifica el espacio horizontal que debe dejarse antes del comienzo de la primera línea del contenido de texto.</li>
+ <li>{{cssxref("text-overflow")}}: Define cómo se señala el contenido que los usuarios no ven porque desborda.</li>
+ <li>{{cssxref("white-space")}}: Define cómo se usan los espacios en blanco y los saltos de línea asociados dentro del elemento.</li>
+ <li>{{cssxref("word-break")}}: Especifica si se deben dividir las palabras a final de línea.</li>
+ <li>{{cssxref("direction")}}: Define la dirección del texto (esto depende del idioma, y por lo general es mejor dejar que HTML maneje esa parte, porque está vinculada al contenido del texto).</li>
+ <li>{{cssxref("hyphens")}}: Activa/Desactiva la separación de palabras en los idiomas admitidos.</li>
+ <li>{{cssxref("line-break")}}: Relaja o refuerza el salto de línea en los idiomas asiáticos.</li>
+ <li>{{cssxref("text-align-last")}}: Define cómo es la alineación de la última línea de un bloque o línea justo antes de un salto de línea forzado.</li>
+ <li>{{cssxref("text-orientation")}}: Define la orientación del texto en una línea.</li>
+ <li>{{cssxref("word-wrap")}}: Especifica si el navegador puede dividir palabras a final de línea para evitar desbordamientos del contenido.</li>
+ <li>{{cssxref("writing-mode")}}: Define si las líneas de texto se disponen en horizontal o en vertical y la dirección en la que fluyen las líneas subsiguientes.</li>
+</ul>
+
+<h2 id="Propiedades_abreviadas_para_los_tipos_de_letra">Propiedades abreviadas para los tipos de letra</h2>
+
+<p>Muchas propiedades relativas a los tipos de letra también pueden establecerse de forma abreviada con la propiedad {{cssxref("font")}}. Se escriben en el orden siguiente: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p>
+
+<p>De entre todas estas propiedades, solo <code>font-size</code> y <code>font-family</code> son obligatorias al usar la propiedad abreviada de <code>font</code>.</p>
+
+<p>Se debe colocar una barra inclinada (<em>slash</em>) entre las propiedades {{cssxref("font-size")}} y {{cssxref("line-height")}}.</p>
+
+<p>Un ejemplo completo se vería así:</p>
+
+<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre>
+
+<h2 id="Aprendizaje_activo_Jugar_a_aplicar_estilos">Aprendizaje activo: Jugar a aplicar estilos</h2>
+
+<p>En esta sección de aprendizaje activo no proponemos ningún ejercicio específico: Simplemente nos gustaría que juegues con algunas propiedades de diseño de tipo de letra / texto, ¡y a ver qué consigues! Puedes hacer esto con archivos HTML/CSS sin conexión, o puedes introducir tu código en el ejemplo editable en vivo a continuación.</p>
+
+<p>Si te equivocas, puedes volver a empezar con el botón <em>Reinicio</em>.</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;p&gt;Some sample text for your delight&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;p {
+
+  }&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;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+const cssInput = document.querySelector(".css-input");
+const reset = document.getElementById("reset");
+let htmlCode = htmlInput.value;
+let cssCode = cssInput.value;
+const output = document.querySelector(".output");
+
+const styleElem = document.createElement('style');
+const 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();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esperamos que hayas disfrutado jugando con el texto en este artículo. El próximo artículo te enseñará todo lo que necesitas saber sobre la aplicación de estilos de lista en HTML.</p>
+
+<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "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">Aplicar estilo al texto base y tipos de letra</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicación de estilo a listas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicación de 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>
diff --git a/files/es/learn/css/styling_text/index.html b/files/es/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..a87012ec5c
--- /dev/null
+++ b/files/es/learn/css/styling_text/index.html
@@ -0,0 +1,57 @@
+---
+title: Estilo de texto
+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">Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS para concentrarse es estilizar texto — una de las cosas más comunes que hará con CSS. Aquí observamos los fundamentos para estilizar texto, incluyendo la configuración de fuente, negrita, cursiva, linea y espacios entre letras, sombras paralelas y otras funciones de texto. Completamos el módulo observando la aplicación de fuentes personalizadas en su página, y el diseño de listas y enlaces.</p>
+
+<h2 id="Requisitos_previos">Requisitos previos</h2>
+
+<p>Antes de iniciar este módulo, ya debe estár familizarizado con HTML, como se explica en el módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>, y sentirse cómodo con los fundamentos de CSS, como se explica en <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si está trabajando en una computadora/tableta/u otro dispositivo donde no tenga la capacidad de crear sus propios archivos, puede probar (la mayoría) de los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Este módulo contiene los siguientes artículos, los cuales le enseñarán todos los elementos esenciales detras del diseño de contenido de texto HTML.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Texto fundamental y estilo de fuente</a></dt>
+ <dd>En este artículo iremos a través de todos los aspectos básicos del estilo de texto/fuente en detalle, incluyendo configuraciones del peso de la fuente, la familia y el estilo, taquigrafía de fuente, alineación de texto y otros efectos, línea y espaciado de letras.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Estilos de listas</a></dt>
+ <dd>Las listas, en su mayor parte, se comportan como cualquier otro texto, pero hay algunas propiedades de CSS específicas para las listas que debe conocer, y algunas de las mejores prácticas para tener en cuenta. Este artículo explica todo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Estilos de enlaces</a></dt>
+ <dd>Al diseñar enlaces, es importante comprender cómo hacer uso de pseudo-clases para diseñar estados de enlaces de manera efectiva, y cómo diseñar enlaces para su uso en características de interfaces variadas comunes tales como menús de navegación y pestañas. Veremos todos estos temas en este artículo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Fuentes web</a></dt>
+ <dd>Aquí exploraremos las fuentes web en detalle — estas permiten descargar fuentes personalizadas junto con su página web, para permitir un estilo de texto más variado y personalizado.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>Las siguientes evaluaciones pondrán a prueba su comprensión de las técnicas del diseño de texto cubiertas en las guías anteriores.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribiendo una página de inicio para la comunidad de la escuela</a></dt>
+ <dd>En esta evaluación, pondremos a prueba su comprensión del estilo del texto haciendo que redacte el texto de la página principal de la escuela comunitaria.</dd>
+</dl>
diff --git a/files/es/learn/css/styling_text/styling_links/index.html b/files/es/learn/css/styling_text/styling_links/index.html
new file mode 100644
index 0000000000..b5180d51df
--- /dev/null
+++ b/files/es/learn/css/styling_text/styling_links/index.html
@@ -0,0 +1,434 @@
+---
+title: Dar estilo a los enlaces
+slug: Learn/CSS/Styling_text/Styling_links
+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">A la hora de dar estilo a los <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">enlaces</a>, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en este artículo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), conocimientos básicos de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">nociones de aplicación de estilo con CSS a textos y tipos de letra</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a dar formato a los estados de un enlace y a usarlos de manera efectiva en algunas funciones de interfaz de usuario comunes, como los menús de navegación.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Echemos_un_vistazo_a_algunos_enlaces">Echemos un vistazo a algunos enlaces</h2>
+
+<p>Analizamos cómo se implementan los enlaces en tu HTML de acuerdo con las buenas prácticas de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Creación de hipervínculos</a>. En este artículo desarrollaremos estos conocimientos y te mostraremos las buenas prácticas del diseño de enlaces.</p>
+
+<h3 id="Los_estados_de_un_enlace">Los estados de un enlace</h3>
+
+<p>Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">pseudoclases</a>):</p>
+
+<ul>
+ <li><strong>Link (no visitado)</strong>: El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase {{cssxref(":link")}}.</li>
+ <li><strong>Visited</strong>: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase {{cssxref(":visited")}}.</li>
+ <li><strong>Hover</strong>: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase {{cssxref(":hover")}}.</li>
+ <li><strong>Focus</strong>: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla <kbd>Tab</kbd> del teclado o se le da el foco mediante programación usando {{domxref("HTMLElement.focus()")}}); se le aplica un formato diferente con la pseudoclase {{cssxref(":focus")}}.</li>
+ <li><strong>Active</strong>: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase {{cssxref(":active")}}.</li>
+</ul>
+
+<h3 id="Estilos_predeterminados">Estilos predeterminados</h3>
+
+<p>El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el CSS simplemente amplía y centra el texto para que destaque más).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="#"&gt;Un enlace simple&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">p {
+  font-size: 2rem;
+  text-align: center;
+}</pre>
+
+<p>{{ EmbedLiveSample('Estilos_predeterminados', '100%', 120) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo <code>#</code> (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). <code>#</code> solo establece enlaces dentro de la misma página.</p>
+</div>
+
+<p>A medida que explores los estilos predeterminados, observarás algunas cosas:</p>
+
+<ul>
+ <li>Los enlaces están subrayados.</li>
+ <li>Los enlaces no visitados se ven de color azul.</li>
+ <li>Los enlaces visitados se ven de color morado.</li>
+ <li>Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.</li>
+ <li>Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción <em>Acceso total por teclado: Todos los controles</em> presionando <kbd>Ctrl</kbd> + <kbd>F7</kbd> para que funcione).</li>
+ <li>Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).</li>
+</ul>
+
+<p>Curiosamente, estos estilos predeterminados son casi los mismos que se utilizaban al inicio de los navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:</p>
+
+<ul>
+ <li>Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.</li>
+ <li>Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.</li>
+</ul>
+
+<p>Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes:</p>
+
+<ul>
+ <li>{{cssxref("color")}} para el color del texto.</li>
+ <li>{{cssxref("cursor")}} para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).</li>
+ <li>{{cssxref("outline")}} para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!</p>
+</div>
+
+<h3 id="Dar_formato_a_algunos_enlaces">Dar formato a algunos enlaces</h3>
+
+<p>Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos de enlace.</p>
+
+<p>Para empezar, escribiremos nuestro conjunto de reglas vacío:</p>
+
+<pre class="brush: css notranslate">a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}</pre>
+
+<p>Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p>
+
+<p>Ahora vamos a añadir algo más de información para darles formato:</p>
+
+<pre class="brush: css notranslate">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>También proporcionaremos algún ejemplo de HTML al que aplicar CSS:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Dispones de varios navegadores, como &lt;a href="#"&gt;Mozilla
+Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt; y
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Poner los dos juntos nos da este resultado:</p>
+
+<p>{{ EmbedLiveSample('Dar_formato_a_algunos_enlaces', '100%', 150) }}</p>
+
+<p>¿Qué hemos hecho aquí? Sin duda tiene un aspecto diferente al estilo predeterminado, pero todavía ofrece una experiencia lo suficientemente familiar como para que los usuarios sepan de qué se trata:</p>
+
+<ul>
+ <li>Las dos primeras reglas no presentan gran interés en esta explicación.</li>
+ <li>La tercera regla usa el selector <code>a</code> para eliminar el subrayado de texto predeterminado y el contorno en el estado de foco (que de todos modos varía dependiendo del navegador), y añade una pequeña cantidad de área de relleno a cada enlace (todo esto se aclarará más adelante).</li>
+ <li>A continuación, utilizamos los selectores <code>a:link</code> y <code>a:visited</code> para establecer un par de variaciones de color en los enlaces no visitados y visitados, para que se distingan.</li>
+ <li>Las dos reglas siguientes usan <code>a:focus</code> y <code>a:hover</code> para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado para que el enlace destaque aún más. Aquí destacamos dos aspectos:
+  <ul>
+   <li>El subrayado se ha creado usando {{cssxref("border-bottom")}} y no {{cssxref("text-decoration")}}, y es que algunas personas lo prefieren porque el primero tiene mejores opciones en cuanto a estilo, y se dibuja un poco más abajo, por lo que no pisa los trazos descendentes de la palabra que se subraya (por ejemplo, los trazos de la g o la y).</li>
+   <li>El valor {{cssxref ("border-bottom")}} se ha establecido en <code>1px solid</code> sin especificar ningún color. Así, el borde adopta el mismo color que el texto del elemento, lo que es útil en casos en los que el texto es de un color diferente en cada caso.</li>
+  </ul>
+ </li>
+ <li>Finalmente, <code>a:active</code> se usa para dar a los enlaces un esquema de color inverso mientras se activan, ¡para dejar claro que algo importante sucede!</li>
+</ul>
+
+<h3 id="Aprendizaje_activo_proporciona_estilo_a_tus_enlaces">Aprendizaje activo: proporciona estilo a tus enlaces</h3>
+
+<p>En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de reglas vacías y añadas tus propias declaraciones para lograr unos enlaces geniales. Da rienda suelta a tu imaginación. Estamos seguros de que puedes crear algo genial y tan funcional como nuestro ejemplo anterior.</p>
+
+<p>Si te equivocas, puedes volver a empezar pulsando el botón <em>Reinicio</em>. Si te quedas encallado, pulsa el botón <em>Mostrar la solución</em> para recuperar el ejemplo anterior.</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;Entrada de HTML&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; Hay varios navegadores disponibles, tales como &lt;a href="#"&gt;Mozilla
+ Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt; y
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Entrada CSS&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;Salida&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="Reinicio" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Mostrar la solución" 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 = '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="Incluir_iconos_en_los_enlaces">Incluir iconos en los enlaces</h2>
+
+<p>Una práctica común es incluir iconos en los enlaces para proporcionar más de un indicador en cuanto a qué tipo de contenido apunta. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos <a href="https://icons8.com/web-app/741/external-link">este fantástico ejemplo de icons8.com</a>.</p>
+
+<p>Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Para obtener más información sobre el tiempo, visite nuestra &lt;a href="http://#"&gt;página del tiempo&lt;/a&gt;,
+mire la &lt;a href="http://#"&gt;Wikipedia&lt;/a&gt;, o cheque
+&lt;a href="http://#"&gt;Extreme Science&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>A continuación, el CSS:</p>
+
+<pre class="brush: css notranslate">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('Incluir_iconos_en_los_enlaces', '100%', 150) }}</p>
+
+<p>¿Qué pasa aquí? Omitiremos la mayor parte del CSS, ya que es la misma información que has visto antes. Sin embargo, la última regla es interesante: insertamos una imagen de fondo personalizada en enlaces externos de una manera similar a como manejamos <a href="/es/docs/Learn/CSS/Styling_text/Styling_lists#Uso_de_una_imagen_personalizada_como_vi%C3%B1eta">viñetas personalizadas en los elementos de lista</a> en el último artículo. Esta vez, sin embargo, utilizamos la propiedad abreviada {{cssxref("background")}} en lugar de las propiedades individuales. Establecemos la ruta a la imagen que queremos insertar, especificamos el valor <code>no-repeat</code> para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.</p>
+
+<p>También usamos {{cssxref("background-size")}} para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo). Sin embargo, esto solo funciona con Internet Explorer 9 y versiones posteriores, por lo que si trabajas con navegadores antiguos, tendrás que cambiar el tamaño de la imagen e insertarla tal como es.</p>
+
+<p>Finalmente, establecemos un área de relleno a la derecha ({{cssxref ("padding-right")}}) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.</p>
+
+<p>Un último apunte: ¿cómo seleccionamos solo los enlaces externos? Bueno, si escribes tus enlaces <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">HTML</a> de forma adecuada, solo deberías usar URL absolutos para los enlaces externos. Para enlazar con otras partes del mismo sitio web, resulta más eficiente usar enlaces relativos. Por lo tanto, el texto «http» solo debe aparecer en los enlaces externos y es posible seleccionarlos con un <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS#Selectores_de_atributo">selector de atributos</a>: <code>a[href*="http"]</code> selecciona los elementos {{HTMLElement ( "a")}}, pero solo si tienen un atributo {{htmlattrxref("href","a")}} con un valor que contiene «http» en algún lugar de su contenido textual.</p>
+
+<p>Eso es todo. Vuelve a la sección de aprendizaje activo anterior ¡y prueba esta nueva técnica!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: No te preocupes si aún no estás familiarizado con los <a href="/es/docs/Learn/CSS/Building_blocks">fondos</a> y el <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">diseño web adaptativo</a>, lo explicaremos en otros artículos.</p>
+</div>
+
+<h2 id="Dar_aspecto_de_botón_a_un_enlace">Dar aspecto de botón a un enlace</h2>
+
+<p>Las herramientas que has explorado hasta ahora en este artículo también se pueden usar de otras maneras. Por ejemplo, los estados como <code>hover</code> se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.</p>
+
+<p>Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias: el menú de navegación de un sitio web generalmente está marcado como una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones de control o pestañas que proporcionan al usuario acceso a otras partes del sitio web. Vamos a ver cómo.</p>
+
+<p>En primer lugar, un poco de HTML:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Inicio&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;Música&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;Finlandia&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Y ahora nuestro CSS:</p>
+
+<pre class="brush: css notranslate">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>Esto nos da el resultado siguiente:</p>
+
+<p>{{ EmbedLiveSample('Dar_aspecto_de_botón_a_un_enlace', '100%', 100) }}</p>
+
+<p>Vamos a explicar qué pasa aquí, y nos vamos a centrar en los aspectos más interesantes:</p>
+
+<ul>
+ <li>Nuestra segunda regla elimina el área de relleno ({{cssxref ("padding")}}) predeterminada del elemento {{htmlelement ("ul")}} y establece un ancho para abarcar el 100% del contenedor externo (el {{htmlelement ("body")}}, en este caso).</li>
+ <li>Los elementos {{htmlelement ("li")}} por defecto suelen ser elementos de bloque (repasa los <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">tipos de cajas CSS</a>), lo que significa que ocupan sus propias líneas. En este caso, creamos una lista de enlaces horizontal, para lo que en la tercera regla establecemos la propiedad {{cssxref ("display")}} en el valor <code>inline</code>, que ubica todos los elementos de la lista sobre la misma línea porque ahora se comportan como elementos de línea.</li>
+ <li>La cuarta regla (que da formato al elemento {{htmlelement("a")}}) es la más complicada. Vamos a verla paso a paso:
+  <ul>
+   <li>Como en los ejemplos anteriores, comenzamos por desactivar las propiedades predeterminadas {{cssxref ("text-decoration")}} y {{cssxref ("outline")}}, ya que no queremos que estropeen nuestro aspecto.</li>
+   <li>A continuación, configuramos la propiedad {{cssxref ("display")}} en el valor <code>inline-block</code>: los elementos {{htmlelement ("a")}} se muestran en línea de forma predeterminada y, aunque no queremos que ocupe más de una línea, como haría un valor de <code>block</code>, queremos poderlos dimensionar: <code>inline-block</code> nos permite hacerlo.</li>
+   <li>Ahora nos centramos en el tamaño. Queremos llenar todo el ancho del elemento de lista {{htmlelement ("ul")}} y dejar un pequeño margen entre cada botón (pero ningún hueco en el borde derecho), y queremos los 5 botones del mismo tamaño. Para hacer esto, establecemos el atributo {{cssxref ("width")}} en 19,5%, y el atributo {{cssxref ("margin-right")}} en 0,625%. Observa que el ancho completo suma 100,625%, lo que haría caer el último botón <code>&lt;ul&gt;</code> a la siguiente línea por desbordamiento. Sin embargo, lo restituimos al 100% con la siguiente regla, que selecciona solo el último elemento <code>&lt;a&gt;</code> de la lista y elimina de él el margen. ¡Hecho!</li>
+   <li>Las tres últimas declaraciones son bastante sencillas y tienen principalmente finalidades estéticas. Centramos el texto dentro de cada enlace, establecemos {{cssxref ("line-height")}} en 3 para dar algo de altura a los botones (lo que también presenta la ventaja de centrar verticalmente el texto), y establecemos el color del texto a negro.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Combatir los espacios entre elementos de bloque colocados en línea</a>.</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esperamos que este artículo te haya proporcionado todo lo que necesitas saber acerca de los enlaces... ¡por ahora! En el artículo final de nuestro módulo de aplicar estilo al texto detallaremos cómo usar tipos de letra personalizados para sitios web (o tipos de letra para web, como se les conoce comúnmente).</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "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">Composición tipográfica de una página de inicio de una escuela comunitaria</a></li>
+</ul>
diff --git a/files/es/learn/css/styling_text/styling_lists/index.html b/files/es/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..eeb395313b
--- /dev/null
+++ b/files/es/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,392 @@
+---
+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" style="display: none;"> </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>