Lo básico de CSS

Para este capítulo, no vamos a utilizar Simple.css en nuestro sitio. Vamos a escribir nuestros propios estilos y para ello, Voy a utilizar una página simple como ejemplo. Puede aplicar aquello que ha aprendido aquí a su Simple.css. Pero para este capítulo, quiero mostrarle desde cero cómo darle un estilo paso a paso a un sitio web.

Veremos de manera específica cómo darle estilo a los elementos tipográficos, es decir el texto para hacerlo más agradable y que la página se pueda leer de manera fluida. Pero CSS puede hacer mucho más. Es una herramienta muy potente. Si este capítulo le da alguna idea, le animo a que explore CSS más allá de lo que trataremos en este capítulo.

Presentación de los planetas del sistema solar

He creado esta sencilla página HTML que utiliza un puñado de elementos tipográficos y presenta un buen punto de partida para aplicar estilos. Puede usar cualquier contenido que quiera si tiene algo en mente para seguir los ejemplos que veamos a continuación. Pero también puede usar la misma página HTML que usaré yo.

Puede ver el código fuente en su navegador con el comando de ver el código fuente o echando un vistazo al código hospedado en GitLab. Y puede ver el resultado final aquí si quiere echar un vistazo del resultado final.

Esta página presenta los planetas del sistema solar y le da una breve información sobre cada uno de ellos. Es muy simple y básica a propósito. Es un texto sin mucha pretensión, ya que servirá de ejemplo para aplicar ciertos estilos, pero la infromación dada es correcta hasta donde yo sé.

Punto de partida

En nuestra web de pruebas he creado un archivo llamado sistema_solar.html y he añadido el siguiente código dentro. Y he creado un nuevo archivo de estilos css que será el que vamos a utilizar en este apartado de pruebas para la página del sistema solar. En el archivo se asume que tiene el archivo de estilos styles.css en el directorio css. También se asume que tiene la imagen, PIA06193~medium.jpg, en el directorio imagenes junto con las imágenes que hemos utilizado en la web. Puede obtener esa imagen desde el sitio web de la NASA.

Expandir para ver el código HTML completo
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Planetas del sistema solar</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <main>
      <h1>Planetas del sistema solar</h1>

      <p class="intro"><span class="caps">Nuestro sistema solar</span> es un lugar enorme y fascinante, que consta del sol y diversos cuerpos celestes que orbitan alrededor, incluyendo los 8 planetas mayores. Cada planeta tiene unas características únicas. En este artículo, vamos a explorar los atributos distintivos de cada planeta, ofreciendo un resumen de qué les hace únicos (y aprender un poco sobre <abbr title="siglas en inglés de Cascading Style Sheets; en español: «hojas de estilo en cascada">CSS</abbr> mientras lo hacemos).</p>

      <h2>Mercurio</h2>
      <p>
        Mercurio es el planeta mas próximo al sol y el más pequeño en nuestro sistema solar. Tiene una atmósfera muy fina y su superficie está cuviera de cráteres.
      </p>

      <h2>Venus</h2>
      <p>
        Venus es el seguno planetacercano al sol y es conocido por su espesa atmósfera tóxica y las temperaturas extremas en su superficie. A menudo es llamado como "la hermana de la tierra" por su tamaño similar y composición.
      </p>

      <h2>La tierra</h2>
      <p>
        La tierra es el tercer planeta cercano al sol y el único planeta en albergar vida. Tiene un clima diverso en su superficie, con grandes ríos, montañas y bosques.
      </p>
      <blockquote>
        <p>
          La Tierra es un escenario muy pequeño en una vasta arena cósmica. Piensa en los ríos de sangre derramados por todos aquellos generales y emperadores, de modo que en gloria y triunfo, podrían convertirse en los amos momentáneos de una fracción de un punto.
        </p>
        <cite>— Carl Sagan</cite>
      </blockquote>

      <h2>Marte</h2>
      <p>
        Marte es el cuarto planeta desde el sol, a menudo es llamado "el planeta rojo" debido a su apariencia rojiza. Tiene los mayores volcanes y cañones del sistema solar.
      </p>

      <h2>Júpiter</h2>
      <p>
        Júpiter es el quito planeta y el mayor del sistema solar. Tiene un gran punto rojo que es una gigantesca tormenta y una docena de lunas.
      </p>

      <h2>Saturno</h2>
      <p>
        Saturno, es el sexto planeta desde el sol, es famoso por su gran sistema de anillos que orbitan a su alrededor. Es el segundo planeta más grande del sistema solar.
      </p>

      <figure>
        <img src="imagenes/PIA06193~medium.jpg" alt="Este gran mosaico consta de 126 imágenes adquiridas en forma de mosaico, cubriendo un extremo de los anillos de Saturno al otro y todo el planeta en el medio.">

        <figcaption>
          Fuente: <a href="https://images.nasa.gov/details/PIA11141">https://images.nasa.gov/details/PIA11141</a>
        </figcaption>
      </figure>

      <h2>Urano</h2>
      <p>
        Urano es el séptimo planeta del sistema solar y tiene un color azul verdoso único debido al metano en su atmósfera.  is the seventh planet from the Sun and has a unique blue-green
        color due to methane in its atmosphere. Gira de lado, haciéndolo único entre los planetas.
      </p>

      <h2>Neptuno</h2>
      <p>
        Neptuno es el octavo planeta y el planeta más lejano del sol en nuestro sistema solar. Es conocido por su color azul intenso y por fuertes vientos, algunos de los más rápido del sistema solar.
      </p>

      <h2>Recursos adicionles</h2>
      <p>
        Para más información sobre los planetas, visite 
        <a href="https://solarsystem.nasa.gov/planets/overview/"
          >NASA Solar System Exploration</a
        >
        website.
      </p>

      <h2>Otros cuerpos celestes mayores</h2>
      <ul>
        <li>Plutón</li>
        <li>Ceres</li>
        <li>Haumea</li>
        <li>Makemake</li>
        <li>Eris</li>
        <li>Ganímedes</li>
        <li>Titán</li>
        <li>Europa</li>
      </ul>

      <h2>Código de ejemplo</h2>
      <pre><code>function getPlanetInfo(planet) {
    const planets = {
        Mercurio: 'El planeta más pequeño y cercano al sol.',
        Venus: 'Conocido por su atmósfera gruesa y tóxica.',
        La tierra: 'El único planeta conocido que admite vida.',
        Marte: 'El planeta rojo con el volcán más grande.',
        Júpiter: 'El planeta más grande con un gran punto rojo.',
        Saturno: 'Famoso por su sistemas de anillos.',
        Urano: 'Único por su rotación lateral.',
        Neptuno: 'Conocido por su color azul profundo y sus fuertes vientos.'
    };
    return planets[planet] || 'Planeta no encontrado';

}</code></pre>
</main>

    <footer>
      <p>
        Sitio web de prueba para aprender CSS. Parte de <a href="https://victorhck.gitlab.io/htmlparapersonas/">HTML para personas</a> por <a href="https://victorhckinthefreeworld.com/">Victorhck</a>. Eche un vistazo <a href="https://gitlab.com/victorhck/htmlparapersonas">al código fuente en GitLab</a>.
      </p>

  </body>
