Guía CSS: Qué es y cómo funciona

Este artículo pertenece a una serie de artículos sobre el lenguaje CSS. En cada capítulo aprenderás los fundamentos básicos de uno de los lenguajes más importantes y apasionantes del diseño web.


Serie completa, Guía CSS:

  1. Qué es y cómo funciona ←
  2. Sintaxis

Prerrequisitos

Qué es CSS

Es el lenguaje que, en combinación con HTML, permite crear diseños en una página web. Es un lenguaje descriptivo y de extraordinaria sencillez —a la par que potente— y no se le considera un lenguaje de programación per se, como si lo es JavaScript2. Aunque su aprendizaje es sencillo, dominar el lenguaje requiere disciplina y perseverancia.

Las siglas CSS corresponden a Cascading Style Sheets, que significa “Páginas de estilo en cascada”. Es un nombre curioso, los sé, pero muy descriptivo y acertado. Sobre que es “la cascada” y su funcionamiento hablaré en el artículo Guía CSS: Cascada y herencia.

El DOM, qué es y cómo funciona

Antes de ahondar más en las bondades de CSS es necesario comprender una cuestión fundamental, el DOM. El Document Object Model, o “Objeto Modelo del documento” define las reglas a la hora distribuir los elementos (etiquetas HTML), llamados nodos, en una especie de estructura de árbol con descendencia jerárquica.

HTML:

<p>
  Así <em>funciona</em> el <em><strong>DOM</strong></em>.
</p>

Representación del DOM:

p
├─ "Así "
├─ em
│  └─ "funciona"
├─ " el "
├─ em
│  └─ strong
│  	  └─ "DOM"
└─ "."

Desde el nodo p parten el resto de elementos —se convierten en nodos hijop contiene los nodos de texto: “Así”, “funciona”, “el”, “DOM” y “.”. El resto de nodos son etiquetas HTML: em y strong. Observa como el segundo em anida otros elementos creando así cuatro niveles de profundidad.

Podemos ver esta ramificación de elementos utilizando las herramientas de desarrollo del navegador:

Cómo interactúa CSS con el DOM

Empleando el código del ejemplo anterior podemos emplear CSS para dar estilo a las etiquetas em tal y como verás a continuación.

HML:

<p>
  Así <em>funciona</em> el <em><strong>DOM</strong>.</em>
</p>

CSS:

p em strong {
  color: red;
}

Resultado:

Gracias al DOM desde CSS podemos aplicar propiedades basándonos en los niveles de anidado del HTML. Con estos estilos todas las etiquetas <strong> dentro de <em> y esta a su vez dentro de <p> serán de color rojo.

Ya has visto un poco de código CSS, y como el DOM nos ayuda a la hora de aplicar CSS. No te preocupes aún en entender el código CSS anterior, de esto hablaré en el siguiente artículo: “Guía CSS: Sintaxis“.

Cómo unir CSS y HTML

Para que nuestro documento HTML pueda cargar y utilizar nuestro CSS es necesario indicárselo explícitamente. Existen tres métodos distintos a la hora de añadir CSS:

  1. Hojas de estilo internas
  2. Hojas de estilo externas
  3. Estilo CSS en línea

Cada una presenta sus ventajas, vayamos por puntos y veamos cuáles son.

Hojas de estilo externas

Consiste en definir los estilos CSS en un archivo externo con la extensión .css. Desde HTML hacemos referencia al archivo CSS para cargar los estilos en el documento.

  1. Primero creamos un archivo CSS y lo nombramos style.css —podemos asignarle cualquier nombre. En este archivo es donde definimos nuestros estilos.
  2. En el <head> de nuestro documento HTML hacemos referencia al archivo CSS mediante la etiqueta <link>.

CSS (style.css):

body {
  font: 100%/1.5 Helvetica, Arial, sans-serif;
  color: black;
}

/* Más código CSS... */

HTML (index.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Hojas de estilo externas</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Contenido HTML aquí -->
</body>
</html>

El atributo rel describe la relación que tiene CSS con nuestro documento HTML, stylesheet. En el atributo href escribiremos la ruta del archivo. Para enlazar correctamente el CSS es importante tener en cuenta en que directorio se encuentra.

Si estamos desarrollando nuestro diseño en un directorio llamado “proyecto” y tenemos todos los archivos en la misma raíz, entonces enlazamos el/los CSS de la siguiente manera.

Estructura del directorio:

├─ / index.html
├─ / style.css
└─ / typografia.css

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Hojas de estilo externas</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="typografia.css">
</head>
...

Ahora imagina que tenemos los archivos organizados por carpetas, la ruta que siguen los directorios donde se encuentran los CSS se introducen de la siguiente forma.

Estructura del directorio:

├─ / index.html
├─ / css / 
│        ├─ style.css
│        └─ typografia.css

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Hojas de estilo externas</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/typografia.css">
</head>
...

Nota: en el minuto 3:04, me refiero al archivo CSS, no al HTML. Sorry…

Hojas de estilo internas

Se trata de escribir el CSS dentro del mismo HTML utilizando una etiqueta especial llamada <style>. La etiqueta nos proporciona el contexto donde CSS es interpretado como tal, y no como HTML.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Hojas de estilo internas</title>
  <style>
    body {
      font: 100%/1.5 Helvetica, Arial, sans-serif;
      color: black;
    }

    /* Más código CSS... */
  </style>
</head>
...

Este método puede ser útil si quieres aplicar un estilo muy específico —y corto— para una página concreta.

Estilo CSS en línea

Este método es el menos usado de todos, consiste en aplicar el estilo directamente en una etiqueta HTML mediante el atributo style.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Hojas de estilo en linea</title>
</head>
<body>
  <h1 style="text-trasnform: uppercase; font-size: 24px;">Estilos en linea</h1>
  <p>Bla bla bla...</p>
</body>
</html>

Como puedes ver este método no es muy conveniente si queremos escribir mucho CSS. Se suele utilizar para diseñar los emails de las newsletters ya que los emails en HTML no pueden cargar CSS externo.

Conclusión

En este artículo hemos visto que es CSS, como interactúa con las etiquetas HTML mediante el DOM, y las distintas formas de utilizar CSS en HTML.

Espero que te haya gustado este artículo y hayas disfrutado tanto como yo escribiéndolo. Si quieres seguirle la pista a esta serie de artículos, suscríbete al blog y te avisaré por email de las novedades.

Y en el siguiente artículo…

Te explicaré la sintaxis de CSS, reglas, propiedades, valores y muchos más. Aquí es donde empieza la acción y cuando CSS empieza a ser adictivo y engancha a aquellas personas que realmente tienen ganas de aprenderlo. ¡No te lo pierdas!

Notas al pie

  1. Visual Studio Code es un editor gratuito y de código abierto creado por Microsoft, es mi editor preferido y el que utilizo en los vídeos explicativos.
  2. JavaScript o ECMASCRIPT es el lenguaje de programación que se utiliza para crear aplicaciones web.

 

Suscríbete al blog y consigue gratis el eBook "WordPress, guía práctica"

Víctor Rico

Soy Diseñador web especializado en WordPress. En el blog comparto mis conocimientos sobre técnicas y trucos de Diseño web y WordPress. Mi objetivo es ayudar a personas que están empezando en esto y que quieren aprender de forma autodidacta.

7 comentarios en “Guía CSS: Qué es y cómo funciona

  1. Excelente post! me gusta aprender y pues con esto ya empiezo a llorar después de haber nacido (es decir, que soy un bebé en el diseño de páginas web, pero con estos post aprendo más). Buen trabajo y claro que si, me suscribiré!

    • Hola, Leo:

      ¡Bienvenido al blog! Muchas gracias por tu comentario.

      Claro que si, lo importante es empezar y hacerlo con ilusión. El mundo del diseño web es apasionante y está en continua evolución.

      En este blog econtrarás artículos sobre: HTML, CSS, WordPress y mucho más. Habrá de varios niveles, sencillo y avanzado.

      Espero que aprendas mucho y disfrutes del contenido que aquí publico.

      ¡Saludos!

    • Hola, Fernando:

      ¡Muchas gracias! Que bien verte por aquí, espero que te vayan muy bien tus aventuras por el mundo.

      Seguro que aprendes mucho con esta serie de artículos, creo que quedará muy completa sin llegar a aburrir, je, je, je. Ya sabes que si te surge alguna duda puedes preguntar y yo estaré encantado de ayudarte.

      Un abrazo crack.

  2. Genial post, lo explicas de una forma directa y muy sencilla de comprender.
    Tienes razón, una vez que descubres el tiempo que te puede ahorrar el lenguaje CSS ya no puedes parar de utilizarlos y así no depender tanto de maquetadores de páginas.

    Esperando por el siguiente capítulo! jejeje Un saludo

    • Hola, Daniel:

      Intento matener el equilibrio para que el contenido sea claro, directo y al mismo tiempo no se haga demasiado largo o rimbombante.

      El siguiente artículo está siendo “cocinado” y pronto estará listo para servir. Estoy disfrutando mucho escribiendo la guía y espero que los lectores aprendáis y que a la vez estéis entretenidos.

      Muchas gracias por comentar y transmitirme tu gratitud.

      ¡Saludos!

Deja un comentario


Uso de los datos de los comentarios


Responsable del fichero: Víctor Rico Penalba. La finalidad: moderar los comentarios del blog. La legitimación: consentimiento del interesado. Destinatarios: tus datos se encuentran alojados en mi proveedor de hosting, Raiolanetworks, empresa de servidores Española ubicada en Lugo. Podrás ejercer tus derechos de acceso, rectificación, limitación o suprimir tus datos enviando un email a o ante la Autoridad de Control. Encontrarás más información en la Política de Privacidad.


Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.