CSS (Hojas de Estilo en Cascada) es un lenguaje de hojas de estilo que se utiliza para describir la presentación y el formato de un documento escrito en HTML o XML. Permite a los desarrolladores separar el diseño visual y la maquetación de una página web de su estructura y contenido.
Al separar el diseño visual (CSS) de la estructura y el contenido (HTML), los usuarios pueden simplemente cambiar el archivo CSS para obtener un diseño completamente diferente.
El sitio web CSS Zen Garden demuestra esto. El sitio enumera variaciones de su diseño. Lo único que crea este cambio visual es el uso de un archivo CSS diferente.
La mayoría de los sitios web utilizan CSS. En la sección head del HTML de una página hay una URL que enlaza a uno o varios archivos CSS.
CSS funciona asociando reglas de estilo con elementos HTML específicos o grupos de elementos, controlando aspectos como colores, fuentes, espaciado, posicionamiento y más.
Ejemplos de cómo se utiliza CSS:
Estilo de texto:
h1 {
color: #333;
font-size: 24px;
font-weight: bold;
}Esta regla CSS establece el color, el tamaño de fuente y el grosor de la fuente para todos los elementos de la página.
Diseño y posicionamiento:
.container {
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}Esta regla CSS establece el ancho de un elemento con la clase "container", lo centra horizontalmente en la página y utiliza flexbox para distribuir sus elementos hijos de manera uniforme.
Diseño adaptable:
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}Esta consulta de medios CSS aplica estilos a los elementos con la clase "column" cuando el ancho de la pantalla es de 600 píxeles o menos, haciendo que el diseño sea adaptable a diferentes tamaños de pantalla.
Las consultas de medios permiten que los sitios web se vean bien tanto en monitores grandes como en tabletas y teléfonos móviles.
Efectos especiales: Animación y transiciones:
.button {
background-color: #007bff;
color: #fff;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}Esta regla CSS establece el color de fondo y el color del texto para los elementos con la clase "button" y añade un efecto de transición suave cuando el color de fondo cambia al pasar el ratón por encima.
Estos son solo algunos ejemplos de cómo se utiliza CSS para dar estilo y formato a las páginas web.
CSS proporciona una amplia gama de propiedades y selectores que permiten a los desarrolladores crear diseños visualmente atractivos y adaptables, mejorando la experiencia del usuario y haciendo que los sitios web sean más atractivos.