</html>

Como el archivo styles.css está vacío, tendremos únicamente los estilos predeterminados del navegador. Este es el aspecto que tendría:

Captura de pantalla de un navegador mostrando una página web llamada, "Planetas del sistema solar." Cada planeta tiene una breve descripción resaltando sus caracterísiticas únicas. La página utiliza solo el estilo del navegador predeterminado y está por completo sin estilo.

El viejo Times New Roman y líneas de texto que ocupan todo el ancho de la ventana del navegador. No se ve muy bien, pero tiene algo agradable y pintoresco. Y, lo que es más importante, no está roto. Muchos sitios están exagerados con diseños extravagantes, megabytes de imágenes y JavaScript, y comportamientos hostiles para el usuario (ya sabe, como, "Veo que solo ha leído dos frases de este artículo, pero sé que debe estar muriendo por suscribirse a mi boletín, así que déjeme mostrarle esta ventana emergente gigante de aquí").

Así que vamos a imaginarnos a nosotros mismos como una especie de médicos web. Primero, no haremos ningún daño. Mejoraremos la legibilidad de la página y la haremos bonita (bueno, lo que yo creo que es bonito, de todos modos, siéntase libre de divergir y agregar sus propios estilos a medida que avanzamos). Pero nos abstendremos de hacer algo tan drástico que haga que la página sea más difícil de leer de lo que es ahora.

La etiqueta estilo

Podemos escribir el código CSS directamente en nuestro archivo html utilizando la etiqueta HTML especial, <style>. Podemos poner la etiqueta <style> dentro de la sección <head> en nuestro fichero, así:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi sitio web</title>
    <meta charset="utf-8">

    <style>
      el código CSS iría aquí
    </style>
  </head>

  <body>
    ...
  </body>
</html>

Esto es perfectamente válido, pero si tiene más de una página en su sitio web, debería copiar y pegar el contenido de la etiqueta <style> en cada página para tener el mismo estilo en cada página. En vez de eso, lo más común es poner todo el código CSS en un archivo separado como hemos venido viendo hasta ahora y después enlazarlo mediante la etiqueta <link> en cada página de la sección <head> de su sitio web.

<link rel="stylesheet" href="styles.css">

Primeros pasos para mejorar la página

En mi caso crearé un archivo llamado styles.css. Y es en ese archivo donde escribiré todo mi CSS personalizado desde cero. En el código HTML deberemos incluir una etiqueta <link> en la sección <head> para enlazar ese estilo a la página, como hemos visto anteriormente.

Podemos conseguir grandes mejoras con únicamente un par de líneas de CSS. Por ejemplo, uno de los problemas es que la página es demasiado de ancha en la ventana del navegador en nuestro equipo de escritorio. Las líneas largas son difíciles de leer. Vamos a solucionar eso dándole a la página un máximo de anchura. De acuerdo con Butterick’s Practical Typography, deberíamos ser capaces de meter entre uno y dos alfabetos en una única línea. En mi caso voy a configurar el ancho a 65 caracteres.

main {
  max-width: 65ch;
}

Esta regla CSS se refiere al elemento <main> de nuestra página y le obliga a no exceder nunca del ancho establecido.

Ignorando la imagen enorme de Saturno, que en un momento nos pondremos con ella, ahora tiene otro aspecto y ya ha mejorado bastante. Pero la tendencia actual es preferir el texto centrado en la página, así que vamos a establecer eso ahora mismo.

main {
  margin-inline: auto;
  max-width: 65ch;
}

En los idiomas que leemos de izquierda a derecha como el Español, margin-inline es el margen horizontal, o izquierdo y derecho. Estableciéndolo a auto, le estamos diciendo, "no me importa cómo son de anchos los mágenes izquierdo y derecho, simplemente haz que sean iguales." El navegador conoce cómo queremos que sea de ancha la página, así que calculará el margen necesario para que sean iguales en ambos lados, centrando el texto.

También tenemos un elemento <footer> que reside fuera del elemento <main>, así que vamos a darle un estilo separado con el mismo ancho y el mismo margen.

footer {
  margin-inline: auto;
  max-width: 65ch;
}

Y continuando con esto, vamos a hacer que la imagen de Saturno no sobresalga de la página.

img {
  max-width: 100%;
}

El código max-width puede ser entendido como un porcentage de su elemento que contiene. Estableciéndolo al 100% significa, "No dejes que las imágenes del elemento sean mayores que sus contenedores".”

Y ahora nuestra página ya tiene un aspecto mucho más agradable.

La misma página que la captura anterior, pero ahora el texto está centrado y tiene una anchura más adecuada que lo hace más sencillo de leer.

Anatomía de una regla CSS

Eche un vistazo a una de las reglas que hemos visto. Esta regla limita el ancho de las imágenes al ancho de sus contenedores.

img {
  max-width: 100%;
}

Vamos a diseccionar el comando en dos partes. Primero, especificamos a qué elementos de la página va a afectar. Esa es la parte que va antes de las llaves ({}). A eso se le llama el selector porque selecciona los elementos en la página que van a verse afectados.

La parte dentro de las llaves es donde vamos a poner las propiedades que queremos cambiar. Cada declaración consiste de una propiedad y un valor. En este caso hay una declaración. La propiedad es el ancho max-width, y el valor es 100%.

Tamaño del texto, altura de las líneas y espaciado entre los elementos

El tamaño predeterminado de la fuente es un poco pequeño. Modificaré todo el elemento html (es decir, el documento entero) para establecer el tamaño de la fuente font-size y la altura de la línea line-height.

html {
  font-size: 20px;
  line-height: 1.45;
}

Una de las unidades que podemos utilizar para dar el tamaño de las cosas es la unidad del pixel, px. Acabo de aprender que 1px equivale a 1/96 de pulgada (aunque eso varía con la densidad de píxeles del monitor). ¡Vaya! Nunca deja uno de aprender.

Hay muchas maneras de establecer el tamaño del texto. Veremos algunas formas más en un momento.

Estableceré la altura de línea line-height utilizando un valor sin unidades de 1.45. Este es un número que parece estar bien. Consulte Butterick’s Practical Typography y tu propio gusto para encontrar una altura aceptable que especificar para tu fuente. Estoy utilizando un número sin unidades en vez de algo como píxeles px debido a cómo los elementos secundarios heredarán dicho valor, pero por ahora no es necesario que se preocupe mucho sobre esto.

Continuando, me gustaría asegurar que los elementos tienen un espaciado igual entre ellos. Apuntaré a todo lo que esté dentro del elemento <main> utilizando un selector universal, el asterisco (*).

main * {
  margin-block-start: 0;
  margin-block-end: 1rem;
  /* o podríamos utilizar la sintaxis acortada de la siguiente manera */
  margin-block: 0 1rem;
}

Un selector puede ser una cadena de elementos. Por ejemplo, main p selecciona cada elemento <p> dentro del elemento- <main>. Pero quiero apuntar a todo en el elemento <main> , así que utilizo el asterisco.

Estoy estableciendo el margen superior e inferior de cada elemento. De manera similar a margin-inline, que controla el espaciado horizontal entre los elementos, margin-block controla el espaciado vertical entre los elementos (en idiomas que se escriba y lea de izquierda a derecha). Estoy estableciendo el margen superior de los elementos a 0 y el margen inferior a 1rem. La unidad rem es equivalente al tamaño de la fuente del elemento root element (el elemento <html>). Como he establecido el tamaño de la fuente de root en 20px, ese será el valor que tomará 1rem.

Lo genial de la unidad rem es que, al permitirnos basar los valores en el tamaño de fuente del documento, hace que nuestros diseños se sientan más cohesivos.

El aspecto de nuestro texto ahora es más elegante.

La misma imagen que antes, pero ahora el texto es un poco más grande con un interlineado mayor.

No tengo nada en contra de la fuente Times New Roman, pero tiene un aspecto muy... de serie. Podemos mejorarlo y de paso aprender algo más.

Instalar fuentes tipográficas web

Puede utilizar una fuente, solo si las personas que visitan la web la tienen disponibles en sus dispositivos. Mientras que existen algunas fuentes del sistema comunes y fuentes predeterminadas comunes, tenemos otra opción para personalizar las fuentes tipográficas. Las fuentes web son aquellas que están disponibles siendo descargadas junto con la descarga de su sitio web. Además de el documento HTML, el archivos CSS, archivos JavaScript, imágenes y otros, las fuentes personalizadas también pueden ser descargadas.

Las fuentes web fonts necesitan estar en un formato específico, e instaladas de una cierta manera, a falta de un término mejor. a certain way, for lack of a better term. Lo normal, es que la gente utilice un servicio como Google Fonts (gratuito) o Adobe Fonts (de pago). Hay un montón de opciones, incluyendo alojar las fuentes en su propio servidor junto a los demás archivos del sitio web. Solo debe asegurarse de que la licencia lo permite.

Por simplicidad, utilizaremos un par de fuentes de Google Fonts. Diríjase a fonts.google.com. Busque por for “Oswald” y selecciónelo de entre los resultado. Después haga clic en Get font.

Captura de pantalla del sitio web Google Fonts mostrando la fuente "Oswald." El botón "Obtener fuente" está resaltado con una flecha roja. En el texto de prueba inferior se puede leer, "Whereas disregard and contempt for human rights have resulted." El menú del sitio está visible a la izquierda.

Después de seleccionarlo, no lo descargue todavía. Haga una búsqueda de “source sans.” Source Sans 3 es la versión disponible en el momento de escribir este artículo. Selecciónelo y haga clic en Get font.

Cuando tenga las dos fuentes seleccionadas, haga clic en Get the code. Estamos buscando el bloque etiquetado Embed code in the <head> of your html.

Captura de pantalla de la interfaz de Google Fonts mostrando los detalles de la fuente "Source Sans 3" . Hay un botón con el texto "Copiar código" dentro de un rectángulo que lo resalta que muestra el código HTML para insertar. La interfaz incluye opciones de estilo de la fuente e instrucciones de uso.

Copie y pegue el código en la sección <head> de su sitio web.

<head>
  <meta charset="UTF-8">
  <title>Planetas del sistema solar</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="styles.css">
</head>

En el archivo css añada una declaración font-family en el bloque html para comprobar que está funcionado. Guarde ambos documentos, el css y el html.

html {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 20px;
  line-height: 1.45;
}

Esto establecerá la fuente en todo el documento. El navegador primero intentará usar Source Sans 3. Si por cualquier razón, la fuente no está disponible (digamos por ejemplo que el sitio Google Fonts está caído), entonces sans-serif le dirá al navegador que utilice cualquier fuente de tipo sans-serif que esté disponible. Puede añadir otras fuentes de respaldo en font stack. Simplemente separe las opciones con comans, como ha visto en el ejemplo anterior.

Actualice la página, ¡y debería mostrarse la nueva fuente! Pero todavía vamos a mejorarlo un poco más integrando adecuadamente ambas fuentes.

Ajustando los colores y las variables

Si ha leído el capítulo Personalizando Simple.css, recordará que utilizaba variables CSS para controlar el color y las fuentes. Vamos a realizar eso mismo en nuestro ejemplo. Esto hará que sea más sencillo personalizar las cosas más adelante (que quizás quiera hacerlo una vez que aprenda y si no le gustan mis opciones).

:root {
  --text-color: #303036;
  --muted-text-color: #5e5e67;
  --heading-color: #cd2807;
  --link-color: #028090;
  --background-color: #fffdf7;

  --heading-font: 'Oswald', sans-serif;
  --body-font: 'Source Sans 3', sans-serif;
}

Puede nombrar las variables como quiera, siempre que comiencen con --. En el ejemplo anterior, estoy estableciendo varios colores y un par de fuentes.

Una vez que ha definido las variables, puede utilizarlas para aplicar esas fuentes y colores en el texto.

html {
  font-family: var(--body-font);
  font-size: 20px;
  line-height: 1.45;
  color: var(--text-color);
  background-color: var(--background-color);
}

Utilice la función var para utilizar las variables creadas.

El estilo de los encabezados

Estoy utilizando <h1> para el título de la página y <h2> para los subencabezados. Vamos a fijarnos en estos elementos y vamos a aplicarles un poco de estilo.

