Básicos del diseño para no diseñadores: Diferencias entre HTML y CSS

Si has llegado aquí es porque vas pez en cuanto a aspectos técnicos del diseño web. O porque te sorprende que alguien pueda hacer una lista con las diferencias entre HTML y CSS. Si es el segundo caso seguramente todo lo que te vaya a decir ya lo sabes. Si es el primero prometo darte los conceptos más básicos para no liarte demasiado pero que te permitan entender estos dos pilares del diseño web. Vamos, para que diseñando tu web con WordPress no te pille desprevenido algún trozo de código salvaje que encuentres por ahí. ¡Al lío!

HTML vs CSS: vayamos calentando

Antes de nada quiero decirte que he sido un poco pirata y he puesto un título que queda muy bien pero que no encaja demasiado con el contenido. No es que haya diferencias entre HTML y CSS. Es que comparar estos dos conceptos es como comparar una mesa con un perro, o el tocino con la velocidad. O como dice mi padre: mezclar churras con merinas.

El HTML y el CSS sólo tienen una cosa en común y es que los dos son lenguajes usados principalmente en diseño web. Eso no quiere decir ni de lejos que para hacerte una web molona tengas que saber escribir este tipo de código. Pero sí que te conviene saber algunas cosas básicas sobre ellos y que te explico a continuación.

Para que entiendas bien en qué consiste cada concepto voy a hacer un símil que ilustre todo el asunto: vamos a imaginar que una página cualquiera de una web es una casa. Por ejemplo la típica página de contacto.

Qué es el HTML: la estructura

HTML proviene de Lenguaje de Marcado para Hipertextos (‘HyperText Markup Language’). Es el elemento de construcción más básico de una página web y se usa para crear y representar visualmente una página web. Determina el contenido de la página web pero no su aspecto y funcionalidad. Esto no lo digo yo, esto lo dice Mozilla.

Dicho de otra forma, el HTML es el código que hace que en una página se muestren ciertos elementos estructurados de cierta manera. Todos los elementos que estás viendo ahora mismo en tu pantalla los visualizas gracias a que existe un código HTML que los genera.

Con el símil de una casa el HTML está formado por los planos del arquitecto, las vigas que aportan la estructura y los ladrillos que constituyen paredes.

Básicos del HTML

Imagino que ya te has hecho una idea más o menos clara de qué es el HTML. Ahora te explico algunos aspectos básicos sobre el HTML.

Para empezar debes saber que todos los elementos de HTML tienen lo que llamamos un «marcado» específico. Los marcados son aquellas piezas de código que se colocan entre los signos <>.

Los símbolos <> sirven para decirle a tu navegador cuándo empieza un elemento HTML y qué elemento es. Cuando el contenido de ese elemento se acaba se vuelve a colocar el mismo marcado, pero con una barra que determina el cierre del elemento: </>.

Veamos un ejemplo.

Esto es lo que debemos escribir en HTML si queremos un párrafo de texto en HTML:

<p>Aquí empieza el párrafo de texto que quiero poner. Ahora voy a indicar al navegador que ya he acabado con el párrafo.</p>

Existe un montón diferentes elementos marcados pero los que más vas a ver si tienes una web con WordPress (si es que los ves en alguna ocasión) son los siguientes:

• <p>: indica un párrafo de texto
• <h1>, <h2>, <h3>: indica un título. Puede ser de hasta 6 niveles, siendo el <h1> el de más relevancia y el <h6> el de menos.
• <a>: indica un enlace.
• <div>: indica un contenedor que dentro puede tener más elementos.
• <img>: indica una imagen.

Lo que hace el HTML y lo que no

Con el lenguaje HTML solamente le comunicas al navegador que vas a colocar ciertos elementos en un orden concreto. Con HTML puedes decirle que vas a mostrar un bloque de texto y a continuación una imagen. Pero con HTML no puedes decirle la pinta que debe tener ese bloque de texto ni la imagen que va debajo.

Te pongo un ejemplo.

Con este código HTML:

<div>

  <p>4 combinaciones de fuentes tipográficas perfectas para web</p>

</div>

<div>

  <img src="https://srmomo.com/wp-content/uploads/2017/09/combinaciones.png"/ alt="fuentes tipográficas para web">

</div>

Conseguimos esto:

4 combinaciones de fuentes tipográficas perfectas para web

Qué es el CSS: la decoración

El código CSS (en inglés ‘Cascading StyleSheets’) se usa para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de las páginas web e interfaces de usuario escritas en HTML. En pocas palabras, el CSS va a definir el look & feel de tu web.

Si cogemos el símil de la casa el CSS es la pintura y los elementos decorativos de la misma. Imagínate qué diferente puede ser un edificio pintado de morado con un cartel luminoso encima que ponga «Bragas a 2 euros», de otro pintado de blanco con plantitas colgando de sus ventanas estilo Gaudí. Pues eso.

Básicos del CSS

Puede que te preguntes cómo se relacionan ambos códigos para mostrar una página web tal y como un visitante la ve. A diferencia de la pintura de una casa que la colocas directamente sobre los ladrillos, el CSS va escrito en un documento diferente al del HTML. El código CSS va enlazado al código HTML mediante selectores de elementos, atributos, clases e identificadores. Esto puede parecer un poco complicadillo pero es más sencillo de lo que parece.

Debajo te doy un ejemplo de código CSS. Es el que pondríamos si quisieramos que el color de todos nuestros párrafos de texto fuera en negro:

p { color: black;}

Este trozo de código utiliza un selector (p). Como ves coincide con el párrafo de texto en HTML (<p>). Esto quiere decir que todos los párrafos se verían en color negro.

Del mismo modo, podemos determinar que todos los títulos <h1> tengan el color rojo o todos los enlaces <a> tengan el azul. También observarás que entre los símbolos {} se coloca un código que indica que el color tiene que ser negro. Este código es lenguaje CSS y si quieres aprender más sobre él te recomiendo realizar algún curso básico (más adelante te recomiendo uno gratis).

Si queremos que un párrafo concreto (y no todos) se vea de color diferente, la cosa se complica un poco. La forma de indicar esta concreción se hace mediante lo que se llama una clase.

Primero debes insertar la clase en el HTML del párrafo que quieras que sea azul.

Veamoslo:

<p class=”parrafo-azul”>Este párrafo lo quiero en azul</p>

A continuación debes determinar en CSS cómo quieres que se vea la clase ‘parrafo-azul’:

.parrafo-azul {color:blue;}

Mediante la clase ‘parrafo-azul’ podemos escoger solamente los párrafos que queramos que vayan en azul.

El nombre de las clases es libre (no tiene un código establecido) y puedes ponerlo en los elementos HTML que quieras.

Además de a párrafos, puedes aplicar clases a títulos, a enlaces, a imágenes, etc.

Qué hace y qué no hace el CSS

El CSS te permite dar a tu web un aspecto determinado utilizando selectores, clases e identificadores (que son parecidos a las clases). Con ellos puedes determinar colores, tipografías, espacios, efectos, etc.

¿Qué es lo que no puedes hacer con CSS? Pues establecer qué elementos se deben mostrar en una página, ni tampoco si tienen que realizar alguna acción.

Ahora voy a darte un nuevo ejemplo en el que vamos a combinar HTML y CSS con mayor profundidad. Mírate los códigos un buen rato y fácilmente entenderás el funcionamiento.

Mediante este HTML:

<div class="entrada-blog">

  <p class="titulo-entrada">4 combinaciones de fuentes tipográficas perfectas para web</p>

</div>

  <div class="contenedor-imagen-destacada">

      <img src="https://srmomo.com/wp-content/uploads/2017/09/combinaciones.png" class="imagen-destacada"/>

</div>

Y este CSS:

.entrada-blog {background-color:#f9f9f9;padding:60px 20px 20px 20px;text-align:center;border-radius:15px 15px 0 0;}
.titulo-entrada {font-size:18px;color:#28B089;letter-spacing:2px;font-family:'Poppins';}
.imagen-destacada {border-radius:0 0 15px 15px;}
.contenedor-imagen-destacada {background-color:#f9f9f9;width:100%;}

Obtenemos esto:

¿Recuerdas el ejemplo anterior a éste? Pues ahora ves lo mismo pero con estilo. Al HTML le hemos añadido CSS.

Espero que con este ejemplo te haya quedado más claro las diferencias entre HTML y CSS y cómo se complementan el uno al otro 🙂

Diferencias entre HTML y CSS: Curiosidades útiles

• Es importante que utilices con cabeza las etiquetas HTML de los títulos. Lo es por temas de SEO: las etiquetas de títulos y párrafo de texto determinan a Google cómo se organiza el contenido escrito y qué es lo más importante. Por eso te recuerdo que debes colocar la palabra clave en la etiqueta <h2> que corresponde a ‘Título 2’: es la que mejor te ayudará a posicionar la keyword.
• Yo misma empecé a aprender lo que sé de HTML y CSS gracias a CodeAcademy. Existen muchos cursos sobre desarrollo web y codificación. Los básicos de HTML y CSS son una excelente forma de iniciarse y ampliar los conceptos que te he explicado en este artículo.
• Mantener buenas prácticas de HTML y CSS te permitirá que tu web cargue más rápido y mejore su puntuación SEO.
• Existen versiones de HTML y CSS. Actualmente nos encontramos en las versiones HTML5 y CSS3. La diferencia entre las diferentes versiones de cada lenguaje radica en que se van incorporando nuevas prácticas a medida que los navegadores se van desarrollando y avanzando.

¿Qué te ha parecido este artículo sobre diferencias entre HTML y CSS? ¿Tienes alguna duda? ¿Crees que me he dejado algo?