¿Qué es CSS (estilos en cascada)? Una guía completa

Todo lo que necesita saber sobre CSS (Estilos en cascada): qué es, para qué sirve y cómo formatear su sitio web usando CSS.

¿Qué es CSS?

CSS significa hoja de estilo en cascada. En la traducción, significa hojas de estilo en cascada. CSS es un mecanismo simple para formatear visualmente documentos de Internet.

Cuando aplica CSS a un documento HTML, puede modificar elementos como la fuente, el color y el espaciado. Esto le permite mantener una apariencia coherente en varias páginas de un sitio web. CSS separa el contenido del diseño, garantizando que los sitios web sean accesibles y tengan un estilo eficaz, mejorando la experiencia del usuario.

Antes de estudiar CSS, recomiendo mirar primero este completo tutorial de HTML .

Historia de CSS

El nacimiento de CSS, conocido formalmente como Hojas de estilo en cascada , se remonta a 1996, cuando el W3C (World Wide Web Consortium) lanzó CSS1 . La introducción de CSS revolucionó el diseño web al proporcionar un método nuevo y más eficiente para diseñar páginas web. Desde entonces, CSS ha evolucionado en varias versiones. CSS2.1 , que vino después de CSS1, introdujo características como posicionamiento fijo e índice z. La última evolución, CSS3 , dividió la especificación en módulos e introdujo nuevas características como animaciones, flexbox para diseño y consultas de medios para diseño responsivo.

Una vez que comprenda qué es CSS y su contexto histórico, estará mejor preparado para utilizar todo su potencial en el desarrollo web.

CSS se usa en todas partes

Este lenguaje se usa para estilizar visualmente la mayoría de los sitios en Internet. Por ejemplo, CSS se usa para definir el diseño, el color y el estilo general de una página. Puede usar CSS para configurar fuentes, imágenes, fondos de página, diseños de página y más.

En WordPress , CSS utiliza temas individuales . Determina su diseño, diseño general y estilo.

Conceptos básicos de CSS

Comprender los conceptos básicos de CSS incluye aprender su sintaxis y estructura, y cómo usar selectores y propiedades para diseñar elementos web.

Sintaxis y estructura

CSS consta de una serie de reglas que definen cómo se muestran los elementos HTML. Estas reglas constan de selectores y declaraciones. La declaración en sí consta de propiedades y sus valores correspondientes, que se estructuran de la siguiente manera:

selektor {
   vlastnosť: hodnota;
}

Los selectores son los nombres asignados a los elementos de la página web que desea modificar. Las declaraciones están entre llaves{} y declara cómo quieres diseñar los elementos seleccionados.

Selectores y propiedades

Hay diferentes tipos de selectores :

• Selectores de elementos que seleccionan elementos HTML según el nombre de la etiqueta.
• Selectores de clase que seleccionan elementos en función de un atributo.class . Su prefijo es. (punto).
• Selectores de ID que seleccionan un elemento único en función de su atributo.id con un prefijo# (símbolo de almohadilla).

Cada selector puede ir seguido de una o más declaraciones , que son pares propiedad-valor separados por dos puntos y terminados en punto y coma.

Las propiedades son aspectos de los elementos HTML que desea modificar, comocolor ,font-size ,margin ,padding etc. Una regla representa la declaración completa, incluido un selector y un bloque de declaraciones.

.trieda {
   color: blue;
   font-size: 14px;
}

Cada propiedad va seguida de un valor que especifica cómo se debe aplicar la propiedad al elemento. Cada par propiedad-valor es una declaración .

Después de comprender los conceptos básicos de sintaxis, selectores y propiedades CSS, puede comenzar a diseñar elementos de la página web para crear contenido web visualmente impresionante.

Integración CSS

Integrar CSS en HTML le ayuda a controlar la presentación de su sitio web. Ya sea que prefiera mantener los estilos cerca de las etiquetas, equilibrar la accesibilidad y la mantenibilidad, o mantener las cosas completamente separadas, CSS le ofrece una variedad de métodos para usar estilos.

CSS en línea

CSS en línea es cuando aplicas un estilo directamente en tus etiquetas HTML usando un atributostyle . Este método se utiliza generalmente para aplicar estilos únicos a un único elemento HTML. Aquí hay un ejemplo:

<p style="color: blue;">Tento text je modrý.</p>

El uso de CSS en línea afecta la capacidad de mantenimiento de sus documentos HTML porque los estilos no están centralizados, lo que dificulta su administración cuando hay varias instancias del mismo estilo.

CSS interno

El estilo CSS interno se define en<head> del documento HTML dentro de las etiquetas<style> . Esta es una opción viable cuando trabaja con un solo documento HTML y desea aplicar estilos que son exclusivos de esa página.

<head>
<style>
  body {
    background-color: lightgrey;
  }
</style>
</head>

No necesita ningún archivo adicional y los estilos se aplican de manera consistente en toda la página, pero al igual que con CSS en línea, el estilo interno no admite la reutilización en varias páginas.

CSS externo

Utilice CSS externo para vincular a un archivo separado.css desde un documento HTML que puede controlar los estilos de varias páginas de un sitio. Este método se logra usando una etiqueta.<link> en la sección<head> :

<head>
<link rel="stylesheet" href="styles.css">
</head>

Tus estilos están contenidos en un único archivo con la extensión.css , lo que facilita el ajuste y mantenimiento. Escribe su CSS en un editor de texto y carga la hoja de estilo junto con los archivos HTML. Este es el método más eficaz para editar varios documentos HTML con un diseño coherente.

Editar estilo de texto

En CSS, tienes la capacidad de controlar los aspectos visuales del texto, desde la familia de fuentes hasta el espaciado entre letras. Utilice propiedades para definir cómo debe aparecer su texto en su sitio web, garantizando legibilidad y atractivo estético.

Fuentes y tipografía

Considere tanto la estética como la legibilidad al elegir fuentes para su sitio web. La familia de fuentes especifica el tipo de fuente, que puede ser un nombre específico, como «Arial», o un grupo general, como «serif». La propiedad de tamaño de fuente ajusta el tamaño de su texto y generalmente se define en píxeles, em o rem.

Un ejemplo de uso de una familia de fuentes:

p {
  font-family: Arial, sans-serif;
}

Ejemplo de uso del tamaño de fuente:

h1 {
  font-size: 32px;
}

Propiedades y efectos del texto.

Diferentes propiedades afectan otros aspectos del texto:

• Color : determina el color del texto. Puede utilizar colores con nombre, valores hexadecimales, RGB o HSL.
• Espaciado entre letras : aumenta o disminuye el espacio entre caracteres, normalmente medido en píxeles o em.

Recuerde mantener las propiedades del texto consistentes para crear una apariencia coherente para su sitio web.

Modelo de caja CSS

El modelo de caja CSS es un concepto fundamental que determina cómo se representan los elementos en una página web. Define la estructura y el diseño de cada elemento HTML como un cuadro rectangular que contiene bordes, márgenes, relleno y el contenido real.

Márgenes y contornos

En el modelo de caja, los bordes incluyen contenido y relleno, actuando como intermediario entre el relleno y los márgenes. Siempre que estableces el ancho de un borde con CSS, defines el grosor de ese borde. Propiedadborder se puede dividir en subpropiedades para cada lado (border-top ,border-right ,border-bottom ,border-left ), permitiéndole personalizar cada uno individualmente. También puedes definir un estilo (solid ,dotted ,dashed etc.) y el color del borde.outline es similar a un borde, pero no ocupa espacio en el modelo de caja: se dibuja fuera del marco del elemento y no afecta la posición del elemento.

Márgenes y sangría

Los bordes son la capa exterior del modelo de caja y crean espacio entre el borde de una caja y otro. Se derrumban cuando se encuentran; se utiliza un tamaño de borde mayor cuando los campos adyacentes tienen bordes. Los bordes son transparentes y tienen las siguientes propiedades:margin-top ,margin-right ,margin-bottom ,margin-left código> .

El relleno está ubicado directamente dentro de los bordes, rodeando el contenido real, y su función principal es crear espacio dentro del marco, entre el contenido y el borde. A diferencia de los bordes, es posible definir un color de relleno que coincida con su diseño porque es parte del cuadro del elemento. También tiene propiedades individuales para cada lado (padding-top ,padding-right ,padding-bottom apadding-left ).

Recuerde que las propiedades CSSwidth aheight consulte el tamaño del contenido. Si incluye márgenes y relleno, aumentan el tamaño total del campo a menos que use la propiedadbox-sizing establecer en un valorborder-box , que cambia el tamaño del contenido para incluir relleno y márgenes dentro del ancho y alto declarados.

Formato visual

En CSS, el formato visual es un aspecto clave que determina cómo aparecen los elementos en una página web. Su comprensión de sus principios afecta todo, desde el diseño hasta el contexto de la composición.

Fondo y colores

CSS le permite configurar el color de fondo y la imagen de fondo de los elementos. Características comobackground-color utiliza para especificar un color sólido, mientrasbackground-image Le permite colocar una imagen detrás del contenido. Propiedadbackground combina estas configuraciones junto con otras configuraciones comobackground-position abackground-repeat , lo que le brinda un control detallado sobre las imágenes de fondo del elemento.

Posicionamiento e índice Z

Utiliza una propiedad CSS para controlar el diseño de los elementos. position con valores como static, relative, absolute, fixed a sticky. Propiedadz-index trabaja en conjunto con el posicionamiento para determinar el orden de apilamiento de los elementos; más altoz-index significa que el elemento estará más cerca de la parte superior del contexto de la composición. Recuerda esoz-index solo afecta a elementos que tienen un valorposition otro questatic .

Flexbox y cuadrícula CSS

Flexbox y CSS Grid son potentes modelos de diseño que ofrecen diferentes enfoques para crear diseños responsivos. Flexbox funciona en un eje, fila o columna unidimensional, lo que lo hace ideal para diseños lineales. Utilice propiedades como para manipular el diseño.display: flex y otras propiedades secundarias comoflex-grow aflex-shrink .

CSS Grid, por otro lado, funciona en un sistema de cuadrícula bidimensional que está controlado por propiedades comodisplay: grid . tu definesgrid-template-columns agrid-template-rows para crear un marco para su contenido. CSS Grid permite fácilmente diseños complejos, lo que le permite colocar elementos en ubicaciones precisas dentro de la estructura de la cuadrícula.

Técnicas de diseño avanzadas.

En esta sección, aprenderá cómo mejorar el atractivo visual y la interactividad de sus páginas web utilizando CSS. Dominar estas técnicas le permitirá crear diseños dinámicos y responsivos que capten la atención del usuario.

Transformaciones y transiciones

Las transformaciones le permiten rotar , escalar , inclinar y traducir elementos para cambiar la forma en que se representan en una página web. Cuando aplicas una transformación, el cambio es instantáneo, pero puedes controlar el tiempo combinándolo con transiciones .

• Doblar : transform: rotate(45deg);
• Escala : transform: scale(1.5);
• Traducir : transform: translate(30px, 50px);
• Chaflán : transform: skew(20deg, 15deg);

Las transiciones permiten cambios fluidos entre estados. Cuando especifica una transición, debe definir qué propiedad se pasa, la duración, la función de sincronización y cualquier retraso.

transition: background-color 0.5s ease-in-out 0s;

Al modificar estos parámetros, creará un movimiento suave y natural que agregará sofisticación a su página.

animaciones

Las animaciones CSS llevan la interactividad al siguiente nivel al definir una secuencia de estilos por los que pasará un elemento. Para crear una animación, primero debe especificar fotogramas clave , que describen los puntos de inicio y fin de la animación, así como los pasos intermedios:

@keyframes slidein {
   from { transform: translateX(0%); }
   to { transform: translateX(100%); }
}

Para activar la animación, aplíquela al elemento y defina su duración, función de temporización y número de iteraciones:

prvok {
    animation: slidein 3s easy-in-out infinite;
}

Las animaciones pueden repetirse sin cesar o reproducirse una cantidad determinada de veces, lo que le brinda un control preciso sobre cómo los elementos interactúan con los usuarios en su sitio. Estas técnicas de diseño avanzadas harán que su sitio web se destaque con una apariencia profesional y pulida y una experiencia de usuario atractiva.

Diseño web adaptable

El diseño web responsivo (RWD) garantiza que su sitio web se vea bien y funcione bien en diferentes dispositivos. Se centra en proporcionar una experiencia fluida en diferentes tamaños de pantalla utilizando cuadrículas variables, imágenes flexibles y consultas de medios.

Preguntas de los medios

Las consultas de medios son la piedra angular del diseño web responsivo. Le permiten aplicar estilos CSS según el tamaño, la orientación y la resolución de la pantalla del dispositivo. Por ejemplo, puede escribir una consulta de medios para cambiar el diseño de la página cuando el área de visualización tiene menos de 768 píxeles de ancho:

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

Este código garantiza que la clase.container ocupará todo el ancho de la pantalla en dispositivos con un área de visualización de más de 768 píxeles.

Unidades responsivas

En el diseño responsivo, es importante utilizar unidades que permitan que el diseño se adapte al entorno del usuario.

Los píxeles ( px ) son unidades absolutas y no se ajustan al tamaño de la pantalla, lo que puede provocar una mala experiencia de usuario en dispositivos móviles.

En su lugar, utilice unidades relativas como porcentajes ( % ), ancho de la ventana gráfica ( vw ) y alto de la ventana gráfica ( vh ). Por ejemplo, cambiar el tamaño de los elementos por porcentaje puede hacer que el contenido cambie proporcionalmente al área de visualización:

.content {
   width: 80%;
}

Esto lo hace maravilloso.content Un 80 % más ancho que su modelo principal, lo que permite un diseño fluido que se adapta a diferentes dispositivos.

Marcos y preprocesadores

En su viaje hacia la creación de diseños web elegantes y responsivos, encontrará que los marcos y preprocesadores CSS son herramientas poderosas que aumentan la eficiencia y la capacidad de mantenimiento de su código. Utilice estas herramientas para optimizar su flujo de trabajo y aplicar estilos sofisticados con menos esfuerzo.

Marcos CSS populares

Bootstrap : como uno de los marcos CSS más utilizados, Bootstrap le proporciona un conjunto completo de hojas de estilo prediseñadas. Obtendrá un sistema de cuadrícula receptivo, componentes prediseñados y complementos de JavaScript que acelerarán significativamente el proceso de desarrollo.

Fundación : Este es un marco sofisticado de nivel empresarial diseñado para brindar modularidad y flexibilidad. Foundation le ofrece un enfoque modular con diferentes plantillas para ayudarlo a crear fácilmente diseños complejos y responsivos.

Tailwind CSS : a diferencia de los marcos tradicionales, Tailwind CSS funciona según el principio de utilidad primero, ofreciéndole clases atómicas para crear sus propios diseños sin salir de HTML.

Uso de preprocesadores

SASS : este preprocesador extiende CSS con características como variables, reglas anidadas y mixins. Con SASS, puede escribir hojas de estilo más organizadas y fáciles de mantener que luego se compilan en CSS estándar.

LESS : Al igual que SASS, LESS mejora CSS con variables, mixins y funciones, lo que le permite crear estilos más dinámicos y efectivos. También compila en CSS para compatibilidad entre navegadores.

Stylus : ofrece gran flexibilidad y sintaxis expresiva, Stylus es un preprocesador que puede ejecutarse tanto de forma sincrónica como asincrónica y se adapta a una amplia gama de requisitos de proyectos.

Con los marcos CSS, puede aprovechar los componentes y sistemas de cuadrícula listos para usar, mientras que los preprocesadores le permiten escribir CSS en una construcción de programación que eventualmente se compila en un código comprensible para el navegador.

Mejores prácticas de CSS

El uso de las mejores prácticas al trabajar con CSS garantiza que sus hojas de estilo no solo sean eficientes, sino también mantenibles y escalables. Tenga en cuenta estos conceptos para aumentar el rendimiento y la coherencia de sus proyectos.

Escribir CSS de manera eficiente

Selectores y especificidad:

• Utilice selectores de clases para lograr una baja especificidad y anulaciones más sencillas.
• Evite selectores demasiado específicos para reducir la complejidad y mejorar el rendimiento.

Optimización del rendimiento:

• Minimizar el uso de propiedades costosas comobox-shadow afilter , lo que puede provocar que se vuelva a dibujar y formatear.
• Implemente la carga diferida para imágenes fuera de la pantalla usandoloading="lazy" , para ahorrar ancho de banda y aumentar la velocidad de la página.

Arquitectura y metodologías CSS.

Estrategias organizativas:

• Adopte una metodología como BEM (Block Element Modifier) ​​​​para lograr convenciones de nomenclatura coherentes.
• Estructura tu CSS usando una jerarquía clara, mientras que para proyectos más grandes considera SMACSS (Arquitectura escalable y modular para CSS) .

Escalabilidad y mantenibilidad:

• Al utilizar preprocesadores CSS como Sass, puede aprovechar variables, mixins y funciones para hojas de estilo más dinámicas.
• Considere arquitecturas CSS modulares como OOCSS (CSS orientado a objetos) para fomentar la reutilización y reducir la redundancia.

Si sigue estos pasos, creará un estilo CSS que no sólo funciona bien, sino que se adapta a su proyecto y al mismo tiempo es fácil de mantener.

Trabajando con CSS

Comprender cómo trabajar con CSS implica algo más que escribir reglas de estilo; también requiere pruebas rigurosas y garantizar la coherencia de los estilos en todos los navegadores.

Depuración y prueba

Cuando encuentra un problema con CSS, el primer paso es utilizar las herramientas de desarrollador en su navegador web. Estas herramientas le permiten revisar y editar HTML y CSS en tiempo real. Para un proceso de depuración simplificado:

1. Verifique el elemento que no se muestra correctamente.
2. Verifique las propiedades CSS que se le aplican.
3. Ajuste las propiedades y supervise los cambios en el navegador para identificar el código problemático.

Para realizar pruebas , es esencial verificar el CSS en diferentes páginas web y elementos dentro de su sitio web para garantizar la coherencia. Las herramientas de prueba automatizadas pueden simular una amplia gama de escenarios aplicando CSS a diferentes estructuras HTML para detectar inconsistencias o comportamientos inesperados.

Compatibilidad del navegador y sustitutos

La compatibilidad del navegador con las funciones CSS varía y es su responsabilidad asegurarse de que su sitio web se muestre correctamente en los principales navegadores. Solución de compatibilidad del navegador :

• Utilice recursos como caniuse.com para comprobar la compatibilidad de las propiedades CSS
• Implementar alternativas para navegadores más antiguos. Por ejemplo, si utiliza una función de diseño moderna como CSS grid, para los navegadores que no admiten grid, proporcione una alternativa a una técnica de diseño más tradicional como float o display: table.

Para funciones que se degradan con gracia, considere utilizar consultas de funciones s@supports , para aplicar el estilo solo cuando el navegador admita una propiedad o valor en particular. Esto garantiza que su sitio web siga siendo funcional y visualmente atractivo incluso si el navegador del usuario no muestra todos los ajustes de estilo.

CSS y accesibilidad

Al abordar el diseño web, es clave incorporar principios de accesibilidad en su CSS. Recuerde que, si bien CSS controla principalmente la presentación visual, también puede afectar la accesibilidad del contenido para los usuarios con discapacidades.

Marcado semántico: combine siempre CSS con HTML semántico. Utilice elementos HTML que transmitan significado sobre el tipo de contenido que encapsulan, como<header> para encabezado de sección o<nav> para enlaces de navegación. Esto garantiza que el contenido siga siendo comprensible después de eliminar los estilos.

• Diseño visual:
  • Colores: asegúrese de que haya suficiente contraste entre el texto y los colores de fondo. No utilice el color como único método para transmitir información.
  • Texto: utilice unidades relativas (como em o rem) para ajustar el tamaño del texto para que los usuarios puedan cambiar el tamaño del texto según sus necesidades.

AR y ARIA: los atributos de aplicaciones enriquecidas de Internet accesibles (ARIA) pueden complementar HTML para mejorar la accesibilidad al crear componentes web complejos. Por ejemplorole="button" hace que un elemento que no es un elemento de botón nativo esté disponible como botón de tecnología de asistencia.

• Técnicas CSS:
  • Ocultar elementos correctamente usandovisibility:hidden odisplay:none , para que también queden ocultos a los lectores de pantalla.
  • Usar estilosfocus para que los elementos interactivos proporcionen instrucciones claras de navegación con el teclado.