h1 {
  border-block-start: 10px solid var(--heading-color);
  margin-block-start: 4rem;
  margin-block-end: 2rem;
  font-family: var(--heading-font);
  font-weight: normal;
}

h2 {
  margin-block-start: 1.5rem;
  margin-block-end: 0.5rem;
  font-family: var(--heading-font);
  font-size: 1.2em;
  font-weight: normal;
  color: var(--heading-color);
}

Estoy haciendo varias cosas aquí. Estoy añadiendo un pequeño margen extra superior a los elementos <h2> y un poco de espacio extra sobre <h1>.

Me gusta el aspecto que tiene Oswald, la fuente que estoy utilizando para los encabezados, sin estar en negrita. Así que estoy estableciendo font-weight a normal en vez de bold, que es la opción predeterminada para los encabezados.

Para <h1>, mantengo el tamaño font-size predeterminado. Para <h2>, estoy estableciendo el tamño font-size a 1.2em, que es lo mismo que decir 1.2 veces el tamaño actual de la fuente.

Unos cuantos cambios en la tipografía han transformado nuestra página, y ahora tiene un aspecto totalmente diferente.

La página web titulada "Planetas del sistema solar" ha recibido una actualización en el diseño. La fuente ha sido cambiada y los colores de las funetes actualizados. El fondo también ha sufrido alguna actualización para completar los cambios realizados. El encabezado ahora tiene un borde superior en color rojo, La apariencia es más pulida y mejora diseñada.

Podríamos parar aquí. Ya todo parece que tiene buen aspecto. Pero vamos a seguir dando estilo a nuestro sitio modificando algunos elementos de los que todavía no hemos tocado.

Si está utilizando mi documento HTML, notará que existen algunas etiquetas <a> o hipervínculos o enlaces. Uno apunta a la fuente donde obtener la imagen de Saturno al sitio web de la NASA. Y los demás están en el pie de página.

Vamos a darles un poco de estilo. He escogido un color azul verdoso y vamos a configurarlo en una variable, como hemos aprendido antes.

:root {
  /* ... otro código ... */

  --link-color: #028090;

  /* ... otro código ... */
}

Utilizaré eso para establecer el color de todos los elementos <a>:

a {
  color: var(--link-color);
}

Estamos muy acostumbrados a relacionar un texto azul subrayado con un enlace en el que hacer clic, así que he decidido no desviarme mucho de ese patrón. Pero me gustaría añadir un pequeño efecto de hacer desaparecer el subrayado cuando el curso se pone encima del enlace.

Utilizaré el selector :hover pseudo-class pra conseguir ese efecto. Estos selectores se utilizan normalmente para dar estilo a elementos en diferente estados, por ejemplo en nuestro caso un enlace sobre el que el puntero del ratón pasa por encima.

a:hover {
  text-decoration: none;
}

La propiedad que queremos es text-decoration. De manera predeterminada, los enlaces tienen una decoración del texto text-decoration de un subrayado. Tiene algunas opciones en este enlace, pero voy a escoger none.

Esto nos da una sutil interacción con el enlace.

Abreviaturas

Sobre el tema de los efectos al pasar el ratón por encima de una parte del texto, hay uno del que quizá no se ha dado cuenta. Si echa un vistazo al código HTML de nuestra página de demostración en el primer párrafo, puede leer la siguiente frase.

En este artículo, vamos a explorar los atributos distintivos de cada planeta ofreciendo un resumen de qué los hace únicos (y aprender un poco de <abbr title="Cascading style sheets">CSS</abbr> mientras lo hacemos.

La etiqueta <abbr> ayuda a la persona que visite nuestra web a conocer qué significa cierta abreviatura o acrónimo que usemos en nuestro texto. Cuando pasa el puntero del ratón por encima del texto CSS en la página, verá un pequeño recuadro que mostrará una ayuda útil mostrando a qué se refiere. Ponga la abreviatura dentro de las etiquetas, después utilice el atributo title para el texto completo.

Vamos a dar un poco de decoración de texto text-decoration para dar pistas al visitante de que puede interactuar con ese elemento.

abbr {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--heading-color);
  text-decoration-thickness: 2px;
}

Le estamos dando un subrayado, similar al que tienen los enlaces. Pero haremos que tenga un color rojizo similar al que utilizamos en los encabezados y utilizaremos en estilo punteado o dotted para ayudar a diferenciarlo de un enlace. He decidido incrementar el grosor un poco, para hacerlo más fácil de ver.

Bloque de citas

No puedo dejar pasar la oportunidad de compartir una cita de Carl Sagan en un artículo sobre el sistema solar, incluso como en este caso que solo es un artículo de prueba. Así que incluiré un extracto épico de en esta sección sobre la tierra.

Tiene buen aspecto tal como se ve, tiene una sangría mayor y tiene el aspecto de una cita. Pero sin duda podemos mejorarlo. Priemero le enseñaré el código y después le explicaré qué estoy haciendo.

blockquote {
  margin-inline: 1.5rem 0;
  border-inline-start: 4px solid var(--heading-color);
  padding-inline: 1rem;
  font-size: 0.9rem;
  color: var(--muted-text-color);
}

Quiero controlar la sangría y hacerla más coherente basándola en el tamaño de la fuente del documento. En los idiomas en los que se lee y escribe de izquierda a derecha, margin-inline controla los márgenes izquierdo y derecho. Estoy proporcionando dos valores, 1.5rem y 0, para especificar los márgenes izquierdo y derecho, respectivamente. El margen izquierdo será 1.5 veces el tamaño de la fuente del documento, y eliminaré el margen derecho por completo.

Un diseño muy común que se suele hacer al elemento de <citas> es element is darle un borde en el margen izquierdo para que resalte. No veo razón para no hacerlo en este camso también, así que crearemos un borde por el lado izquierdo utilizando border-inline-start. Recuerde, inline se refiere al eje horizontal. Y start significa el primero (que para mí es el lado izquierdo; end debería ser el lado derecho).

Lo estableceré para que sea una línea con relleno y con un ancho de 4px y que utilice el color de los encabezados, que hemos establecido como el color principal de nuestra paleta.

Pero tenemos un problema. Si lo dejamos aquí, tendremos un borde que choca contra el texto. Vaya, eso no está bien.

Imagen que contiene un texto que ofrece una breve descripción de la tierra, incluyendo containing text that provides a brief description of Earth, incluyendo un bloque de cita de Carl Sagan mal estilizado en el que el borde izquierdo toca el texto.

Afortunadamente podemos solucionar esto añadiendo espaciado con padding. Le daré una pequeña explicación sobre el modelo de caja. Cada elemento tiene un espacio por fuera de él (margen), un espacio alrededor por dentro (padding o relleno) y una capa opcionar que separa las dos (el borde).

Con estos datos, vamos a añadir un poco de espacio dentro del elemento, que alejará el contenido del borde. Vamos a establecer ese espacio por la izquierda y derecha el mismo para los dos configurando padding-inline a un valor de 1rem, que es el equivalente al tamaño de fuente del documento.

Finalmente, haremos que el tamaño de la fuente sea ligeramente más pequeño y el color del texto un poco más claro. El resultado final es un bloque de cita con un buen aspecto y buen diseño.

La misma imagen del bloque de cita anterior, pero ahora espaciando entre el borde y el texto es mayor el tamaño de la fuente se ha reducido un poco y el color del texto se ha modificado sutilmente para que sea un poco más claro, casi gris.

Diseñé este estilo de bloque de cita para que se adaptara a la mayoría de los casos de uso, pero podría ir en otra dirección: por ejemplo con un texto grande en cursiva, por ejemplo.

Listas

Vayamos ahora a modificar un poco las listas sin orden, que en nuestro caso muestra Plutón y otros elementos del sistema solar. Vamos a dar a la lista un poco de sangria, como es común en las listas. Recuerde, HTML también posee listas numeradas. No estamos utilizando de ese tipo en nuestra página (si está utilizando mi ejemplo de HTML), pero podríamos también escribir el estilo para ambos tipos de listas.

Ya sabe que el selector apunta a los elementos a los que queremos darles un estilo. Pero también pueden tener múltiples selectores. Podemos apuntar al elemento <ul> y al elemento <ol> y darles a ambos la misma sangría haciendo lo siguiente.

ul, ol {
  padding-inline-start: 1.5rem;
}

Ha añadido múltiples selectores separándolos con una coma. Esto crea una lista selector. El espaciado que estamos utilizando para conseguir dicha sangría del texto será aplicado tanto a listas sin orden (las que detallan cada elemento con un pequeño punto) y listas ordenadas (cada elemento va precedido de un número).

También vamos a ajustar el espaciado entre cada elemento de la lista (elementos <li>). Me gusta usar el espaciado de la mitad de lo que estoy usando para los párrafos porque quiero que los elementos de la lista estén más juntos que los párrafos, pero aún con un poco de espacio entre ellos. Como utilicé 1rem para el espaciado de mis párrafos y otros elementos, utilizaré la mitad de eso, 0.5rem, para el margen inferior.

li {
  margin-block: 0 0.5rem;
}

Recuerde, margin-block es el margen superior e inferior en idiomas como el español que se lee y escribe de derecha a izquierda. Podemos establecer ambos valores al mismo tiempo. El superior es equivalente a:

li {
  margin-block-start: 0;
  margin-block-end: 0.5rem;
}

Esto significa, para los idiomas que se escribe y lee de izquierda a derecha, que el margen por encima del elemento de la lista es cero y el margen por debajo es de unos diez píxeles (0.5rem significa 0.5 veces el tamao de la fuente de root element, que nosostros definimos como 20px).

