Lenguaje CSS
CSS es un lenguaje de estilos para dotar de apariencia y aspecto visual a una página o sitio web (entre otras cosas). También es conocido como el mayor enemigo de los programadores backend. En esta página te ayudo a aprender a dominarlo.
Comienza a aprender
¿...o prefieres un roadmap?
Comienza a practicar
¿Ya sabes la teoría? ¡Es hora de ponerse a practicar!
La propiedad display multi-keyword
Mediante la propiedad display moderna de CSS podemos utilizar dos valores para indicar como debe renderizarse un elemento y sus elementos hijos.
CSSStyleSheet: Módulos CSS nativos
Mediante el objeto CSSStyleSheet nativo de Javascript podemos crear algo similar a los estilos locales de CSS Modules, pero sin preprocesar.
¿Qué son las View Transition?
Las View Transition son un nuevo sistema de transición animada entre páginas que hace que el cambio de una a otra sea mucho más suave, sútil y agradable visualmente.
PostCSS desde terminal
PostCSS realmente es una herramienta de línea de comandos, por lo que si te interesa puedes usarla para hacer tus propios scripts
Herencia en CSS
En CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.
¿Qué son las transiciones?
Antes de comenzar con las transiciones CSS, es adecuado conocer una serie de conceptos que nos harán entender mejor las animaciones y transiciones.
Combinador :is() y :where()
Los selectores o combinadores :is() y :where() nos pueden servir para simplificar selectores y hacerlos más legibles y potentes. Te explico como se usan.
¿Qué son las animaciones?
¿Qué son realmente las animaciones? ¿Qué elementos necesitamos para crear una animación? Te explico los conceptos fundamentales de una animación web.
TailwindCSS: Clases de utilidad
Conoce las ventajas y desventajas de utilizar TailwindCSS en tus proyectos web y cómo empezar a utilizarlo de manera efectiva
CSS Nesting: CSS anidado
Una característica futura de CSS es la posibilidad de anidar bloques de CSS uno dentro de otro. Con PostCSS podemos utilizarlo hoy mismo.
Shadow DOM declarativo
Con Shadow DOM declarativo se pueden crear zonas de HTML que estén aisladas del resto del documento y por lo tanto no afecte el CSS externo.
Scroll-driven animations
Aprende a crear efectos de animaciones dirigidas por scroll (Scroll Driven Animations) utilizando CSS, sin necesidad de utilizar Javascript.
Forzar herencia en CSS
En CSS, existen una serie de valores que se pueden utilizar en prácticamente cualquier propiedad para forzar a utilizar la herencia. Te explico de cuales se trata.
Estilos con baja especificidad
Podemos utilizar el selector combinador :where() de CSS para crear selectores con baja especificidad que nos permitan definir estilos base sobreescribibles.
Importaciones: regla @import
La regla CSS @import permite incluir el código CSS de otro fichero externo, realizando una petición para descargarlo desde el cliente.
Contadores CSS
Es posible crear contadores utilizando sólo código CSS, sin necesidad del uso de programación
¿Qué son las clases de utilidad?
Aprovecha las clases de utilidad para definir mejor tu CSS y escribir código mucho más mantenible y reutilizable
La palabra clave !important
Descubre cómo usar la palabra clave !important en CSS para sobrescribir estilos. Aprende su función, ejemplos prácticos y cuándo utilizarla correctamente.
¿Qué herramienta escoger?
Videos
¿Prefieres contenido de video? ¡Echa un vistazo a mi canal!
¿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