Definición de CSS (lenguaje de estilo)
CSS (Cascading Style Sheets, en español Hoja de Estilo en Cascada) es un lenguaje utilizado para describir y definir el aspecto visual de documentos escritos en HTML, XHTML, XML y tecnologías relacionadas.
CSS es un estándar desarrollado y mantenido por la W3C y está ampliamente soportado por todos los navegadores web modernos.
La principal característica de CSS es permitir la separación entre el contenido y la presentación visual de una página web. Esto facilita el diseño, mantenimiento y actualización de los sitios, ya que los estilos pueden ser modificados en un único archivo, afectando a todas las páginas que lo utilicen.
CSS puede controlar una amplia gama de aspectos visuales, como colores, tipos y tamaños de fuente, márgenes, alineaciones, posiciones, bordes, fondos, espaciados, animaciones y transiciones, entre otros.
Ejemplo de uso básico:
h1 {
color: blue;
font-size: 28px;
}
En este ejemplo, todos los títulos h1 tendrán color azul y tamaño de fuente de 28 píxeles.
CSS también permite la creación de diseños responsivos, es decir, que se adaptan dinámicamente a diferentes dispositivos y tamaños de pantalla, como teléfonos móviles, tabletas, computadoras o impresoras.
CSS puede aplicarse de tres formas principales:
La sintaxis básica de una regla CSS es:
selector {
propiedad1: valor1;
propiedad2: valor2;
}
Ejemplo:
p.destacado {
background-color: yellow;
font-weight: bold;
}
Aquí, todos los párrafos con la clase "destacado" tendrán fondo amarillo y texto en negrita.
Características de CSS
- Separación de contenido y presentación: Permite que el contenido HTML se mantenga independiente del diseño visual.
- Reutilización: Los mismos estilos pueden aplicarse a múltiples páginas o elementos.
- Cascada y herencia: Permite combinar estilos de diferentes fuentes y priorizar según la especificidad y el orden.
- Diseño adaptativo: Facilita la creación de sitios que se ven bien en cualquier dispositivo o resolución.
- Animaciones y efectos visuales: Se pueden crear transiciones, animaciones y transformaciones avanzadas.
Ejemplo de adaptabilidad (media queries):
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
Este ejemplo reduce el tamaño de la fuente cuando la pantalla es menor a 600 píxeles de ancho.
El tipo MIME de CSS es text/css, registrado por RFC 2318.
Para más información, leer: Hoja de estilo.
Resumen: CSS
CSS es el lenguaje estándar para definir la presentación visual de documentos web. Permite separar el contenido de la presentación, facilitando el desarrollo y mantenimiento de sitios web modernos, atractivos y adaptables.
¿Cuál es la función principal de CSS en la estructura de un sitio web?
La función principal de CSS es definir el aspecto visual de un documento, permitiendo controlar el diseño, color, fuente, tamaño y otros estilos de los elementos HTML, favoreciendo la separación entre contenido y presentación.
¿Cuáles son las ventajas de utilizar CSS en un sitio web?
¿Cuál es la sintaxis básica de una regla CSS?
La sintaxis básica de una regla CSS consiste en un selector, seguido de un bloque de propiedades y valores entre llaves. Ejemplo:
selector {
propiedad1: valor1;
propiedad2: valor2;
}
¿Puede un elemento HTML tener múltiples clases en CSS?
Sí, un elemento HTML puede tener múltiples clases en CSS. Para aplicar varias clases a un elemento, se separan por un espacio en el atributo "class" del elemento HTML.
Ejemplo:
<div class="alerta importante">Mensaje</div>
¿Qué significa la propiedad "cascade" en CSS?
La "cascada" en CSS se refiere al mecanismo que determina cómo se combinan y sobrescriben las reglas de estilo cuando existen conflictos. La prioridad depende del origen (hoja externa, interna, en línea), la especificidad y el orden en que aparecen las reglas.
¿Cuándo se recomienda utilizar selectores descendentes en CSS?
Se recomienda utilizar selectores descendentes cuando se desea aplicar estilos a elementos específicos que están contenidos dentro de otros elementos. Esto permite mayor control y precisión en la aplicación de estilos.
Ejemplo:
nav ul li a {
color: green;
}
Aquí, solo los enlaces dentro de listas desordenadas dentro de un elemento nav serán de color verde.
Relacionado:
- Hoja de estilo.
Autor: Leandro Alegsa
Actualizado: 19-06-2023
¿Cómo citar este artículo?
Alegsa, Leandro. (2023). Definición de CSS. Recuperado de https://www.alegsa.com.ar/Dic/css.php