El espaciado debería verse bastante bien ahora, pero hagamos algo que pondría celosos a los diseñadores web de la década de 2000. Cambiemos el color de los puntos que preceden cada elemento. En aquella época esto solía ser complicado, pero ahora es sencillo.

li::marker {
  color: var(--heading-color);
}

El código ::marker es llamado un pseudo-elemento porque representa una pieza de un elemento HTML. Dicho ::marker es parte del elemento de la lista o elemento <li>. Contiene un punto (o número) del elemento de la lista. Podemos apuntarlo con nuestro selector y cambiar el color a nuestro color de encabezado rojo.

Captura de pantalla de una lista en la que cada elemento tiene un pequeo punto delante. La lista se titula "Otros cuerpos celestes" que incluye los elementos Plutón, Ceres, Haumea, Makemake, Eris, Ganímendes, Titán y Europa. Tiene más espacioado entre los elementos de la lista, haciendola sencilla de leer. Los puntos iniciales son rojos, mientras que el texto tiene el mismo color oscuro del texto.

¡Tiene un aspecto genial!

Texto preformateado

La mayoría de las veces, en nuestros documentos HTML, no nos preocupamos por preservar el espaciado exacto de todo. De hecho, eso sería contraproducente, ya que normalmente sangramos HTML o incluimos líneas vacías para que el código sea más legible. Pero a veces, queremos mostrar el texto exactamente como está formateado. Algunos ejemplos son el arte ASCII y el código informático.

Normalmente mostramos este tipo de texto con la etiqueta <pre> en HTML. Preserva todo el espaciado y utiliza una fuente monoespaciada para darle un aspecto consistente. A menudo es combinado con la etiqueta <code> para señalar que el texto es código de algún lenguaje de programación He eincluido código en JavaScript relacionado de alguna forma con los planetas simplemente como ejemplo.

Vamos a darle estilo a la etiqueta <pre> de la siguiente manera.

pre {
  padding: 1rem;
  background-color: #edebe7;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.75rem;
}

Queremos que el código aparezca como si estuviera dentro de un contenedor, por lo que proporcionaremos relleno en todo su contenedor. A continuación, estableceremos un color de fondo claro que sea visible contra el fondo de nuestra página, pero no tan oscuro como para dañar el contraste del texto. Las puntas afiladas de las esquinas se ven un poco antinaturales, así que añadiremos border-radius, que es un elegante término para establecer cómo de redondas queremos las esquinas.

Podríamos tener largas líneas de código, por lo que debemos especificar qué debe suceder si una línea de código desborda el lado del contenedor. En este caso, lo estableceremos a auto, que hará que el navegador muestre una barra de desplazamiento horizontal en el elemento si fuera necesario.

Finalmente, el código monoespaciado puede parecer grande, por lo que lo reduciremos diciendo que debe tener tres cuartas partes del tamaño de texto estándar.

El ejemplo de una función de JavaScript ha sido tratado con un fondo un poco gris de puntas redondeadas y muestra una fuente monoespaciada. Esta función toma el nombre de un planeta como entrada y devuelve información sobre el planeta.

Un mejor estilo para las imágenes

Este es el aspecto que tiene ahora mismo nuestra imagen de Saturno.

La imagen de Saturno, el secto planeta en el sistema solar, mostrando su extensivo sistema de anillos. El planeta se muestra con una porción de su superficie en sombra y los anillos parcialmente iluminados. El texto sobre la imagen ofrece información obre Saturno. La imagen es más estrecha que la columna de texto, tiene unas proporciones rectangulares con las 4 esquinas terminadas en punta.

No está mal, pero parece que la etiqueta <figure> está añadiendo un margen por cada lado. Quiero que la imagen ocupe todo el ancho de la columna. También quiero que el pie de foto sea un poco más pequeño.

figure {
  margin-inline: 0;
}

figure img {
  display: block;
  margin-inline: auto;
  border-radius: 4px;
}

figcaption {
  margin-block-start: 0.5rem;
  font-size: 0.8rem;
}

Eliminaremos el margen propio de <figure>. Así que apuntaremos a las imágenes que están dentro de figures (solo tenemos una, pero podría ser un buen patrón a utilizar su tuviéramos varias) para ello haremos lo siguiente:

La misma imagen de Saturno anterior, excepto que ahora el maren ha sdo eliminado y las esquinas de la imagen han sido redondeadas un poco.

¡Ah quedado muy elegante! Unos pequeños ajustes pueden hacer una gran diferencia.

Ya hemos establecido un estilo para el pie de página anteriormente, establecimos el ancho para asegurar que estuviera centrado. Pero podemos mejorar el aspecto general dándole algo más de espacio, dándole un borde superior, reduciendo el texto y usando un color de texto un poco más apagado.

footer {
  margin-block-start: 3rem;
  margin-inline: auto;
  padding-block: 1.5rem 3rem;
  border-block-start: 2px solid var(--heading-color);
  max-width: 65ch;
  color: var(--muted-text-color);
}

