Lenguaje CSS

Apariencia visual

CSS es un lenguaje de estilos utilizado en el ámbito del diseño web para dotar un sitio web de detalles estéticos, interacción y aspecto visual.

← Volver Guía rápida Más sobre ManzDev

Introducción a CSS

¿Qué es CSS? Lenguaje de estilos para dotar de aspecto visual

¿Cómo usar CSS? Formas de aplicar CSS a una página web

Estructura de CSS Sintaxis inicial para escribir código CSS

Navegadores web Navegadores web, motores y sus diferencias

Niveles de CSS y prefijos Cómo se estructuran las versiones (niveles) de CSS

La guía de propiedades CSS Guía «telefónica» de propiedades CSS

Cascada CSS

Herencia en CSS La herencia o sobreescritura de propiedades en CSS

Cascada en CSS La cascada de CSS: Importancia, Especificidad y Orden

Variables CSS CSS Custom Properties: Variables nativas de CSS

Unidades CSS

¿Qué son y para que sirven? Tipos de unidades CSS

Unidades absolutas Unidades fijas o estáticas

Unidades relativas Porcentaje y unidades relativas

Unidades del viewport Unidades flexibles

Funciones matemáticas CSS Funciones CSS para calcular cantidades específicas

Modelo de cajas

Modelo de cajas Modelo de cajas: Márgen, borde, relleno y contenido

La propiedad box-sizing Y otras particularidades del modelo de cajas

Márgenes y rellenos Las propiedades margin, padding y relacionadas

Bordes CSS Características de los bordes de los elementos

Esquinas redondeadas La propiedad border-radius para redondear esquinas

Propiedades lógicas CSS Propiedades lógicas para reemplazar el modelo de cajas

Bordes con imágenes La técnica 9-slice para crear bordes con imágenes

Colores CSS

Códigos de colores Establecer colores de texto y de fondo

La función RGB() Esquema de colores: rojo, verde, azul

El formato hexadecimal Esquema de colores Hex (RGB Abreviado)

La función HSL() Esquema de colores: hue, saturación, luminosidad

La función HWB() Esquema de colores: hue, claridad, oscuridad

La función LAB() y OKLAB() Esquema de colores CIE LAB

La función LCH() y OKLCH() Esquema de colores CIE LCH

Imágenes y fondos

La propiedad background-image Establecer imágenes de fondo en CSS

La propiedad opacity Establecer transparencia en un elemento

Imágenes y Objetos Propiedades para modificar objetos e imágenes

Gradientes o degradados

Gradientes lineales La función linear-gradient() de CSS

Gradientes radiales La función radial-gradient() de CSS

Gradientes cónicos La función conic-gradient() de CSS

Selectores CSS

Selectores básicos Formas básicas de seleccionar elementos (clases, ids, etc...)

Selectores de atributos Formas de seleccionar elementos según sus atributos

Combinadores Formas de seleccionar elementos por sus relaciones

Combinadores lógicos Formas de agrupar selectores CSS complejos

Pseudoclases Formas de seleccionar elementos por comportamiento

Pseudoclases de estructura Formas de seleccionar elementos por su estructura

Pseudoclases de formularios Formas de seleccionar elementos de un formulario

Pseudoelementos CSS Formas de seleccionar aspectos inexistentes en el HTML

Reglas CSS

¿Qué son las reglas CSS? Reglas CSS, precedidas por el carácter @

La regla @import Regla para incluir CSS externo de otros archivos

La regla @layer Crear capas CSS con código independiente

La regla @supports Crear reglas condicionales y fallbacks en CSS

Calidad de código

Minificar CSS Compactar archivos CSS y borrar carácteres prescindibles

StyleLint: Linter CSS Revisión de errores o problemas

CSS Nesting nativo Anidamiento CSS nativo

Fuentes y tipografías

Tipografías CSS Bases de las tipografías y fuentes en CSS

Tipografías externas Utilizar tipografías externas (no instaladas)

Fuentes variables CSS Tipografías con pesos variables en un solo archivo

Textos y alineaciones Propiedades CSS para alinear o aplicar a textos

Propiedades avanzadas Otras propiedades CSS avanzadas para tipografías

Características personalizadas Activar características especiales en tipografías

Representación de datos

Tablas CSS Dar estilos a tablas HTML

Listas CSS Dar estilo a listas HTML

Contadores CSS CSS Counters: Contando con CSS

Maquetación y colocación

La propiedad display Conceptos fundamentales de maquetación

La propiedad position Formas especiales de colocar o posicionar elementos

La propiedad float Elementos flotantes (Desplazamientos)

Flex CSS: Introducción Modelo de cajas flexibles

Flex CSS: Alinear elementos O «cómo centrar un div con Flex»

Flex CSS: Flexibilidad Adaptar o incluso animar elementos flex

Grid CSS: Introducción Cuadrículas, grillas o rejillas

Grid CSS: Alinear elementos (O cómo centrar un elemento con CSS Grid)

Grid CSS: Grid por áreas Forma sencilla y gráfica de crear un grid

Grid CSS: Celdas irregulares Cómo crear cuadrículas o grids irregulares

Grid CSS: Líneas con nombre Dar nombre a las separaciones de grid

Interacciones

Contornos Resaltado de contorno para propósitos de accesibilidad

Cursor del ratón Formas de personalizar el cursor del ratón del usuario

Scroll y Overflow Suavizar efecto de scroll

CSS Snap Scroll Ajuste de scroll

Sombras

Sombras CSS en textos La propiedad text-shadow

Sombras CSS en cajas La propiedad box-shadow

Sombras idénticas CSS La función drop-shadow() de la propiedad filter

Efectos

Filtros CSS Aplicación de filtros para modificaciones visuales

Modos de fusión CSS Mecanismos para fusionar y mezclar elementos

Máscaras y recortes

La propiedad clip-path Diferentes formas de realizar recortes mediante CSS

La propiedad mask-image Máscaras en elementos

Responsive Web Design

¿Qué es Responsive Design? Crear diseños adaptables a dispositivos móviles

Bases del Responsive Design Conceptos y características a conocer del RWD

CSS Media Queries Reglas especiales para establecer excepciones en CSS

Medios impresos Media queries para adaptar contenido a impresiones

Medios paginados Media queries para adaptar contenido a páginas

CSS Container Queries Media queries para elementos contenedores

Preferencias de usuario Detectar preferencias del usuario en su sistema operativo

Animaciones CSS

Transiciones CSS Suavizar cambios de estilo en interacciones del usuario

Funciones de tiempo Cambiando el ritmo con propiedades *-timing-function

Animaciones CSS Propiedades para crear animaciones en CSS

La regla @keyframes Crear fotogramas clave de una animación

Transformaciones CSS

Transformaciones CSS La propiedad transform de CSS

Translaciones 2D Trasladar: La función CSS translate()

Rotaciones 2D Rotaciones: La función CSS rotate()

Escalado 2D Reescalar: La función CSS scale()

Deformaciones 2D Las funciones CSS skewX() y skewY()

Transformaciones 3D Funciones de transformación en 3D

Perspectivas CSS Establecer punto de fuga para perspectivas en CSS

Dibujar con CSS

¿Cómo dibujar con CSS? Algunos consejos y advertencias antes de empezar

Primeros pasos: Estructura HTML Primeros pasos para dibujar con CSS

Primeros pasos: Estructura CSS Primeros pasos para dibujar con CSS

Aprender más

Si lo prefieres, puedes aprender también sobre estas temáticas:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev