Formas de agregar estilos a HTML

← Diseño Web ⌂ Home

¿Cómo agregar estilos a mi sitio web?

Hay tres opciones para incluir estilos en el sitio web:

  1. Estilos en línea: se definen directamente en el elemento html que quieres estilizar, se agregan con el atributo style.
  2. Estilos con el tag style: regularmente este tag se incluye dentro de la etiqueta head del html.
  3. Estilos enlazados desde un archivo css externo: utilizando la etiqueta link que nos permite enlazar recursos externos.

A CSS, se le llama hojas de estilos en cascada porque los estilos que se definen para una página, se van aplicando de arriba hacia abajo, y de lo más general a lo más particular, teniendo prioridad lo más particular. Esto es, los estilos que prevalecen son los que han sido definidos en línea, luego los que fueron definidos mediante la etiqueta style en la cabeza o cuerpo del html, y por último los estilos definidos en archivos externos enlazados con la etiqueta link.

Nota: solo utilizaremos las propiedades color y background para modificar el color del texto y el fondo, respectivamente. Aún no nos centraremos en CSS.

Estilos en línea

Para los estilos en línea usamos el atributo style directamente en algún tag de html, por ejemplo:

<h1 style="color: white; background: black">Playeras con diseños para Geeks, programadores y diseñadores.</h1>

Estilos con el tag <style>

Para los estilos con <style> comúnmente se agrega el tag dentro del <head> del sitio web, y se coloca el código CSS dentro de dichos tags.

Nota: no te preocupes por entender los selectores (aún) más adelante los revisaremos.

... 

 <head>
    <meta charset="utf-8"/>
    <title>Playeras Geeks</title>
    <link rel="icon" href="img/tshirt.png" type="img/png">
    <style>
        h2, h3 {
            color: white;
            background: gray;
        }
    </style>
</head>

...

Estilos externos

La tercera forma y la recomendada es crear un archivo externo y mandarlo a llamar, algunas de las ventajas que nos ofrece es tener mayor orden y que el código sea escalable y mantenible.

Vamos a crear una carpeta llamada css y dentro crearemos un archivo llamado styles.css, el nombre puede ser el que sea.

Y posterior agregaremos el siguiente contenido al archivo styles.css

body {
    color: white;
    background: gray;
}

Y ahora tenemos que integrarlo en el sitio agregando lo la etiqueta <link rel="stylesheet"> en nuestro <head>, de la siguiente manera:

... 

<head>
    <meta charset="utf-8"/>
    <title>Playeras Geeks</title>
    <link rel="icon" href="img/tshirt.png" type="img/png">
    <style>
        h2, h3 {
            color: white;
            background: gray;
        }
    </style>
    <link rel="stylesheet" href="css/styles.css">
</head>

...

Y observaremos el cambio de color en el fondo de todo el sitio.