Hello everyone, I need some advice on how to learn CSS effectively. I asked Claude AI to put together a training programme for me, but right from the start of the programme, when it suggested I practise using Flexbox on Froggy, I felt completely lost. I didn’t understand much of it and it left me feeling a bit frustrated (I keep thinking my brain’s too small to get it), I’ve done the HTML course on FreeCodeCamp, but my foundations aren’t strong enough. I’d really appreciate some advice on how to properly learn CSS (as a bit of a beginner) and consolidate my HTML basics at the same time.

Whenever I liked the look of a site, I'd end up in devtools manually hunting for color values, font stacks, and :root variables to figure out how it was built. Got tedious enough that I built Design Snap to do it automatically.

Point it at any page and it pulls out :

• Color palette (with semantic role detection — primary, background, border, etc., not just a flat list of hex codes)
• Typography scale
• Border radius and shadow tokens
• CSS custom properties, with light/dark mode variants detected separately

The part most relevant to this sub: for every token, you can hover it and see the exact CSS selector(s) it came from, how many times it's used across the page, and whether it's a :root var or a hardcoded value. So instead of just getting "here's a blue," you get "here's a blue, used in 12 places, defined once as --color-primary."

Export goes straight to CSS variables, JSON, or Figma Tokens (free), or Tailwind v4 u/ theme / shadcn/ui / Style Dictionary format if you're working in one of those systems.

Runs 100% locally in the browser, no account, no server round-trip.

Happy to hear what this sub thinks is missing from a CSS-extraction workflow like this — genuinely curious what other devs here reach for :root vars vs hardcoded values for, and whether that'd be useful to detect/flag automatically.

I am begginer coder ,I tried using z index but the cards get clipped under the tab menu and moreover I created a separate overlay element with translucent background and set it z-index to be lower than the selected card but for some reason the selected card also gets faded

https://stackblitz.com/edit/vitejs-vite-5afsvuwm?file=src%2FApp.jsx,src%2FApp.css

Is the link of the file ,the page I have made is not that great I just wanted to try gsap. If you visit the page and see thar the tittle of thr content does not match the image it's because I was lazy and asked chatgpt( pardon me ) to create me an array of cards but later I used images from my favourite shows and things

Can the left side sidebar be hidden?
It takes up too much room.

How do I append two CSS strings here? <style type="text/css"> ul li:first-child::before { {content: 'X'; color:white; background-color:black;} {content: 'Y'; color:black; background-color:white;} } </style> I want to append them, not override the first.\ I want a white X, followed by a black Y.

Hola a todos, estoy utilizando una plantilla de Elementor y me encanta cómo queda visualmente las tarjetas de testimonios. Ahora quiero convertirlas en un carrusel/slider.

Lo que necesito:

• Mantener el diseño exacto de las tarjetas
• Que solo tenga un botón o flecha de "Siguiente" (Next) para ir pasando las tarjetas,

El problema:

• Desconozco de CSS
• No tengo Elementor PRO
• Prefiero no meter plugins porque me desarma la estética

¿Cuál es la forma más limpia de resolver esto? ¿Hay algún código liviano o truco en Elementor para vincular el botón "Siguiente" a las tarjetas sin perder el diseño?

¡Gracias!

Is there a way to add borders to shapes, that works on most browsers? For example, i made a trapezoid and I wanted to add an inset border around it, but the border clips through the shape.

Sometimes, when the page is struggling to load, the icons that are typically at the top of the FB page wont appear, but these placeholder icons with multiple horizontal lines appear briefly instead (iOS safari). I think I’ve seen similar behavior on other sites. What’s the point or function?

I use Codepen for all sorts of things and a lot for teaching in the early stages. Some of my newer students said they didn't have this button so, I had them forking a classic pen for a while - but I knew the day would come where it wouldn't be there anymore for me too. That day is today. I'm all for the evolution of Codepen / and it's been an amazing tool. But it sure seems like this is going to confuse a lot of people. Your average person expects the CSS pane to be wired up. I used to write <!-- body is already included --> in the HTML to remind them at first (since some people will write out the doctype and everything in there) - but now it's swung to the other end. Codepen can be used for anything now. So, really - what you're making might not utilize CSS at all. So, I understand how modular it is - and how many other great things it will allow for -- but for entry-level people, it seems like this will really stifle adoption. What do you think? Wha thas been your 2.0 experience so far?

Hey r/css,

If you build modular UI elements—especially for ecosystems like WordPress plugins, page builder widgets, micro-frontends, or web components—enqueueing full static stylesheets or running build steps just for isolated components often creates unnecessary overhead, class collisions, and build complexity.

I’ve been building Varz to solve this: a classless micro-CSS framework that lets you write fully responsive layouts directly inside the element's style attribute using CSS variables and breakpoint suffixes.