CSS	Impacto en la disponibilidad
color	Debe tener un alto contraste con el fondo para facilitar la lectura.
tamaño de fuente	Utilice unidades relativas para acercar o alejar
visualización/visibilidad	Úselos para ocultar elementos y mejorar la legibilidad.

Al utilizar estas prácticas en su CSS, mejorará la accesibilidad de su contenido web, haciéndolo más inclusivo y fácil de usar para todos.

Especificaciones y documentación CSS

Su capacidad para utilizar el estilo CSS de forma eficaz depende de un conocimiento profundo de sus especificaciones y documentación. Las pautas y referencias descritas por el W3C son fundamentales para dominar el diseño web.

Especificaciones del W3C

El World Wide Web Consortium (W3C) es responsable de desarrollar las especificaciones CSS. Descubrirá que estas especificaciones cubren una amplia gama de información, desde la estructura básica hasta las funciones avanzadas.

Las especificaciones de CSS están diseñadas para informarle sobre cómo implementar correctamente varios aspectos de CSS en documentos web.

Por ejemplo , las consultas de medios amplían las capacidades de las reglas @media agregando parámetros para adaptarse al tamaño de visualización, la profundidad del color y las variaciones de relación de aspecto. El Grupo de Trabajo CSS desempeña un papel clave en el desarrollo de estos estándares, garantizando que sean completos y estén actualizados.

Enlaces y recursos CSS

Varias plataformas en línea proporcionan referencias y recursos prácticos de CSS . MDN Web Docs se destaca como un recurso valioso y ofrece documentación completa sobre CSS. Aquí encontrará información detallada sobre:

• Sintaxis CSS : comprender el formato adecuado para escribir CSS, incluidos selectores, pseudoclases, pseudoelementos, propiedades y valores.
• Ejemplos de reglas de estilo : Aplicación práctica de reglas CSS para establecer estilos en documentos web.

Utilice estos recursos para profundizar sus conocimientos y mejorar la implementación de CSS en diversos medios y plataformas. Recuerde que la cascada es un concepto fundamental de CSS, donde el orden de las reglas CSS y su especificidad determinan cómo se aplican los estilos a los elementos HTML.

Aprender CSS

Una vez que comience a aprender CSS, encontrará muchos recursos y métodos para mejorar sus habilidades de desarrollo web. Es importante comenzar con tutoriales completos y luego aplicar sus conocimientos trabajando en ejercicios y proyectos prácticos.

Tutoriales y guías de CSS

Comience su viaje con tutoriales de CSS que brindan instrucciones paso a paso y ejemplos claros. Plataformas como W3Schools ofrecen tutoriales interactivos donde puedes probarlo tú mismo inmediatamente editando el CSS y viendo los resultados en su editor en línea. Cada capítulo suele incluir ejemplos para ayudar a reforzar conceptos.

De manera similar, MDN Web Docs es un recurso confiable para enseñar tecnologías web, incluido CSS. Sus tutoriales de CSS cubren los conceptos básicos, desde estilo HTML, modelo de caja, selectores hasta temas más avanzados como animaciones y técnicas de diseño.

Ejercicios y proyectos CSS.

Después de aprender los conceptos básicos a través de tutoriales, es importante adquirir experiencia práctica. Encuentra ejercicios de CSS y crea pequeños proyectos para aplicar lo que has aprendido.

Puede comenzar con tareas simples como aplicar estilo a un párrafo o diseñar una barra de navegación, luego ampliar para crear diseños de varias columnas o incluso un sitio web completo.

Para poner a prueba tus conocimientos de CSS:

1. Crea una página HTML sencilla.
2. Personaliza tu estilo usando un archivo CSS vinculado a HTML.
3. Experimente con diferentes propiedades de CSS para ver sus efectos.

A continuación se muestra un ejercicio básico para editar el texto de un párrafo:

<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link href="styles/style.css" rel="stylesheet" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

/* styles/style.css */
p {
  color: red;
}

Al completar estos proyectos prácticos, reforzará su aprendizaje y creará gradualmente un portafolio para mostrar su creciente experiencia en CSS.