Hojas de estilo en cascada (CSS)

Práctica

En esta práctica agregaremos algunos estilos al documento que terminamos en la práctica del tutorial "Vínculos en HTML". Entonces, antes de empezar a escribir, abre tu archivo y familiarízate con los contenidos del documento. Si recuerdas, dijimos previamente al comienzo de estas prácticas que los estilos que veías en los ejemplos estaban siendo heredados del estilo del sitio y que, por lo tanto, el aspecto de tu documento no sería el mismo. Esto está a punto de cambiar.

Nuestro primer paso en este proceso será llevado a cabo en la sección de encabezado del documento (head). Aquí, luego de todos los demás elementos y antes de la etiqueta de cierre del elemento head, agregaremos un bloque style que contendrá todas las declaraciones de estilo para nuestro documento. El siguiente código muestra cómo debería verse la sección de encabezado del documeto (head) luego de los cambios.

<head>
  <title>Este soy yo, aprendiendo HTML por mi cuenta</title>
  <link rel="author" href="mailto:jhon@supersitiowebsuperincreible.com">
  <style>
  
  </style>
</head>

¿Ves ese espacio en blanco entre las etiquetas de apertura y cierre de style? Allí es donde agregaremos nuestras declaraciones de estilo. Comenzaremos por definir algunas propiedades globales para el elemento body, que esperamos sean heredadas por todos los elementos dentro de él. Éste es un recurso muy común en el diseño web, y por razones prácticas muy obvias. Las propiedades y valores delcarados para body actuarán como los estilos por defecto, siendo muchas veces anulados por declaraciones específicas de los elementos.

Con este fin, insertaremos un selector de tipo para el elemento body con algunas propiedades y sus valores, a saber, fuente, tamaño y color del texto, y un color de fondo.

Ten presente que en los ejemplos siguientes, el código mostrará lo que ocurre en el encabezado del documento (head) mientras que la parte representada mostrará cómo ese código afecta a los elementos en el cuerpo (body). Esto mejorará la comprensión, al enfocarse únicamente en las cosas importantes de cada caso.

Debido al enfoque de este sitio, las propiedades CSS y sus valores en los ejemplos siguientes no serán completamente explicadas. Puedes obtener más recursos de aprendiczaje acerca del tema en la sección Más allá de HTML.

<head>
  <title>Este soy yo, aprendiendo HTML por mi cuenta</title>
  <link rel="author" href="mailto:jhon@supersitiowebsuperincreible.com">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #452f17;
      background-color: #dec39e;
      padding: 2em;
    }
  </style>
</head>

Tabla de contenidos

  1. Me decidí
  2. Agarrándole la mano

Me decidí

Hoy desperté decidido a aprender HTML por mi cuenta. Así que, abrí HTMLQuick.com en mi navegador y puse manos a la obra.

Agarrándole la mano

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Esto no se ve muy bien, pero pronto arreglaremos eso. En nuestro próximo paso, estableceremos estilos para los encabezados, párrafos y vínculos, todo al mismo tiempo. Esto será tan simple como en el ejemplo anterior: agregaremos otros tres selectores de tipo (esta vez, para h1, p y a) y proveeremos algunas declaraciones para ellos.

<head>
  <title>Este soy yo, aprendiendo HTML por mi cuenta</title>
  <link rel="author" href="mailto:jhon@supersitiowebsuperincreible.com">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #452f17;
      background-color: #dec39e;
      padding: 2em;
    }
 
    h1 {
      font-size: 40px;
      font-weight: normal;
    }
 
    p {
      text-indent: 4em;
    }
    
    a {
      color: #813f25;
    }
  </style>
</head>

Tabla de contenidoss

  1. Me decidí
  2. Agarrándole la mano

Me decidí

Hoy desperté decidido a aprender HTML por mi cuenta. Así que, abrí HTMLQuick.com en mi navegador y puse manos a la obra.

Agarrándole la mano

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Hasta aquí, los estilos definidos para este documento pueden ser considerados globales y podrían ser aplicados indistintamente a todos los elementos del sitio web, una operación que puede incluso garantizar la uniformidad en la presentación del contenido. Pero los cambios que estamos a punto de hacer a la tabla de contenidos, no se supone que sean aplicados a todos los elementos header del documento o sitio web (recuerda de que la tabla de contenidos es declarada como una sección header del body). Si este fuera el caso, el header de cualquier sección tendría el aspecto de la tabla de contenidos.

Existen muchas formas de resolver este problema, pero en este caso usaremos clases. Para enlazar una clase CSS a un elemento, primero necesitamos que el atributo class esté presente en el elemento. En el siguiente paso agregaremos el atributo class al header de la tabla de contenidos, con la palabra "toc" como nombre de la clase. Así es como esa sección header de la tabla de contenidos debería verse luego de los cambios.

<header class="toc">
  <h1>Tabla de contenidos</h1>
  <ol>
    <li><a href="#introduccion">Me decidí</a></li>
    <li><a href="#superando-obstaculos">Agarrándole la mano</a></li>
  </ol>
</header>

Ahora podemos declarar un selector de clase y comenzar a arrojar propiedades en su interior. Recuerda que en la declaración de un selector de clase, el nombre de la clase debe ser precedido por un punto (".") y seguido por las declaraciones entre llaves ("{}").

<head>
  <title>Este soy yo, aprendiendo HTML por mi cuenta</title>
  <link rel="author" href="mailto:jhon@supersitiowebsuperincreible.com">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #452f17;
      background-color: #dec39e;
      padding: 2em;
    }
 
    h1 {
      font-size: 40px;
      font-weight: normal;
    }
 
    p {
      text-indent: 4em;
    }
    
    a {
      color: #813f25;
    }
    
    .toc {
      width: 50%;
      padding: 1em 2em;
      border-radius: 4px;
      background-color: #e6d5bb;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>

Tabla de contenidos

  1. Me decidí
  2. Agarrándole la mano

Me decidí

Hoy desperté decidido a aprender HTML por mi cuenta. Así que, abrí HTMLQuick.com en mi navegador y puse manos a la obra.

Agarrándole la mano

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Y eso es todo! Ahora no solamente sabes de qué se trara CSS, sino que además sabes cómo utilizarla de manera básica. Existe mucho más para aprender, pero luego de este tutorial todo debería ir sobre ruedas.

Prev123