comiCSS
LightNews LightNews
banner
comicss.art
comiCSS
@comicss.art
580 followers 150 following 530 posts
A webcomic about CSS. Coded in CSS.

Webcomic : comicss.art
Support : www.patreon.com/comicss
Author: @alvaromontoro.com
Posts Replies Media Videos
comicss.art
New comic #237: Comics in CSS
comicss.art/comics/237/

#css #html #webdev #comic
cartoon with 4 panels in a 2x2 grid showing two people talking. One says 'I am coding a new comic with CSS' The other one replies surprised 'Why with CSS? Won't it look terrible?' and the first one comes back with 'It probably will. But, who cares? Have you seen what's out there now?' Then both smile big while looking outside towards the reader.
February 9, 2026 at 12:41 PM
comicss.art
comiCSS #122: Astronaut
comicss.art/comics/122/a...

February 8, 2024 – This is one of my favorites cartoon in that series. The code is supposed to be based on Bowie's Space Oddity but, the more I read it, the less I see it 😅

#css #cartoon #webdev
astronaut: a minimalistic cartoon of a person in an astronaut suit with many stars in the. background. Next to the following CSS code: .astronaut { elevation: above; isolation: isolate; flow-from: spaceship; flow-to: outerspace; transition: float; }
February 6, 2026 at 12:09 PM
comicss.art
New release: Web Development Conspiracy
comicss.art/comics/234/

Unleash your inner conspiracy-loving side and craft your own wild web development theory with this mad-lib table! 😄

#css #webdev #joke
Create your own web development theory with this mad-lib table! First column: Pick your birthday month January – HTML February – CSS March – JavaScript April – ReactJS May – Vercel June – TailwindCSS July – WordPress August – Chrome September – Safari October – Firefox November – The W3C December – The Internet Second column: Pick your favorite color Red – is being rewritten in a basement by Orange – was invented to distract us from Yellow – is part of a covert project led by Green – exists to hide the truth about Blue – is just a front for Indigo – was a failed experiment by Violet – secretly dreams of being White – whispers bad advice inspired by Gray – is secretly under the control of Black – is slowly being replaced by Brown – is running outdated dependencies from Pink – is propaganda created by Third column: Pick your first initial A, B – three raccoons in a trenchcoat. C, D – a time traveler stuck in Internet Explorer 6. E, F – the necromancer of Netscape Navigator. G, H – the "new IE." I, J – the CSS Working Group's secret branch. K, L – jQuery. M, N – that voice that tells you to use !important. O, P – the ghosts of deprecated HTML tags. Q, R – a secret group of Stack Overflow moderators. S, T – a dev who claims "it's working on my machine!" U, V, W – an AI trained in W3Schools articles. X, Y, Z – a sentient marquee tag.
February 2, 2026 at 3:07 AM
comicss.art
Tomorrow is Groundhog Day. Remember: if Phil sees his shadow, that's 6 more Tailwind classes (in every HTML tag, in every page)

#css #cssArt #joke #groundhogDay
Illustration of a groundhog in kawaii style with the text "If Phils sees his shadow... six more Tailwind classes!"
February 1, 2026 at 2:34 PM
comicss.art
comiCSS #121: Basketball Player
comicss.art/comics/121/b...

February 7, 2024 – Some of the properties I used for this cartoon were a bit obscure, but it's not always easy finding common ones. In the live version, the ball spins all the time.

#css #webdev #cartoon
Basketball player: a minimalistic cartoon of a man spinning a basketball with one finger next to the following CSS code: .basketball-player { elevation: higher; min-height: 75in; max-height: 91in; will-change: position; play-during: url(#game); position: running(ball); flow: 'offense'; }
January 30, 2026 at 5:25 PM
comicss.art
Biblically accurate CSS.
The new CSS logo (a purple square with rounded corners and the letters CSS at the bottom right) with 6 wings and 11 eyes.
January 30, 2026 at 2:43 AM
comicss.art
comiCSS #120: Dictator
comicss.art/comics/120/d...

February 6, 2024 – This cartoon is a bit darker than the others in the series, but I like it. I tried to convey an idea of confusion and control, that's why everything has !important and I used an overcomplicated nested rule.

#css #cartoon #webdev
Dictator: a minimalistic cartoon of a man in military attire with medals and sun glasses, next to the following CSS code: .dictator { position: fixed !important; will-change: order !important; opacity: 0 !important; border: double solid !important; .country:has(&) :not(.supporter) { will-change: orphans, widows !important; translate: 100vmax 0 !important; } }
January 29, 2026 at 10:36 PM
comicss.art
Tomorrow's game is ready to be published... soon...
A zig-zagging grid with the central part reading CSS Puzzles
January 28, 2026 at 3:42 AM
comicss.art
comiCSS #119: Winner
comicss.art/comics/119/w...

February 5, 2024 – This slightly animated cartoon continued the series for the 2nd anniversary. The trophy is actual `gold` color but the medal is `orange` so there would be enough contrast with the shirt.

#html #css #cartoon #cssArt #webdev
them. Next to the scene there's the following CSS code: #winner { order: 1; running: first; color: gold; &::after { content: '🏆'; } }
January 27, 2026 at 10:03 PM
comicss.art
El cómic de hoy en español
comicss.art/comics/233/

#css #desarrolloWeb #español
Cómic con 4 paneles organizados en 2x2, titulado "En algún lugar, alguien..." y que muestra a un personaje diciendo "En algún lugar, ahora mismo... hay alguien online... creando una demo fantástica. [el personaje mira al lector] ...Y no puedo esperar a verla."
January 26, 2026 at 6:38 PM
comicss.art
New comic: Somewhere, Someone
comicss.art/comics/233/

#css #comic #webdev
comic strip with 4 panels in a 2x2 grid showing a character that says 'somewhere right now... someone online... is creating an amazing demo. [looking to the reader] ...And I can't wait to see it!'
January 26, 2026 at 4:04 PM
comicss.art
comiCSS #118: Phantom of the Opera
comicss.art/comics/118/p...

February 4, 2024 – I did cartoons in this style the week preceding to the second anniversary. I like them. This one is Ok, but it has a "something" that doesn't convince me.

#css #html #cartoon #webdev
Cartoon of the phantom of the opera (a man with a cape and a mask hiding his face) holding a rose next to the following CSS code: #phantom-of-the-opera { mask:url(#face); backface-visibility:hidden; visibility:hidden; pitch:low; volume:soft; }
January 23, 2026 at 1:13 PM
comicss.art
comiCSS #117: King
comicss.art/comics/117/k...

February 3, 2024 – Second cartoon to celebrate the second anniversary of the comic. I especially like this one and the code associated to the drawing. As a fun fact, the king's robe is actual Royal Blue color.

#css #webdev #comic #cartoon
Cartoon of a man with a beard, wearing a crown and holding a sceptre, next to a box with the following CSS code: .king { position: absolute; richness: 100; color: RoyalBlue; :first-child { all: inherit; } }
January 23, 2026 at 2:21 AM
comicss.art
Versión en español del último cómic.

#css #desarrolloWeb #español #spanish
Dibujo minimalista con los personajes del Mago de Oz, titulado "El Mago de Ux". El león pide valor, el espantapájaros pide un cerebro, el hombre de hojalata pide un corazón y Dorothy pide "programadores web que se preocupen por la accesibiliad"
January 21, 2026 at 9:10 AM
comicss.art
comiCSS #116: Cloud Developer
comicss.art/comics/116/c...

February 2, 2024 – This was the first cartoon of a series to celebrate the second anniversary of comiCSS (the 4th is in 3 weeks!). Fun fact: the background color is azure, which is appropriate for this cartoon.

#css #webDev #cartoon #cssArt
Cartoon of a person using a computer with clouds in the background, next to a box with the following CSS code: .cloud-developer { background: azure; isolation: isolate; rest: none; stress: 100; content: none; }
January 20, 2026 at 6:26 PM
comicss.art
New cartoon: The Wizard of UX
comicss.art/comics/232/

#css #cartoon #webdev
Minimalistic cartoon with the main character from the Wonderful Wizard of Oz stating what they want from the wizard: a lion wants courage, a scarecrow wants a brain, a tin woodman wants a brain, and the girl Dorothy wants 'web developers who care about accessibility'
January 19, 2026 at 12:52 PM
comicss.art
comiCSS #115: Do Web Developers Dream of CSSheep?
comicss.art/comics/115/c...

January 22, 2024 – With so many web technologies out there, it can be overwhelming to choose one and keep up to date. I liked the idea behind this cartoon, but the execution... not so much.

#css #webDev #cartoon #cssArt
Cartoon of a man laying down in bed and saying "As a web developer, I don't count sheep to go to sleep, I count front-end technologies I'd like to learn". As he dozes off, a bubble with different styling technologies appear (CSS, BEM) and time passes by in a clock Cartoon of a man laying down in bed and saying with a bubble with different styling technologies appear in each panel: CSS, BEM, tailwind, Bootstrap, less... instead of falling asleep, he is more and more awake as time passes. Cartoon of a man laying down in bed with a bubble with different styling technologies appear (CSS, BEM, Boostrap, less, tailwind, JSS...), time passes and he looks more unhappy. The last panel shows the person with a tired look in his face at 6:55am
January 18, 2026 at 2:21 PM
comicss.art
Some alternatives...
Comic strip titled 'Types of headaches' with four panels showing a person with a red are indicating the zone of the headache, and a title underneath it indicating the type of headache. The first panel is for Migraine, and the red area occupies the right side of the forehead and eye. The second panel is for stress, and the red area is the forehead and both sides of the head. The third panel is for tension, and the red area is around the forehead. The fourth panel is for images with no alt, and the whole head and body are red. Comic strip titled 'Types of headaches' with four panels showing a person with a red are indicating the zone of the headache, and a title underneath it indicating the type of headache. The first panel is for Migraine, and the red area occupies the right side of the forehead and eye. The second panel is for stress, and the red area is the forehead and both sides of the head. The third panel is for tension, and the red area is around the forehead. The fourth panel is for A11Y Overlays, and the whole head and body are red. Comic strip titled 'Types of headaches' with four panels showing a person with a red are indicating the zone of the headache, and a title underneath it indicating the type of headache. The first panel is for Migraine, and the red area occupies the right side of the forehead and eye. The second panel is for stress, and the red area is the forehead and both sides of the head. The third panel is for tension, and the red area is around the forehead. The fourth panel is for Tailwind Fandom, and the whole head and body are red. Comic strip titled 'Types of headaches' with four panels showing a person with a red are indicating the zone of the headache, and a title underneath it indicating the type of headache. The first panel is for Migraine, and the red area occupies the right side of the forehead and eye. The second panel is for stress, and the red area is the forehead and both sides of the head. The third panel is for tension, and the red area is around the forehead. The fourth panel is for div as a button, and the whole head and body are red.
January 17, 2026 at 7:57 PM
comicss.art
comiCSS #114: Types of Headaches
comicss.art/comics/114/h...

January 15, 2024 – A good thing of this cartoon is that it allows for many alternatives (check the reply)... but making it about Tailwind made it more fun for me :P

#css #html #joke #cartoon #tailwind #cssArt
Comic strip titled 'Types of headaches' with four panels showing a person with a red are indicating the zone of the headache, and a title underneath it indicating the type of headache. The first panel is for Migraine, and the red area occupies the right side of the forehead and eye. The second panel is for stress, and the red area is the forehead and both sides of the head. The third panel is for tension, and the red area is around the forehead. The fourth panel is for Tailwind, and the whole head and body are red.
January 17, 2026 at 7:53 PM
comicss.art
Testing some (color) changes in the component library...

Thoughts?
comic with 4 panels in a 2x2 grid. In the first panel, a character asks 'Hey, dude! What are you up to?' a second character replies 'Just building a website... the old way: no frameworks, no webpack, no AI, no libraries... Just crafting HTML, JS, and CSS. It is so much fun!' to the shock of the first character who backs away slowly, to go and tell a different person 'I tell you! He has lost his ******* mind!' in the last panel The same image as the previous one, but in colors. Comic with 4 panels in a 2x2 grid. In the first panel, a character asks 'Hey, dude! What are you up to?' a second character replies 'Just building a website... the old way: no frameworks, no webpack, no AI, no libraries... Just crafting HTML, JS, and CSS. It is so much fun!' to the shock of the first character who backs away slowly, to go and tell a different person 'I tell you! He has lost his ******* mind!' in the last panel
January 17, 2026 at 4:27 AM
comicss.art
comiCSS #113: GoldiloCSS and the Three Breaks
comicss.art/comics/113/g...

December 25, 2023 – Sometimes I do comics to showcase CSS properties and how they work. This is one of them. I like the idea and the first panel, the other three are a bit weird... but Ok.

#css #html #cartoon #cssArt
comic strip with 4 panels. The first one is a cover for Goldilocks and the Three Bears, with a girl and three bear heads, the names have been scratched and rewritten to GoldiloCSS and the Three Breaks. The following panels show some code and the result of it with a comment from GoldiloCSS. In the first one, she uses word-break: break-all, and all the words break at inconvenient places. She says 'too hard'. In the second one she uses word-break: keep-all. The words wrap to the next line unless they wouldn't fit, thent hey exceed the space allocated to them. GoldiloCSS comments 'Too soft'. In the last panel, she uses word-break:break-word and the words wrap to the next line unless they wouldn't fit, then they break. GoldiloCSS comments 'Just right... kind of...'
January 16, 2026 at 2:08 PM
comicss.art
Wednesday CSS game 🎮

Can you complete the grid using valid CSS color names that match the swatches in each row?

Want to play online, get a hint, or check the solutions? Visit the game here: comicss.art/games/5/

#CSS #WebDev #HTML #Games
9x9 grid with color circles on the left side, and the first column highlighted and filled with letters that form "CSS COLORS"
January 14, 2026 at 1:19 PM
comicss.art
New cartoon: Why was the web developer afraid of accordions?
comicss.art/comics/231/

#css #html #cartoon #joke
Why was the we developer afraid of accordions? Because the devil is in the <details> (with a cartoon of the devil with a pitchfork popping out from an HTML accordion/details)
January 13, 2026 at 3:17 AM
comicss.art
comiCSS #112: Eleventy-One
comicss.art/comics/112/e...

December 18, 2023 – Smart me published an eleventy-one cartoon in the eleventy-two index, because I mixed up the dates, and publish the cartoons in a different order. Another Lord of the Rings themed one (there are severals)

#css #html #webdev
Cartoon with four vertical panels parodying the farewell speech by Bilbo Baggins in The Lord of the Rings. A hobbit says farewell and disappears during his birthday speech, to the surprise of all the attendants. He then pops back next to his house saying 'Ha! You always work like a charm, my precious friend!' The last panel is a close-up of a ring with the CSS code: 'display: none; opacity: 0; visibility: hidden !important'
January 12, 2026 at 1:48 AM
comicss.art
comiCSS #111: Nightmare
comicss.art/comics/111/n...

December 11, 2023 – Making fun of Tailwind AND React in a single cartoon? I'm in! This is a version of a cartoon I did for the college newspaper poking fun at the school's quarterback. My editor wisely chose not to publish it.

#css #html #webdev
Cartoon with two panels. In the first panel, a white man wakes up yelling from a dream with The New York Thymes newspaper announcing 'W3C Shocks Internet: Tailwind Replaces CSS' in big letters. In the second panel, an off-screen person says 'Wow! That must have been a heck of a nightmare', to which the previous character replies 'How am I supposed to know? I am just a React Developer!'
January 10, 2026 at 10:21 PM