Cómo usar CSS
1. Cómo usar CSS 1.1. Enlace CSS externo (etiqueta link)1.2. Enlace CSS interno (etiqueta style)1.3. Estilos en línea (atributo style)

Estructura de CSS >>

Hasta el momento hemos visto cómo organizar un documento HTML, a lo largo de este tema vamos a ver qué son las hojas de estilo en cascada (Cascading Style Sheets) o CSS. Debemos tener claro que una página web en realidad es un documento de texto escrito en código HTML y que el código CSS es el encargado de dar forma, color, posición (entre otras características) a una página web.

El término CSS es el lenguaje de estilos utilizado para establecer cómo se van a presentar los documentos HTML o XML. Se denomina hoja de estilo en cascada porque las reglas se aplican de arriba a abajo.

1. Cómo usar CSS

Antes de comenzar a ver las reglas de CSS debemos conocer las diferentes formas que podemos utilizar para incluir estilos en nuestros HTML.

A continuación, vamos a ver las tres formas que hay para incluir nuestros estilos, siendo la más común (y recomendada) la primera (link:css), y la última la menos recomendada principalmente en proyectos grandes.

1.1. Enlace CSS externo (etiqueta link)

En la cabecera de nuestro HTML (dentro de la etiqueta <head>) debemos incluir una etiqueta <link> con la que haremos referencia a el archivo CSS que vamos a utilizar, en el atributo href indicaremos la ubicación de esa hoja de estilos. Ejemplo:

Atajo con emmet link:css

<!DOCTYPE html>
<html lang="es">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Mi primera hoja de estilo</title>
          <!-- Incluyo mi archivo CSS -->
          <link rel="stylesheet" href="estilo.css">
     </head>
     <body>
          <h1>Aprendiendo CSS</h1>
          <p>Hola este mensaje estará en rojo</p>
     </body>
</html>

Al incluir la etiqueta link con el href a nuestra hoja de estilos, estamos indicando al navegador que deben aplicar los estilos del archivo estilo.css. Antiguamente también se añadía el atributo type="text/css", pero desde HTML5 ya no es necesario, y si se incluye es por el tema de compatibilidad con navegadores muy antiguos.

1.2. Enlace CSS interno (etiqueta style)

Otra forma habitual de incluir estilos en una página web es añadiéndolos directamente en el documento HTML mediante la etiqueta <style> dentro de la etiqueta <head>:

<!DOCTYPE html>
<html lang="es">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Mi primera hoja de estilo</title>
          <!-- Incluyo mi CSS -->
          <style>
               p {
                    color: red;
               }
          </style>
     </head>
     <body>
          <h1>Aprendiendo CSS</h1>
          <p>Hola este mensaje estará en rojo</p>
     </body>
</html>

El ejemplo anterior estamos incluyendo nuestro CSS mediante la etiqueta <style>, pero con el objetivo de poder reutilizar nuestros estilos a posteriori es recomendable que se utilice mediante la etiqueta <link> como vimos en el punto anterior (Enlace CSS externo).

1.3. Estilos en línea (atributo style)

La tercera y última forma que tenemos para aplicar estilos en un documento HTML es hacerlo directamente mediante el atributo style a la etiqueta a la que le queremos aplicarle el estilo.

<!DOCTYPE html>
<html lang="es">
     <head>
          <meta charset="UTF-8">
          <title>Mi primera hoja de estilo</title>
     </head>
     <body>
          <h1>Aprendiendo CSS</h1>
          <p style="color: red;">Hola este mensaje estará en rojo</p>
     </body>
</html>

Al igual que con el método anterior (etiqueta <style>), no se recomienda utilizar este método.

¡IMPORTANTE! Si modificamos una misma propiedad desde varios sitios (hoja de estilos / etiqueta style/ atributo style, ¿cuál se aplicará?. Se aplica el estilo de más prioridad, siendo de mayor a menor: atributo style → etiqueta style → Hoja CSS. Ejemplo: