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.

← VolverGuía rápidaMás sobre ManzDev

Introducción a CSS

¿Qué es CSS? Lenguaje de estilos para dotar de aspecto visual
fácil
¿Cómo usar CSS? Formas de aplicar CSS a una página web
fácil
Estructura de CSS Sintaxis inicial para escribir código CSS
fácil
Navegadores web Navegadores web, motores y sus diferencias
fácil
Niveles de CSS y prefijos Cómo se estructuran las versiones (niveles) de CSS
fácil
CSS Moderno: antes vs ahora CSS tradicional vs CSS moderno
medio
La guía de propiedades CSS Guía «telefónica» de propiedades CSS
Referencia CSS Lista alfabética de propiedades CSS

Cascada CSS

Herencia en CSS La herencia o sobreescritura de propiedades en CSS
fácil
Cascada en CSS La cascada de CSS: Importancia, Especificidad y Orden
medio
Variables CSS CSS Custom Properties: Variables nativas de CSS
2014 medio

Unidades CSS

¿Qué son y para que sirven? Tipos de unidades CSS
fácil
Unidades absolutas Unidades fijas o estáticas
fácil
Unidades relativas Porcentaje y unidades relativas
medio
Unidades del viewport Unidades flexibles
2022 medio
Funciones matemáticas CSS Funciones CSS para calcular cantidades específicas
2022 medio

Modelo de cajas

Modelo de cajas Modelo de cajas: Márgen, borde, relleno y contenido
fácil
La propiedad box-sizing Y otras particularidades del modelo de cajas
medio
Márgenes y rellenos Las propiedades margin, padding y relacionadas
fácil
Bordes CSS Características de los bordes de los elementos
fácil
Esquinas redondeadas La propiedad border-radius para redondear esquinas
2010 fácil
Propiedades lógicas CSS Propiedades lógicas para reemplazar el modelo de cajas
2017 medio
Bordes con imágenes La técnica 9-slice para crear bordes con imágenes
2009 medio

Colores CSS

Códigos de colores Establecer colores de texto y de fondo
fácil
La función RGB() Esquema de colores: rojo, verde, azul
fácil
El formato hexadecimal Esquema de colores Hex (RGB Abreviado)
fácil
La función HSL() Esquema de colores: hue, saturación, luminosidad
fácil
La función HWB() Esquema de colores: hue, claridad, oscuridad
2022 medio
La función LAB() y OKLAB() Esquema de colores CIE LAB
2023 medio
La función LCH() y OKLCH() Esquema de colores CIE LCH
2023 medio
Colores relativos Crear variaciones de colores a partir de otros
2023 medio
Espacios de color Trabajando en diferentes espacios de color
2023 difícil

Imágenes y fondos

La propiedad background-image Establecer imágenes de fondo en CSS
fácil
La propiedad opacity Establecer transparencia en un elemento
fácil
Imágenes y objetos Propiedades para modificar objetos e imágenes
2022 medio

Gradientes o degradados

Gradientes lineales La función linear-gradient() de CSS
2011 fácil
Gradientes radiales La función radial-gradient() de CSS
2012 fácil
Gradientes cónicos La función conic-gradient() de CSS
2020 fácil

Selectores CSS

Selectores básicos Formas básicas de seleccionar elementos (clases, ids, etc...)
fácil
Selectores de atributos Formas de seleccionar elementos según sus atributos
medio
Combinadores Formas de seleccionar elementos por sus relaciones
medio
Combinadores lógicos Formas de agrupar selectores CSS complejos
2022 medio
Pseudoclases Formas de seleccionar elementos por comportamiento
fácil
Pseudoclases de estructura Formas de seleccionar elementos por su estructura
medio
Pseudoclases de formularios Formas de seleccionar elementos de un formulario
medio
Pseudoelementos CSS Formas de seleccionar aspectos inexistentes en el HTML
medio

Reglas CSS

¿Qué son las reglas CSS? Reglas CSS, precedidas por el carácter @
fácil
La regla @import Regla para incluir CSS externo de otros archivos
fácil
La regla @layer Crear capas CSS con código independiente
2022 medio
La regla @supports Crear reglas condicionales y fallbacks en CSS
2014 medio
La regla @scope Estilos CSS con ambito del DOM limitado
202x difícil
La regla @property Tipos de datos en CSS
2020 medio

Calidad de código

Minificar CSS Compactar archivos CSS y borrar carácteres prescindibles
fácil
StyleLint: Linter CSS Revisión de errores o problemas
2015 medio
CSS Nesting nativo Anidamiento CSS nativo
2023 medio
Metodologías CSS Metodologías y nomenclaturas CSS
difícil

Fuentes y tipografías

¿Qué son las tipografías? Conceptos básicos sobre tipografías
fácil
Tipografías en CSS Propiedades principales para tipografías
fácil
Ajustes en tipografías Otras propiedades CSS de fuentes
2022 medio
La regla @font-face Utilizar tipografías específicas (no instaladas)
2009 medio
Tipografías de Google Fonts Utilizar tipografías externas con Google Fonts
2010 medio
Fuentes variables CSS Tipografías con pesos variables en un solo archivo
2018 fácil
Textos y alineaciones Propiedades CSS para alinear o aplicar a textos
fácil
Decoraciones de texto Decorar, transformar o enfatizar textos
2017 fácil
Modo de carga de tipografías Formas de ajustar la carga de tipografías
2018 medio
Características personalizadas Activar características especiales en tipografías
2016 difícil

Representación de datos

Tablas CSS Dar estilos a tablas HTML
fácil
Listas CSS Dar estilo a listas HTML
fácil
Contadores CSS CSS Counters: Contando con CSS
medio

Maquetación y colocación

La propiedad display Conceptos fundamentales de maquetación
fácil
La propiedad position Formas especiales de colocar o posicionar elementos
medio
La propiedad float Elementos flotantes (Desplazamientos)
fácil
Flex CSS: Introducción Modelo de cajas flexibles
2014 fácil
Flex CSS: Alinear elementos O «cómo centrar un div con Flex»
2014 medio
Flex CSS: Flexibilidad Adaptar o incluso animar elementos flex
2014 medio
Grid CSS: Introducción Cuadrículas, grillas o rejillas
2017 fácil
Grid CSS: Alinear elementos O «cómo centrar un div con CSS Grid»
2017 medio
Grid CSS: Grid por áreas Forma sencilla y gráfica de crear un grid
2017 fácil
Grid CSS: Celdas irregulares Cómo crear cuadrículas o grids irregulares
2017 medio
Grid CSS: Líneas con nombre Dar nombre a las separaciones de grid
2017 medio
Multi-columnas CSS Esquema de varias columnas en CSS
2017 fácil

Interacciones

Contornos Resaltado de contorno para propósitos de accesibilidad
fácil
Cursor del ratón Formas de personalizar el cursor del ratón del usuario
fácil
Scroll y Overflow Suavizar efecto de scroll
fácil
CSS Snap Scroll Ajuste de scroll
2014 medio

Sombras

Sombras CSS en textos La propiedad text-shadow
fácil
Sombras CSS en cajas La propiedad box-shadow
fácil
Sombras idénticas CSS La función drop-shadow() de la propiedad filter
2016 fácil

Efectos

Filtros CSS Aplicación de filtros para modificaciones visuales
2016 fácil
Modos de fusión CSS Mecanismos para fusionar y mezclar elementos
2019 fácil

Máscaras y recortes

Formas básicas Maneras de definir formas geométricas básicas
2019 fácil
La propiedad clip-path Diferentes formas de realizar recortes mediante CSS
2019 medio
La propiedad shape-outside Declarando formas flotantes
2019 fácil
La propiedad mask-image Máscaras en elementos
2018 medio

Responsive Web Design

¿Qué es Responsive Design? Crear diseños adaptables a dispositivos móviles
fácil
Bases del Responsive Design Conceptos y características a conocer del RWD
fácil
CSS Media Queries Reglas especiales para establecer excepciones en CSS
2023 medio
Medios impresos Media queries para adaptar contenido a impresiones
fácil
Medios paginados Media queries para adaptar contenido a páginas
medio
CSS Container Queries Media queries para elementos contenedores
2023 fácil
Preferencias de usuario Detectar preferencias del usuario en su sistema operativo
2019 fácil

Animaciones CSS

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

Transformaciones 2D/3D

Transformaciones CSS La propiedad transform de CSS
medio
Translaciones 2D Trasladar: La función CSS translate()
medio
Rotaciones 2D Rotaciones: La función CSS rotate()
medio
Escalado 2D Reescalar: La función CSS scale()
medio
Deformaciones 2D Las funciones CSS skewX() y skewY()
medio
Transformaciones 3D Funciones de transformación en 3D
medio
Perspectivas CSS Establecer punto de fuga para perspectivas en CSS
medio

Dibujar con CSS

¿Cómo dibujar con CSS? Algunos consejos y advertencias antes de empezar
fácil
Primeros pasos: Estructura HTML Primeros pasos para dibujar con CSS
medio
Primeros pasos: Estructura CSS Primeros pasos para dibujar con CSS
medio

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