A la hora de comenzar a armar una página web, debemos comenzar aprendiendo HTML y CSS. El maquetado se basa en estos dos lenguajes y permite
Desde lo conceptual debemos saber que CSS significa Cascading Style Sheets o Hojas de Estilo en Cascada. Es un lenguaje que describe cómo se presentan los elementos HTML en un medio, generalmente una pantalla (pero también podría ser en medios de impresión).
Primeros pasos
Mientras que HTML estructura el contenido (como títulos, párrafos, imágenes), CSS se encarga del aspecto visual: colores, tamaños, márgenes, posiciones y más.
Veamos un ejemplo simple de una página HTML, en la cual se incorporan los estilos en el encabezado.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Este texto se verá en azul y con tamaño de 18px.</p>
</body>
</html>
En este ejemplo se define un único párrafo con un texto, en el cuerpo del documento. En la cabecera están definidos los estilos en los cuales se especifica que todos los párrafos del documentos tendrán un color de texto azul y un tamaño de fuente de 18 píxeles.
¿Qué es la sintaxis en CSS?
En el apartado anterior mostraba en un ejemplo en el cual podíamos apreciar la sintaxis de HTML con CSS incorporado dentro de la etiqueta <style>. Pero … ¿qué es la sintaxis?
Cuando hablamos de sintaxis, nos referimos a la forma en que escribimos las instrucciones para que el navegador las entienda. En CSS, cada regla tiene esta estructura básica:
selector {
propiedad: valor;
}
Ejemplo práctico en el que aplicamos un color a los títulos principales:
h1 {
color: red;
}
Esto indica que todos los <h1> deben mostrarse en color rojo.
- Selector: define qué elementos HTML se van a modificar (
h1,p,.clase,#id). Aprender a usar los selectores es muy importante para dominar CSS. - Propiedad: qué característica vamos cambiar (
color,font-size,margin…). - Valor: el nuevo valor que tendrá esa propiedad (
red,20px,center…).
¿Cómo se integra CSS con HTML?
A la hora de integrar nuestros estilos con los documentos de nuestro sitio, podemos pensar que existen tres formas básicas de aplicar CSS a un documento HTML:
CSS en línea o inline(no recomendado, pero útil para cambios rápidos o, en algunos casos, para Newsletters):
<p style="color: green;">Texto verde</p>
CSS interno (usando la etiqueta <style> dentro del <head>):
<head>
<style>
p {
color: blue;
}
</style>
</head>
CSS externo (en líneas generales, la mejor práctica):
<!-- En tu archivo HTML --> <link rel="stylesheet" href="estilos.css">
/* En el archivo estilos.css */
body {
background-color: #f5f5f5;
}
Es importante tener claro que la manera de escribir las reglas de CSS es igual si trabajamos con CSS en un archivo externo o dentro de la etiqueta <style> de un documento HTML. La diferencia principal es el alcance. Mientras que en el archivo externo podemos usar la hoja estilos para varias páginas de nuestro sitio, optar por incluir los estilos dentro de un documento lo limita a ese archivo.
La opción de estilos inline sigue cumpliendo la lógica propiedad: valor , pero en ese caso no se especifica el selector, ya que se aplica al elemento en el que declaremos las reglas.
Alcance y capacidades de CSS
CSS es muy versátil y no se limita solo a estilos. Desde sus primeras versiones hasta la actualidad ha madurado y evolucionado en gran medida. A continuación detallo algunas de las capacidades que ofrece:
- Cambiar colores, tipografías y tamaños.
- Posicionar elementos en la página (flex, grids, absolute, etc.)
- Crear animaciones y transiciones.
- Adaptar la vista según el tamaño del dispositivo (Responsive Web Design).
- Controlar el espaciado, bordes, sombras, fondos, opacidad, etc.
- Uso de variables y conceptos de lógica.
Este breve listado solo detalla algunas características de CSS. Es importante saber que sus propiedades son muchas para abarcarlas en un solo artículo. Además, se complementan con el dominio de técnicas de diseño web y maquetado, para lograr resultados profesionales.
Limitaciones de CSS
Aunque CSS es muy versátil, tiene algunas limitaciones:
- No puede manipular datos dinámicos de manera directa. Como por ejemplo los que llegan de una API externa (para eso se usa JavaScript)
- Se han incorporado variables y características que podrían considerarse dentro lógica condicional, pero no tiene las capacidades de un lenguaje de programación «clásico».
- La representación de los elementos puede variar entre navegadores. Esto se nota, especialmente en navegadores antiguos.
- No puede acceder a algunos de los eventos del navegador y de la ventana (características que están contempladas en JavaScript).
Buenas prácticas y organización del código
Para aprender CSS de forma clara y escalable existen diversas guías. Aquí comparto algunas recomendaciones básicas:
- Cuando creamos un proyecto, especialmente de múltiples páginas, se recomienda usar archivo externos para organizar mejor la separación del código. Separar el contenido (HTML) de la presentación (CSS). Esto hace el código más limpio y fácil de mantener.
- Usar nombres descriptivos para Ids y Clases. En muchos casos puede ser mejor optar por el inglés, y con guiones bajos o medios. Debemos evitar separación con espacios y caracteres especiales o letras que solo pertenecen a idiomas específicos.
- Evitar el uso de
!important. Lo sé, puede ser útil. Yo también lo uso en situaciones especiales. Pero aunque puede forzar un estilo, lo ideal es no recurrir a esta característica. Ya que si todo termina siendo importante en nuestro código … al final nada lo es. - Agrupar estilos por componentes puede resultar una buena práctica para organizar nuestros estilos.
Comenzar con CSS: conclusión
CSS es un lenguaje fundamental para dar estilo y apariencia visual a nuestros proyectos web. Gracias a él podemos cambiar colores, tamaños, posiciones y muchas otras cosas que hacen que un sitio tenga impacto y, a su vez, mantenga un ordenado y unidad visual. Aunque al principio parezca complicado, con algo de práctica se vuelve más claro y hasta divertido.
Aprender CSS es como aprender a decorar un espacio: primero comprendemos las reglas básicas, como qué elementos puedes cambiar y cómo hacerlo, y luego podemos experimentar y a encontrar el estilo adecuado. Lo importante es no bajar los brazos si algo no sale bien al comienzo, porque equivocarse es parte del proceso de aprendizaje.
Una buena forma de mejorar es probar pequeños ejemplos, ver cómo cambian las cosas en pantalla y usar herramientas del navegador para observar cómo está hecho un sitio. También ayuda mucho escribir código con orden y usar comentarios, para entenderlo mejor y no perdernos. Todo esto es clave, especialmente, cuando damos los primeros pasos en el aprendizaje de este lenguaje.
Con el tiempo, CSS se convierte en una herramienta natural y fundamental en nuestro flujo de trabajo con páginas web. Todo requiere tiempo y práctica.
Si te interesa saber más sobre CSS déjame un comentario o escríbeme un mensaje.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta