CSS explicado: El Lenguaje que da estilo a tu HTML

CSS explicado: El Lenguaje que da estilo a tu HTML

Si el HTML fuera el esqueleto de una página web, CSS sería su ropa, su estilo y su personalidad.

CSS es un lenguaje de estilo que sirve para personalizar el aspecto de una web. Las siglas corresponden a Cascading Style Sheets o “Hojas de Estilo en Cascada”, un lenguaje creado para definir la apariencia visual de los sitios web: colores, tamaños, tipografías, alineaciones, márgenes o animaciones.

Su origen responde a una necesidad de dar formato al lenguaje HTML: cuando en los años noventa los desarrolladores empezaron a crear webs más complejas, el HTML se quedó corto. En seguida se dieron cuenta de que no estaba pensado para definir cómo debía verse una página, solo servía para estructurar el contenido. Por eso, en 1996, el World Wide Web Consortium (W3C) desarrolló CSS para separar el contenido de su diseño. Desde entonces, HTML organiza la información y CSS se encarga de que esa información se vea bien.

Sin CSS, Internet sería un lugar menos creativo. Las webs serían texto negro sobre fondo blanco, sin ningún tipo de formato. Un poco como ocurría en los 90, donde el diseño brillaba por su ausencia y nadie imaginaba que se llegarían a crear verdaderas obras de arte con las páginas web.

Pro tip: no confundir CSS con CMS o Javascript (JS)

El antes y el después del CSS

HTML y CSS funcionan como un equipo. El primero define la estructura, el contenido y la jerarquía de la página; el segundo da forma, color y coherencia visual. Sin HTML, no hay base. Sin CSS, no hay diseño.

Antes de la llegada de CSS, los desarrolladores tenían que escribir los estilos dentro del propio HTML, repitiendo las mismas instrucciones una y otra vez: color, tamaño de letra, alineación… Las páginas eran pesadas, difíciles de mantener, poco flexibles, en lenguaje coloquial: “feúchas”. Con CSS, programación y diseño se separaron en HTML y CSS, siendo este un archivo externo (o interno) que el navegador interpreta y aplica automáticamente a todas las páginas HTML que lo enlacen

Esta separación del contenido y el estilo tiene muchos beneficios. El principal es separar el trabajo de los programadores y los diseñadores, pero hay más. También mejora la velocidad de carga y la consistencia del sitio web ya que, si quieres cambiar un color o una tipografía, basta con modificar una línea del archivo CSS para actualizar toda la web. Por ejemplo, si quieres que todos los párrafos aparezcan en azul y centrados, bastaría con escribir:

p {

color: blue;

text-align: center;

}

De este modo, todos los elementos <p> del documento HTML adoptarán ese formato.

Hoy, para construir una página web sencilla (porque si quieres una muy profesional, lo mejor es contratar a un experto en diseño web) no hace falta saber de lenguaje HTML o CSS. Páginas como WordPress utilizan plantillas o plugins de constructores visuales como Elementor, que cualquiera puede usar con un poco de práctica.

Sin embargo, incluso al usar estas herramientas, tener conocimientos de HTML y CSS es necesario para poder personalizar a fondo, solucionar errores u optimizar el rendimiento del sitio web.

HTML y CSS, una relación inseparable

Actualmente, es raro ver una página que no utilice CSS. El diseño es uno de los fundamentales de una web en internet, aquello que puede llamar la atención del usuario y transmitirle una emoción o sensación que se quede grabada en su cerebro. Por eso, podemos decir que existe entre ellos una relación inseparable.

Comentarios

Déjanos un comentario o cuéntanos algo.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *