¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje que se utiliza para definir el estilo y la
apariencia de un documento web. Se introdujo en 1996 y desde entonces ha
evolucionado, convirtiéndose en una herramienta esencial para el desarrollo web
moderno.
¿Cómo funciona CSS?
CSS se aplica a documentos HTML o XML para cambiar su presentación. Esto se logra
mediante la selección de elementos HTML y la aplicación de reglas de estilo
específicas. Un archivo CSS puede incluir:
• Selectores: Identifican a qué elementos HTML se aplicarán los estilos. Por
ejemplo, puedes seleccionar todos los párrafos (<p>), encabezados (<h1> a
<h6>), o elementos con una clase específica.
• Propiedades y valores: Definen qué estilos se aplican. Por ejemplo, color,
font-size, margin, padding, etc. Cada propiedad tiene un valor específico,
como color: red; o font-size: 16px;.
Tipos de CSS
1. CSS Inline: Se aplica directamente en el elemento HTML usando el atributo
style. Por ejemplo:
html
Copiar código
<p style="color: blue;">Este texto es azul.</p>
2. CSS Interno: Se incluye en la sección <head> del documento HTML dentro de
una etiqueta <style>.
html
Copiar código
<style>
body {
background-color: lightgrey;
}
</style>
3. CSS Externo: Se escribe en un archivo separado con la extensión .css y se
vincula en el documento HTML con una etiqueta <link>.
html
Copiar código
<link rel="stylesheet" type="text/css" href="styles.css">
Ventajas de CSS
• Separación de contenido y estilo: Esto permite mantener el HTML limpio y
estructurado, lo que facilita la actualización y el mantenimiento del diseño.
• Reutilización de estilos: Un archivo CSS puede ser utilizado por múltiples
páginas, lo que asegura una apariencia consistente en todo el sitio web.
• Facilidad de mantenimiento: Cambiar el diseño de un sitio se puede hacer
modificando solo el archivo CSS, sin necesidad de tocar el HTML.
• Soporte para diseño responsivo: CSS permite crear diseños que se adaptan
a diferentes tamaños de pantalla utilizando técnicas como media queries.
Propiedades Comunes
Algunas propiedades CSS comunes incluyen:
• Color y fondo: color, background-color, background-image.
• Tipografía: font-family, font-size, font-weight, line-height.
• Caja modelo: margin, padding, border, width, height.
• Posicionamiento: position, top, left, right, bottom.
• Flexbox y Grid: Para crear diseños más complejos y responsivos.
Herramientas y Preprocesadores
Existen herramientas y preprocesadores como SASS y LESS que amplían las
capacidades de CSS, permitiendo usar variables, anidación y otras características
que facilitan el desarrollo.
Conclusión