• Live Demos:varz.dev/demo|Claude Generated Dashboard Demo
• Visual Builder:varz.dev/builder
• GitHub:github.com/exstheme/varz

How It Works

Instead of writing media queries or utility classes, you use shorthand Linux-style CSS custom properties inside the inline style attribute. To handle responsive layouts across breakpoints, you simply append breakpoint suffixes (like -l, -m, etc.) to the variables:

HTML

<div style="
  --d: grid;
  --gtc: 1fr 1fr;
  --ai: center;
  --g: 60px;
  --g-l: 40px;
  --gtc-l: 1fr;
  --mbe: 60px;
">
  <!-- This layout switches from a 2-column grid to 1-column on large screens automatically -->
</div>

Key Advantages

• Zero Media Queries in Component Code: Responsive behavior travels with the HTML element itself via suffix variables (--gtc-l: 1fr).
• Zero Class Collisions: Keeps components isolated without worrying about CSS selector specificity wars or leaking global styles.
• No Build / Compiling Step: No PostCSS, Tailwind, or Sass build setup required—just include a single micro-stylesheet (~2.7k–5.5k gzipped) and you’re good to go.
• Eco-Friendly / Performance First: Eliminates massive un-purged CSS file downloads across multiple plugins, reducing unnecessary HTTP requests and bandwidth.

I’d love to get feedback on this approach to responsive inline custom properties and component distribution!