Algo de esto ya debería serle familiar. Hemos creado un margen superior del elemento con margin-block-start. Hemos añadido un borde de 2px de ancho sobre el pie de página utilizando el mismo color rojo que estamosutilizando en toda la página. Añadiendo padding-block, estamos añadiendo algo de espacio entre el texto y el borde we’re adding some space between the text and the border y una buena cantidad de relleno a continuación para proporcionar espacio para respirar en la parte inferior de la página. Finalmente, usaremos el mismo color de texto apagado que usamos en el bloque de cita.

Como ya hemos añadido el margen que queremos al elemento <footer>, ahora vamos a eliminar el margen del contenido dentro del pie de página. Utilizaremos a nuestro conocido selector universal (*).

footer * {
  margin: 0;
  font-size: 0.9rem;
}

Este selector apuntará a todo dentro de la etiqueta <footer>. Estableceremos el margin a 0 y reduciremos el texto al 90% del tamaño de la fuente del documento.

Un extra de diversión tipográfica

Ya podríamos finalmente parar aquí, pero… vamos a divertirnos un poco.

Mirando el primer párrafo del texto, le asigne una clase de intro. Vamos a darle un poco de énfasis haciendo que el texto sea un poco más grande.

.intro {
  margin-block-end: 2rem;
  font-size: 1.2em;
}

Cuando colocamos un punto antes de un término en un selector CSS, eso significa que queremos apuntar a cada elemento que tenga esa clase (en este caso es una clase intro). Esto hará más grande que el tamaño predeterminado del documento el tamaño de fuente font-size. Y con la fuente más grande, necesita un margen extra debajo.

Bien, genial, pero ahora vamos a por algo extra. Eche un vistazo al código de nuevo, y verá que he encerrado ls tres primeras palabra en una etiqueta <span> con una clase de caps.

.caps {
  text-transform: uppercase;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.1em;
}

Esto nos dará ese elegante efecto literario en el que las primeras palabras están en versalitas. Por lo general, querrá usar una fuente con versalitas adecuadas, pero podemos hacer una falsificación decente ya que Source Sans 3 es una fuente variable.

La declaración text-transform hará que las letras se muestren en mayúsuclas. Es mejor ahcer eso con CSS en vez de forma manual escribiendo eso en mayúsculas, ya que es algo que está relacionado con el estilo y diseño. Para el tamaño de fuente font-size, he estado jugando un poco hasta que me ha parecido adecuado. Principalmente, quiero que las mayúsculas tengan la misma altura que el texto de las minúsculas de la introducción (es decir, la altura de la x).

Para ayudar a que todo esté más equilibrado, voy a incrementar el peso de la fuente con font-weight un poco. Además de los valores de normal y bold, puede utilizar valores numéricos 100 a 900 si la fuente lo admite, y nuestra fuente variable sí que lo admite.

Por último, se beneficia de aumentar el espacio entre las letras cuando se utilizan todas las mayúsculas. Estoy utilizando la unidad em, que está basada en el actual tamaño de fuente font-size. Esto es útil porque si cambia el valor de font-size en el futuro, el espaciado también cambiará de manera proporcional.

Captura del título de Panetas del sistema solar. El texto que hay por debajo describe el sistema solar. Se ha aumentado el tamaño del texto y la primera frase del párrafo se ha escrito en versalitas.

¡Y ya lo tenemos! Desde sus humildes comienzos como una página austera y sin estilo con un atractivo pintoresco, ahora parece un artículo autorizado.

Potencial sin limites

Estos son solo los estilos que elegí según mis preferencias. Podría ir en todo tipo de direcciones diferentes. No estoy necesariamente tratando de imponerle un estilo, aunque sí le señalé algunos principios tipográficos generalmente buenos a seguir. Solo quería darle una muestra de cómo puede aplicar sus propios estilos a una página.

La magia de CSS es que podría tomar una copia exacta de mi código HTML y crear un diseño completamente diferente desde elmismo punto de partida. Esa es la premisa de un experimento web llamado CSS Zen Garden, donde las personas envían sus diseños basados en un código idéntico.

Captura de pantalla de dos páginas web procedentes del proyecto llamado CSS Zen Garden project. La página de la izquiera se muestra colorida, con un diseño vibrante con colores rosas, violetas y naranjas. La página de la derecha tiene un diseño minimalista y limpio con un gris claro de fondo y un texto en azul. Ambas imágenes muestran las posibilidades del diseño utilizando CSS.
Estos dos diseños comparten el mismo código HTML. Son la misma fotografía.

Espero que este capítulo extra le haya dado una idea de lo que es posible con CSS. Al igual que con HTML, incluso un poco de conocimiento de CSS es valioso: un simple cambio de fuente y color, por ejemplo, puede marcar una gran diferencia. Le animo a que siga explorando CSS si quiere crear diseños personalizados. Es una habilidad gratificante.

Saltar al menú