CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado 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 lo demuestra. 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 con uno o varios archivos CSS.
CSS funciona asociando reglas de estilo a elementos o grupos de elementos HTML específicos, controlando aspectos como los colores, las fuentes, el espaciado, el posicionamiento, etc.
Ejemplos de uso de CSS:
Estilo del texto:
h1 {
color: #333;
font-size: 24px;
font-weight: bold;
}Esta regla CSS establece el color, el tamaño y el peso de la fuente para todos los elementos de la página.
Disposición y posicionamiento:
.container {
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}Esta regla CSS establece la anchura de un elemento con la clase "contenedor", lo centra horizontalmente en la página y utiliza flexbox para distribuir uniformemente sus elementos hijos.
Diseño adaptable:
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}Esta consulta de medios CSS aplica estilos a elementos con la clase "columna" cuando la anchura de la pantalla es de 600 píxeles o menos, haciendo que el diseño responda 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 "botón" y añade un efecto de transición suave cuando el color de fondo cambia al pasar el ratón por encima.
Estos son sólo 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 con capacidad de respuesta, mejorando la experiencia del usuario y haciendo más atractivos los sitios web.