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.

← VolverPDF descargableAcceder a Discord Más sobre ManzDev

Selecciona tu nivel de conocimientos para ocultar o desbloquear temas:

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
CSS Moderno: antes vs ahora CSS tradicional vs CSS moderno
La guía de propiedades CSS Guía «telefónica» de propiedades CSS
Referencia CSS Propiedades CSS para HTML y SVG
Cambiar a un nivel superior para ver más artículos...

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
2022
Cambiar a un nivel superior para ver más artículos...

Funciones CSS

Funciones CSS ¿Qué son y para que sirven?
La función calc() Calculos matemáticos en CSS
Funciones min(), max() y clamp() Funciones de comparación CSS
2023
Funciones round(), mod() y rem() Funciones escalonadas CSS
2023
Funciones sin(), cos() y tan() Funciones trigonométricas CSS
2023
Funciones pow(), sqrt(), hypot() Funciones exponenciales CSS
2023
Cambiar a un nivel superior para ver más artículos...

Modelo de cajas

Modelo de cajas Modelo de cajas: Márgen, borde, relleno y contenido
Desbordamiento (Overflow) Overflow CSS: Cuando el contenido se desborda
La propiedad box-sizing Cómo calcula el navegador el tamaño de una caja
Reset CSS Resetear los estilos CSS por defecto del navegador
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
2010
Formas con CSS Cómo crear formas con HTML/CSS
Bordes con imágenes La técnica 9-slice para crear bordes con imágenes
2009
Bordes con gradientes La técnica 9-slice para crear bordes con gradientes
2009
Propiedades lógicas CSS Propiedades lógicas para reemplazar el modelo de cajas
2017
Cambiar a un nivel superior para ver más artículos...

Imágenes y fondos

La propiedad background-image Establecer imágenes de fondo en CSS
Fondos y gradientes múltiples Establecer varios fondos en un mismo elemento
Visibilidad de elementos Formas de ocultar y mostrar elementos
La función image-set() Establecer fallbacks para imágenes
2023
Imágenes y objetos Propiedades para modificar objetos e imágenes
2022
Cambiar a un nivel superior para ver más artículos...

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 color-mix() Mezclando colores en CSS
2023
Colores relativos Crear variaciones de colores a partir de otros
2023
La función HWB() Esquema de colores: hue, claridad, oscuridad
2022
La función LAB() y OKLAB() Esquema de colores CIE LAB
2023
La función LCH() y OKLCH() Esquema de colores CIE LCH
2023
Espacios de color Trabajando en diferentes espacios de color
2023
Cambiar a un nivel superior para ver más artículos...

Gradientes o degradados

¿Qué son los gradientes? Gradientes o degradados
Gradientes lineales La función linear-gradient() de CSS
2011
Gradientes radiales La función radial-gradient() de CSS
2012
Gradientes cónicos La función conic-gradient() de CSS
2020
Cambiar a un nivel superior para ver más artículos...

Cascada y Herencia

Cascada en CSS La cascada de CSS: Importancia, Especificidad y Orden
Herencia en CSS La herencia o sobreescritura de propiedades en CSS
Orden CSS Orden y conflictos de nombres CSS
La regla @import Regla para incluir CSS externo de otros archivos
Variables CSS CSS Custom Properties: Variables nativas de CSS
2014
Especificidad CSS La especificidad en selectores CSS
La regla @layer Crear capas CSS con código independiente
2022
La regla @scope Estilos CSS con ambito del DOM limitado
2024
Cambiar a un nivel superior para ver más artículos...

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
Combinador :is() y :where() Seleccionar múltiples elementos de una sola vez
2020
Combinador o selector :not() Seleccionar elementos que no cumplan condiciones
2021
Combinador o selector :has() Seleccionar elementos dependiendo del padre
2022
Cambiar a un nivel superior para ver más artículos...

Pseudoclases CSS

¿Qué son las pseudoclases? Formas de seleccionar elementos por comportamiento
Pseudoclases de interacción Seleccionar elementos al interactuar con ellos
Pseudoclases de ubicación Seleccionar enlaces según su estado
Pseudoclases de idioma Seleccionar información según su idioma
Pseudoclases de estructura Seleccionar elementos según su DOM
Pseudoclases de formularios Seleccionar controles según su estado
Pseudoclases de estado Seleccionar elementos según su estado
Cambiar a un nivel superior para ver más artículos...

Pseudoelementos CSS

¿Qué son los pseudoelementos? Formas de seleccionar aspectos inexistentes en el HTML
Contenido generado en CSS Los pseudoelementos ::after y ::before
Pseudoelementos tipográficos Pseudoelementos relacionados con tipografías
Pseudoelementos de resaltado Pseudoelementos destacados o de selección
Cambiar a un nivel superior para ver más artículos...

Reglas CSS

¿Qué son las reglas CSS? Reglas CSS, precedidas por el carácter @
La regla @supports Crear reglas condicionales y fallbacks en CSS
2014
La regla @property Tipos de datos en CSS
2020
Cambiar a un nivel superior para ver más artículos...

Calidad de código

Minificar CSS Compactar archivos CSS y borrar carácteres prescindibles
StyleLint: Linter CSS Revisión de errores o problemas
2015
CSS Nesting nativo Anidamiento CSS nativo
2023
Metodologías CSS Metodologías y nomenclaturas CSS
Cambiar a un nivel superior para ver más artículos...

Fuentes y tipografías

¿Qué son las tipografías? Conceptos básicos sobre tipografías
Bases de fuentes y tipografías Propiedades principales para tipografías
Decoraciones de texto Decorar, transformar o enfatizar textos
2017
Ajuste y balance de textos La propiedad text-wrap y sus valores
Contorno en tipografías Bordes o contornos en textos
Textos con degradados Cómo crear textos con gradientes
Textos y alineaciones Propiedades CSS para alinear o aplicar a textos
Ajustes en tipografías Otras propiedades CSS de fuentes
2022
Cambiar a un nivel superior para ver más artículos...

Cargar tipografías

Tipografías con Google Fonts Utilizar tipografías externas con Google Fonts
2010
Tipografías con Fontsource Cargar tipografías web automáticamente
2023
La regla @font-face Utilizar tipografías específicas (no instaladas)
2009
Modo de carga de tipografías Formas de ajustar la carga de tipografías
2018
Fuentes variables CSS Tipografías con pesos variables en un solo archivo
2018
Características personalizadas Activar características especiales en tipografías
2016
Cambiar a un nivel superior para ver más artículos...

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
Cambiar a un nivel superior para ver más artículos...

Maquetación y colocación

La propiedad display Conceptos fundamentales de maquetación
Alinear elementos con CSS Centrar elementos con CSS (sin Flex ni Grid)
Flex CSS: Introducción Modelo de cajas flexibles
2014
Flex CSS: Alinear elementos O «cómo centrar un div con Flex»
2014
Flex CSS: Flexibilidad Adaptar o incluso animar elementos flex
2014
Grid CSS: Introducción Cuadrículas, grillas o rejillas
2017
Grid CSS: Alinear elementos O «cómo centrar un div con CSS Grid»
2017
Grid CSS: Grid por áreas Forma sencilla y gráfica de crear un grid
2017
Grid CSS: Celdas irregulares Cómo crear cuadrículas o grids irregulares
2017
Grid CSS: Líneas con nombre Dar nombre a las separaciones de grid
2017
Grid CSS: Colocación automática Creando grids de forma automática
2017
Multi-columnas CSS Esquema de varias columnas en CSS
2017
Cambiar a un nivel superior para ver más artículos...

Posicionamiento CSS

La propiedad position Formas especiales de colocar o posicionar elementos
Posicionamiento relativo Posicionar respecto a su posición inicial (relative)
Posicionamiento absoluto Posicionar respecto a un marco (absolute)
Posicionamiento fijo Posicionar respecto a la región visible (fixed)
Posicionamiento «sticky» Posicionar respecto al desplazamiento o scroll (sticky)
2018
Cambiar a un nivel superior para ver más artículos...

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 suave (Smooth Scroll) Suavizar efecto de scroll
CSS Snap Scroll Ajuste de scroll
2014
Cambiar a un nivel superior para ver más artículos...

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
2016
Pixel art con CSS Genera pixels utilizando box-shadow
Cambiar a un nivel superior para ver más artículos...

Efectos

Filtros CSS Aplicación de filtros para modificaciones visuales
2016
Modos de fusión CSS Mecanismos para fusionar y mezclar elementos
2019
Cambiar a un nivel superior para ver más artículos...

Máscaras y recortes

Formas básicas Maneras de definir formas geométricas básicas
2019
La propiedad clip-path Diferentes formas de realizar recortes mediante CSS
2019
La propiedad float Elementos flotantes (Desplazamientos)
La propiedad shape-outside Declarando formas flotantes
2019
La propiedad mask-image Máscaras en elementos
2018
Cambiar a un nivel superior para ver más artículos...

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
2023
CSS Media Features Condiciones para los Media Queries
CSS Container Queries Media queries para elementos contenedores
2023
Preferencias de usuario Detectar preferencias del usuario (dark mode, animaciones reducidas...)
2019
Medios impresos Media queries para adaptar contenido a impresiones
Medios paginados Media queries para adaptar contenido a páginas
Cambiar a un nivel superior para ver más artículos...

Animaciones CSS

Transiciones CSS Suavizar cambios de estilo en interacciones del usuario
Animaciones CSS Propiedades para crear animaciones en CSS
La regla @keyframes Crear fotogramas clave de una animación
Funciones de tiempo Cambiando el ritmo con propiedades *-timing-function
Animaciones de scroll Animaciones dirigidas por scroll con líneas de tiempo
2023
CSS Motion Paths Animación de trayectos o rutas con CSS
2022
View Transition API Animaciones de transición entre páginas
2023
Cambiar a un nivel superior para ver más artículos...

Transformaciones 2D/3D

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
Cambiar a un nivel superior para ver más artículos...

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
Cambiar a un nivel superior para ver más artículos...

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