Cuando hablamos de diseño web, uno de los términos más importantes es CSS. Este lenguaje permite personalizar la apariencia de una página, mejorar la experiencia del usuario y garantizar un diseño atractivo y funcional. En este artículo, exploraremos qué es CSS, cómo aplicarlo correctamente y cuáles son sus principales propiedades.
¿Qué es CSS y para qué sirve?
CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para definir la presentación de un sitio web. Su propósito es separar la estructura del contenido (HTML) de su apariencia, permitiendo modificar elementos como colores, tipografías, márgenes y disposición sin alterar el código HTML.
Algunas de las principales ventajas de CSS
- Separación de contenido y diseño: Facilita el mantenimiento y escalabilidad del código.
- Mejor rendimiento: Reduce la carga de trabajo del navegador, optimizando la velocidad de la página.
- Diseño adaptable: Permite la creación de interfaces responsivas que se ajustan a diferentes dispositivos y tamaños de pantalla.
Cómo aplicar CSS en una página web
Existen tres formas principales de aplicar CSS en un documento HTML:
1. CSS en línea (Inline CSS)
Se define dentro del atributo style de cada etiqueta HTML.Ejemplo:
| <p style=»color: blue; font-size: 18px;»>Este es un párrafo con CSS en línea.</p> |
Ventaja: Se aplica de inmediato a un único elemento.
Desventaja: Difícil de mantener en proyectos grandes.
2. CSS interno (Internal CSS)
Se coloca dentro de la etiqueta <style> en el <head> del documento HTML.Ejemplo:
| <head> <style> p { color: red; font-size: 20px; } </style></head><body> <p>Este es un párrafo con CSS interno.</p></body> |
Ventaja: Facilidad de mantenimiento en una sola página
Desventaja: Dificulta la escalabilidad y el rendimiento
3. CSS externo (External CSS)
Se guarda en un archivo .css separado y se vincula al HTML con <link>.Ejemplo:
| <head> <link rel=»stylesheet» href=»styles.css»></head> |
Y en el archivo styles.css:
| p { color: green; font-size: 22px;} |
Ventaja: Facilita la gestión del diseño en sitios web grandes.
Desventaja: Necesita archivos adicionales para funcionar.
Principales propiedades de CSS
CSS cuenta con una gran cantidad de propiedades para personalizar el diseño de un sitio web. A continuación, te presentamos algunas de las más importantes:
| Tipo de Propiedad | Propiedades CSS | Descripción |
| Color y fondo | color, background-color | Define los colores del texto y el fondo de los elementos. |
| Fuentes y texto | font-family, font-size, text-align | Controla la apariencia del texto, incluyendo la fuente, tamaño y alineación. |
| Espaciado | margin, padding | Gestiona los márgenes y el espaciado interno de los elementos. |
| Bordes | border, border-radius | Define los bordes y su apariencia, incluyendo el redondeo de esquinas. |
| Posicionamiento | position, display, flexbox, grid | Permite posicionar los elementos y definir su comportamiento en el diseño. |
