CSS: Dar estilo al contenido

¿Qué es CSS?

Al igual que HTML, CSS no es un lenguaje de programación. Tampoco es un lenguaje de marcado. CSS es un lenguaje de hojas de estilo. CSS se usa para dar estilo a los elementos HTML: seleccionas los elementos a los que quieres dar estilo y estableces valores para sus propiedades de estilo, que definen cómo se verán.

Volvamos al ejemplo básico de HTML del artículo Crear el contenido:

<p>Instrucciones para la vida:</p>

<ul>
  <li>Comer</li>
  <li>Dormir</li>
  <li>Repetir</li>
</ul>

Por sí solo, se ve así:

Si añadimos algo de CSS, podemos cambiar el aspecto del HTML. El siguiente fragmento selecciona el elemento <p> y le da una fuente distinta y un color de texto rojo. Después selecciona todos los elementos <li> y le da a cada uno un background-color amarillo verdoso, un border negro sólido de 1 píxel y un margen inferior de 5 píxeles:

p {
  font-family: sans-serif;
  color: red;
}

li {
  background-color: greenyellow;
  border: 1px solid black;
  margin-bottom: 5px;
}

Con el CSS aplicado al HTML, la demostración ahora se ve así:

Como ves, con solo un poco de CSS hemos podido cambiar el aspecto de una lista sencilla.

CSS tiene muchas otras funciones, desde especificar imágenes y degradados de fondo, hasta controlar la tipografía y el comportamiento del desplazamiento, añadir animaciones y construir diseños de página web completos.

Aplicar CSS a tu HTML

Al usar CSS, lo primero que hay que hacer bien es asegurarse de que el CSS se aplica correctamente al HTML. En esta sección, añadiremos una hoja de estilo CSS a tu first-website y la aplicaremos a tu página.

1. Dentro de tu carpeta first-website, crea otra carpeta nueva llamada styles.

2. Con un editor de texto, pega el siguiente CSS en un archivo nuevo; dará a tus elementos <p> un color de texto rojo. Es útil empezar con algo así para comprobar si tu hoja de estilo se aplica correctamente al HTML.

   css

   p {
     color: red;
   }
   

3. Guarda el archivo en la carpeta styles con el nombre style.css.

4. Abre tu archivo index.html. Pega la siguiente línea dentro de la cabecera del HTML (entre las etiquetas <head> y </head>):

   html

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

5. Guarda index.html y cárgalo en tu navegador. Deberías ver algo así:

Si el texto de tus párrafos está en rojo, ¡enhorabuena! Tu CSS funciona. Si no, repasa los pasos anteriores y comprueba con cuidado que has seguido cada uno correctamente.

Conceptos básicos de la sintaxis de CSS

En el ejemplo de CSS anterior, p se llama selector: selecciona los elementos a los que se dará estilo. En concreto, p selecciona todos los párrafos del HTML. La línea entre llaves ({ }) se llama declaración: establece un valor para una propiedad concreta. En este caso, la propiedad es color, que controla el color del texto de los párrafos, y el valor de la propiedad establecido es red.

La estructura completa se llama conjunto de reglas. (Al conjunto de reglas a menudo se le llama simplemente regla).

Veamos otro conjunto de reglas, esta vez con varias declaraciones:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Dentro de un conjunto de reglas, tienes que usar un punto y coma (;) para separar una declaración de la siguiente. Dentro de cada declaración, tienes que usar dos puntos (:) para separar la propiedad de su valor.

También puedes incluir varios selectores en una regla, separados por comas, para seleccionar varios elementos. Por ejemplo:

p,
.my-class,
#my-id {
  color: red;
}

En esta regla CSS, hemos incluido un selector de elemento (o de tipo), que selecciona un elemento HTML concreto. También hemos incluido otros dos tipos de selectores, que no son relevantes para el resto de este tutorial. Si tienes curiosidad por saber qué hacen, consulta nuestra guía de selectores básicos.

Mejorar el texto

Volvamos a nuestro ejemplo y usemos CSS para mejorar el aspecto del texto. Estableceremos una fuente nueva para la página y cambiaremos algunos ajustes de texto de distintos elementos.

1. Primero, busca el resultado de Google Fonts que guardaste antes. Si todavía no has elegido una fuente, sigue el enlace y hazlo ahora.

2. Añade los elementos <link> dentro del <head> de tu index.html, justo antes de la etiqueta de cierre </head>. Deberían verse más o menos así:

   html

   <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=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
     rel="stylesheet" />
   

   Este código enlaza tu página con una hoja de estilo alojada en el servicio Google Fonts, que carga la fuente que elegiste.

3. A continuación, ve a tu archivo style.css y borra la regla existente. Ya no queremos que nuestros párrafos sean rojos.

4. Añade las siguientes líneas a style.css:

   css

   html {
     /* px significa "píxeles". El tamaño de fuente base ahora mide 10 píxeles de alto */
     font-size: 10px;
     /* Reemplaza PLACEHOLDER por el valor de la propiedad font-family que obtuviste de Google Fonts */
     font-family: PLACEHOLDER;
   }
   

   Nota: Todo lo que en CSS está entre /* y */ es un comentario de CSS, que el navegador ignora. Los comentarios de CSS son una forma de incluir notas útiles sobre tu código o tu lógica sin afectar a cómo se representa tu página web.

5. Reemplaza la línea de marcador de posición de font-family por la línea font-family de tu código de Google Fonts, por ejemplo:

   css

   font-family: "Roboto", sans-serif;
   

   La propiedad font-family establece las fuentes que quieres aplicar a tu HTML. Esta regla define una fuente base global y un tamaño de fuente para toda la página. Todos los elementos dentro del elemento <html> heredarán el mismo font-size y font-family.

6. Ahora vamos a establecer algunos estilos de fuente y de texto en nuestros elementos <h1>, <li> y <p>. Estableceremos nuevos valores de font-size para cada elemento. También centraremos el encabezado con text-align y aumentaremos el line-height y el letter-spacing de los párrafos y los elementos de la lista para que el contenido del cuerpo sea más legible.

   css

   h1 {
     font-size: 60px;
     text-align: center;
   }
   
   p,
   li {
     font-size: 16px;
     line-height: 2;
     letter-spacing: 1px;
   }
   

7. Guarda tu código y carga tu HTML en un navegador (recárgalo si ya lo tenías abierto). Tu trabajo en curso debería verse parecido a esto:

   

   Nota: Prueba a ajustar los valores en px hasta conseguir tamaños de fuente que te gusten para el encabezado y el texto del cuerpo.

En CSS todo son cajas

Algo que notarás sobre CSS a medida que lo uses más es que gran parte trata de cajas. La mayoría de los elementos HTML de una página pueden considerarse cajas que se colocan encima de (o junto a) otras cajas. Puedes establecer valores en estas cajas para el tamaño, el color, el posicionamiento, etc. A esto se le llama modelo de caja.

Cada caja que ocupa espacio en tu página tiene propiedades como:

• padding: el espacio alrededor del contenido. En el ejemplo anterior, es el espacio alrededor del texto del párrafo.
• border: la línea sólida justo por fuera del relleno (padding).
• margin: el espacio por fuera del borde.

En esta sección, también usamos las siguientes propiedades, algunas de las cuales ya has visto:

• width: el ancho de un elemento.
• background-color: el color detrás del contenido y el relleno de un elemento.
• color: el color del contenido de un elemento (normalmente, el texto).
• text-shadow: una sombra paralela en el texto de un elemento.
• display: el modo de visualización de un elemento (que básicamente se refiere a cómo aparece o se dispone en la página web).

En cada una de las secciones siguientes:

1. Añade el código CSS proporcionado al final de tu archivo style.css.
2. Guarda el archivo y recarga el navegador para ver cómo ha afectado el CSS a la representación del HTML.
3. Lee la explicación proporcionada para entender cómo funciona el CSS.
4. Si te sientes aventurero, experimenta cambiando los valores de las propiedades para personalizar aún más tu página.

Cambiar el color de la página

Añade lo siguiente:

html {
  background-color: #00539f;
}

Esta regla establece un color de fondo para toda la página. Cambia el código de color por el color que elegiste en ¿Cuál será la apariencia de tu sitio web?.

Dar estilo al cuerpo

A continuación, añade esta regla:

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

El código anterior establece nuevos valores para varias propiedades del elemento <body>. Veámoslas línea por línea:

• width: 600px;: obliga a que el cuerpo mida siempre 600 píxeles de ancho.
• margin: 0 auto;: cuando estableces dos valores en una propiedad como margin o padding, el primer valor afecta a los lados superior e inferior del elemento (en este caso, los pone a 0); el segundo valor afecta a los lados izquierdo y derecho. auto es un valor especial que reparte el espacio horizontal disponible a partes iguales entre la izquierda y la derecha.
• background-color: #FF9500;: establece el color de fondo del elemento. Nuestro proyecto usa un naranja rojizo como color de fondo del <body>, para que contraste con el azul oscuro que se usa en el elemento <html>.
• padding: 0 20px 20px 20px;: establece cuatro valores de relleno. El objetivo es dejar algo de espacio alrededor del contenido. En este ejemplo, no hay relleno en la parte superior del cuerpo, y hay 20 píxeles a la derecha, abajo y a la izquierda. Los valores establecen el relleno superior, derecho, inferior e izquierdo, en ese orden.
• border: 5px solid black;: establece los valores del ancho, el estilo y el color del borde. En este caso, es un borde negro sólido de 5 píxeles de ancho alrededor de todos los lados del cuerpo.

Un inciso sobre las propiedades abreviadas

Los valores de propiedades CSS que establecen varias propiedades de una vez se llaman propiedades abreviadas. Por ejemplo, padding: 0 20px 20px 20px equivale a las cuatro propiedades siguientes:

padding-top: 0;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

Posicionar y dar estilo al título principal de la página

Ahora añade esto:

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

Quizá hayas notado un hueco horrible en la parte superior del cuerpo. Ocurre porque los navegadores aplican un estilo predeterminado al elemento <h1>. Puede parecer mala idea, pero la intención es dar una legibilidad básica a las páginas sin estilo. Para eliminar el hueco, sobrescribimos el estilo predeterminado del navegador con el ajuste margin: 0;.

Después, establecemos el relleno superior e inferior del encabezado en 20 píxeles, y hacemos que el texto del encabezado tenga el mismo color que el color de fondo del HTML.

Por último, text-shadow aplica una sombra al contenido de texto del elemento:

• El primer valor en píxeles establece el desplazamiento horizontal de la sombra respecto al texto: cuánto se desplaza hacia el lado.
• El segundo valor en píxeles establece el desplazamiento vertical de la sombra respecto al texto: cuánto se desplaza hacia abajo.
• El tercer valor en píxeles establece el radio de desenfoque de la sombra. Un valor mayor produce una sombra más difuminada.
• El cuarto valor establece el color base de la sombra.

Centrar la imagen

Por último, inserta esta regla:

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

A continuación, centramos la imagen para que se vea mejor. Podemos usar el mismo truco de margin: 0 auto que usamos para el cuerpo, pero hay diferencias que exigen un ajuste adicional para que el CSS funcione.

El elemento <body> es un elemento de bloque, lo que significa que ocupa espacio en la página y admite márgenes, relleno y otras propiedades de caja. En cambio, los elementos <img> (imagen) son elementos en línea: de forma predeterminada, no admiten los valores de margen igual que los elementos de bloque. Para que el truco del margen automático funcione en esta imagen, tenemos que darle un comportamiento de bloque con display: block;.

Por último, establecemos la propiedad max-width en 100% para asegurarnos de que, si la imagen es más grande que el width establecido en el cuerpo (600 píxeles), se limite a 600px y no se estire más.

Conclusión

Si has seguido todas las instrucciones de este artículo, deberías tener una página parecida a esta:

Puedes ver nuestra versión aquí. Si te quedas atascado, siempre puedes comparar tu trabajo con nuestro código de ejemplo terminado en GitHub.

En este artículo apenas hemos arañado la superficie de CSS. Aprenderás mucho más en nuestro módulo principal Fundamentos de estilo con CSS, más adelante en el curso.

Véase también

Learn HTML and CSS, Scrimba ^{socio de aprendizaje de MDN}

El curso Learn HTML and CSS de Scrimba te enseña HTML y CSS construyendo y desplegando cinco proyectos geniales, con lecciones y desafíos interactivos divertidos impartidos por profesores expertos.

• Anterior
• Overview: Tu primer sitio web
• Siguiente