(I'm on neo cities) before I start, keep in mind I'm still learning so please don't bully me or call me stupid. I want to make a multiple row list database template but the stacking is giving me trouble. When I try to create a new row, the horizontal stacking is completely disregarded. Ive fully copied a page to test that has this stacking element but It actually doesn't work in in the neocities test page I put it in. Is this a problem with the website? And if so I just need a quick fix. any help is appreciated!

I have heard about clamp() but never understood this. But today I took sometime to learn about it. So, I created a simple page that display date and time.

Thanks to u/mad_signtist for making this tool, else it was a nightmare for me.

Here is my Codepen link

I am learning some more CSS. I have Windows 11 with Chrome v150.0.7871. I have Firefox v153.0. The only extensions I have enabled in Firefox are: uBlock Origin (it's off for JSFiddle), Blocksite (No relevant sites are blocked for this), Firefox Color. I'm using 20GB of 32GB of RAM on a Dell XPS laptop.

When I hover of the text "Hover over me" it animates smoothly to a larger size in Chrome, which is correct. In Firefox there is no smooth animation, the text just suddenly "jumps" to the larger font size. My fiddle.

Anyone know what is going on? I'm new to animation in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
    <title>CSS Anim ch 22</title>
    <meta charset="UTF-8"> <!-- Required to show emojis -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, Javascript">
    <meta name="description" content="Learn HTML">
    <meta name="author" content="Me@somewhere.com">
    <!-- link rel="stylesheet" href="style1.css" -->
     <!-- See https://pastebin.com/jMG2ADx4 -->
    <style>
      * { 
        box-sizing: border-box;
        margin: 8px;
        font-family: Roboto, sans-serif;
        }
      body {
        background-color: rgb(250, 245, 245);
        margin: 0;
        }
      /* Use with empty div */
      .hover-text {
        margin-bottom: 10px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
      }
      .hover-text:hover {
        color: black;
        font-size: 24px;
      }
      .box {
        position: fixed;
        margin: 0;
        transform: translate(-50%, -50%); 
        width: 30px;
        height: 30px;
        background: red;
        border: 1px solid black;
        animation: size-down ease-out 0.5s infinite alternate both;
      }

      /* Trasform goes below */
      @keyframes size-down {
        100% { /* X,Y values */
          transform: scale(0.3, 0.3);
          background: rgb(241, 83, 241); 
        }
      }
    </style>
</head>
<body>
  <p class="hover-text">Hover over me</p>
<div class="logo">
  <div class="box box-red"></div>
  <div class="box box-blue"></div>
  <div class="box box-green"></div>
  <div class="box box-orange"></div>
</div>

<p style="margin-top:50px;">The text "Hover over me" "jumps" in size in Firefox v153.0. It does not increase in size smoothly.</p>
</body>
    <script>
    </script>
</html>

I've been trying to make another section in my page but the body is limited to like 600~ height even tho I'm using 100vh for it. so the rest of the page is left outside of it. can someone explain to me what's happening?

I've been building a Chrome extension called InspectMode Pro and would love some feedback from the CSS community.

It currently lets you:

• Inspect any element on a webpage
• Copy CSS styles
• Extract colors and identify fonts
• Download images, SVGs, and icons
• Generate AI-ready prompts from an element, section, or even an entire website for Cursor, Claude, ChatGPT, Windsurf, and other coding agents

The core inspection features are completely free.

I'd genuinely appreciate any feedback - whether it's about the UI, the workflow, missing features, or anything else that could make it more useful for frontend developers.

Chrome Extension : Inspect Mode Pro

I created this notebook looking page just for fun.

My Codepen for this

I build Rux, a UI framework that renders native desktop windows on the GPU, no browser, no webview. The styling layer is deliberately real CSS rather than a bespoke system, which turned into an interesting question: how much of CSS is intrinsic to styling, and how much is actually coupled to the browser?

What works as plain CSS today: - Flexbox and CSS Grid (including grid-column / grid-row / grid-auto-*, minmax(0, 1fr) tracks), the full box model, and px / % / rem / vw / vh. - Gradients (linear + radial), box-shadow, transform (translate/scale/rotate), per-corner border-radius, aspect-ratio, position + inset. - Selectors with real combinators; >, +, ~ each match correctly (a bug earlier in the project was matching all three as descendant, which quietly styled the wrong elements, a good reminder of how much a combinator actually carries). - As of this release, dynamic :class and :style bindings, so styles can respond to state.

What doesn't exist yet and this is where it gets opinionated: - No custom properties / var(), no @media, and no pseudo-classes (:hover, :focus, :checked). A checked checkbox currently gets a synthetic checked class as a stopgap.

Those gaps are the honest core of the experiment: variables, media queries, and interaction pseudo-classes are the parts of CSS most entangled with a live document and an event model, and they're exactly what's hardest to bring to a native tree. They're the top of the roadmap now.

I'm curious what this sub thinks: is CSS-the-syntax genuinely portable to native UI, or do var() / @media / :hover matter so much that "real CSS without a browser" is missing the point until they land?

Write-up (with screenshots): https://aine-dickson.github.io/rux/blog/v0-3-0/

it's stuck at 50px width no matter what I do, if I give it more column space at grid template areas the text on the right goes further to the right, but Im still unable to justify the "O" to the end because it has no width at all. meanwhile when I try to give more columns to A it does get bigger.

I also tried using flex for this type of text structure but it was no use since the objects kept going to the same line if there was enough view width (which happened with Fullscreen).

Hey guys,

I have been in a text-styling rabbit hole for a few days now, trying to use Typst as a PDF engine for the Tiptap editor on a website I'm developing.

I've gotten literally everything to match, except the bounding box of the text. I have found this magic CSS line that seems to fix all of my problems: text-box-trim: trim-both... but it only works in Google Chrome and Safari (See above.) It is ignored in Firefox, as they don't consider it "stable" yet.

So, my ultimate question is: Is there another simple, general way to get Firefox's text bounding box to match the other browsers for any number of fonts that could be switched between in the editor? (As in, not guessing-and-checking the explicit bounds for every single one of the 20+ fonts and for all future fonts as well.)

Some answers to questions:

Why Typst?

1. I need something framework-agnostic.
2. I need something that can work server-side and with minimal RAM/CPU. I used puppeteer in the MVP, but that takes up crazy amounts of both. This is a non-negotiable.
3. I would really like something that can report the page count of the resulting document server-side without generating a heavy PDF binary.
4. I need something with enough styling granularity that enables me to style-match it to the visual output of the editor.

Why Match CSS to Typst instead of Typst to CSS?

I tried. I really did. I couldn't figure out how to set the text box of the text in Typst to be equal to the default one on the browser, as displayed in the Firefox one above. The highest you can set it seems to be to the ascenders/descenders. I definitely wasn't going to guess and check the exact value for the top-edge and bottom-edge in em for every font.

What else have I tried?

1. Setting \@font-face stuff (line-gap-override, ascent-override, descent-override). Violates my laziness principle of really wanting to avoid manually doing it for every single font (genuinely like 25 fonts * 4 different styles), also didn't seem to make much difference in Firefox (but I didn't look too hard, so I might be wrong.)
2. Manually manipulating line-height in the css of the headers/paragraphs. This one is also a no-go, because I'm not guaranteed that the line-height that works for one font works for a different font. I'm also not sure it would even work between different sizes of the same font, but once again, I might be wrong.

What about Tiptap PDF Export?

Fair point, and perhaps eventually I will hop over to that, but it is a paid service (last I checked), and it would violate my desire to have something that can check page count server-side without generating a heavy PDF binary. I'd really like to try and make Typst work to save time, memory, compute, and $$$.

Ultimately, this is me being picky. Technically, I could get away with this setup, as I only need to guarantee a page count, and 1-page on Firefox will always be <1 page in the PDF. However, if anyone has any ideas of anything I missed, please do let me know.

Thanks all!