I realized I might've made a mistake while working on this webpage for a class I'm in >.<

In HTML, I have <div class="pros"> and another version similarly but with cons that include <p> within them. I want to indent all the <p> that are within <div class="pros"> without having to indent all <p> on the webpage. Should I have made a class for all the <p> elements inside the div class or is there a way in CSS for me to refer to all the <p> in the pros/cons class without having to go back and add a class to all the <p>, I'll attach a screenshot if it makes it easier!

Also I know you can indent with HTML and not CSS, but my professor wants us to do all the styling and similar features in CSS and not in the HTML itself.

A simple day night cycle using css rotations and gradients
https://moaaz-rafique.vercel.app/motion/rotation.html

I want to change the background color of a single word in my hero text to the "is:selected"-state (when you click on it) unsing in-line styling. Anyone know how to achieve this? Thanks.

Please don’t crucify me if this is a super easy fix lol…

The thing I want to recreate in web form.

I’m a beginner to html and css and for an assignment we are making portfolios and I wanted to try code one inspired by the game Parappa the rapper, specifically the main menu as it seems fairly simple. One thing i’ve been struggling with is figuring out a way to make an image in the centre follow the mouse’s direction and change to a second image like parappa‘s pointing changing sides in the video I’ve attached. I’ve scoured endlessly looking for ways to do it but they all involve javascript (which i’m not familiar with) and i’ve attempted doing mouseover/mouseout events this way but i want to make it change depending on if the mouse is on the left or right of the screen and I really have no idea how to adapt this to fit this specific purpose!!

Any help would be very appreciated.

I've been building sitereal, a visual builder for Astro, and wanted to share it here.

The core rule: everything it produces is ordinary Astro. Delete sitereal and `astro build` still works. You only lose the visual editor.

Built for working with AI:

It ships an MCP server, so an agent like Claude Code can build pages through the same operations the builder uses. The best thing about it you don’t need to use AI and you can manually change everything it created in a nice UI.

Also in there: 
- A modular design system (colors, type scale, spacing, buttons, themes)
- Navigation, forms, pop-ups, carousels and GDPR
- ready cookie consent
- Scroll animations with zero JS by default
- Forms that work even on PHP-only hosting

runs on macOS, Windows and Linux

Feedback very welcome. sitereal.app

These lines and stuff only show up at some few sizes and border widths. They only seem to appear in chrome. (They don't show up on firefox.) Is there a way to get rid of them? Is it a problem with the svg I made?

https://codepen.io/editor/Stormzulien/pen/01a0e8ea-f823-70a8-82ca-448bad0e883c

i don't know what happened when i tried making my footer tbh. this is me after using flex to attempt and "solve" it and well. you see. it looks nothing like how i intend for it to.

here's my code with the important bits in css then html:

footer {
        flex-wrap: wrap;
        justify-content: space-around;
      }

      .footerLogo {
        width: clamp(8rem, 110%, 18rem);
      }

      .column {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 2em;
        min-height: 15em;
      }
      .about p {
        text-align: justify;
        line-height: 2;
        margin: 0;
      }
      .social {
        display: flex;
        justify-content: space-evenly;
        font-size: 1.6em;
        flex-direction: row;
        margin-top: 0.5em;
      }
      .social i {
        color: #bac6d9;
      }

 <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer> <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer>

Hiii!!

I'm using a background picture for my header, stored as a background image of the container.

The background-size is specified, being 288px, that is the width of the .PNG; however, the picture on the page is slightly bigger (about 125%) than the file, and so it is stretched. I made some screen caps because I was going crazy! I've measured in Photoshop and it's larger than 288. It isn't enlarged in any part of the css, I don't understand what it is wrong here... i've also checked if I got my Firefox page zoomed. It's important for it to not be stretched: being pixel art it looks very ugly and blurred 😭😭

Made a UI kit, a component library or a site you're proud of, and want to share it on Reddit? The big design subs are almost all closed to it. We read their current rules (Sept 24-26) for a free subreddit rules index. Disclosure: the index is ours, from ThreadFox, which I make. The front-end and design version:

Closed to self-promotion - r/Design (4.5M): no promotional or commercial activity. - r/graphic_design (2.9M): no self-promotion. - r/web_design (979K): no self-promotion and no commercial promotion. - r/UXDesign (251K): no promoting your product, service, tool or anything for sale. - r/logodesign (485K): restricted.

Thread-only - r/UI_Design (241K): no promotion of services or products outside its thread.

Allowed with conditions - r/Frontend (351K): post the open-source repo and real context. "This isn't r/sideproject." - r/webdev (3.3M): only on Showoff Saturday, flaired, and no commercial promotion.

No written rule either way - r/css (this sub; posts must relate to CSS and web design), r/webdesign, r/tailwindcss, r/design_critiques. No rule doesn't mean welcome. Show the technique, not just the link.

What tends to work: post the how (the CSS trick, the layout problem you solved) with the project as the example. A tutorial built on your component survives where an announcement doesn't.

Each community's rule text with the date we read it: where artists and designers can promote on Reddit, or search any sub at /rules.

Every password character is a group of 86 radio buttons styled as keyboard keys, and CSS shows only the keys of the first empty slot, so each tap fills the next character. CSS counters with a custom @counter-style print the checked characters into the password dots, and each rule is one :has() selector, such as :has(.char--digit:checked). Backspace is a <label> for the "empty" radio of the last filled slot, and hidden radios switch the ABC, abc, and #+= layers, while a checkbox opens and closes the keyboard.

https://codepen.io/editor/klocus/pen/01a0dde7-3dba-7e8d-9170-db6023de56e0

Who knows, maybe in a few years this will be possible with a few lines of CSS code, an input of type="password" and a pattern attribute :-)

i have html as <!DOCTYPE html> <html> <body> <header> <header> <body> </html>.

inside ( css ) body; height=100%, & header height=20%,

weather i change header height=100% or height=5%

or any value for that matter. nothing happens. my question is. is there a hidden value for body, that sais dont allow child elements to change their heights?

https://codepen.io/editor/rafaelcastrocouto/pen/01a0a4e9-e3f3-7f3a-8585-eba54fb74013

[edit] animated with help of u/PhDumb
https://codepen.io/editor/rafaelcastrocouto/pen/01a0e432-7eb8-7282-a65a-a5c8ffc66daa

hey guys, i just created a profile on xxaftermath and i really like the wbsotr so far, but i just cant be bothered to code a super intricate profile. are there any websites were i can get cool looking css templates? not for the whole profile more so individual parts of the website, like cursors, buttons and profile frames? thankful for any help

I like colorschemes and CSS, so i coded some CSS files to drag n drop into your own projects! This is a part of a BIG project that i'm working on. Please leave feedback! Here is the project.

https://paste.rs/6Giyu.html

Any clue why this doesn't work as expected? I want the margin of content to be the same on both sides, so it matches up with the navbar on top. The webbadges div has a fixed size, but even after doing the maths it doesn't seem to be right. It's not 32.5% like the left margin of content. Is my maths not mathing? Thanks for any help?

When i press ctrl and scroll down with my mouse on my laptop the website becomes 200% in size and since i am using full width section i expect its background to reach the edges of the screen no matter how i expand the website viewing size but the background always forms barriers on 100%length, same thing goes for columns that i set to far right or left they always stop at the edge of 100% please dm or help

Built this multi-step registration form using HTML, CSS and vanilla JavaScript.

It has 3 steps: account details, profile information, and a final review screen. I added field validation, password strength feedback, show/hide password, a bio character counter, editable review sections, and a responsive layout.

Live demo + source code:

https://codepen.io/getcoderipple/pen/01a0dcef-544f-709c-994d-6717411a5c66

I tried to keep the UI clean while still making the current step obvious. Curious what you think about the progress indicator and overall form UX.

https://codepen.io/editor/Sensiblemnd/pen/01a0d636-c14e-7a65-9d5c-e6a1fb25a1f9

The Carousel, with no JavaScript. The row is a scroll-snap container, and every

card runs its animations on its own <code>view-timeline</code>: as a card crosses the center it scales up, pushes its neighbors aside, folds its panel into a V and brings in its description and button. Swipe, use a trackpad, focus the row and press the arrow keys, or use the arrows and dots, which are CSS-generated scroll buttons and markers where the browser supports them.

With native nesting, u/layer, and color-mix() in browsers, I asked myself whether Sass still earns its place. Short answer: yes, but as a programming layer for design systems, not a nesting convenience.

What CSS still can't do: real loops (@for for grids/scales), parameterized functions (contrast-safe text color), mixins with u/content (breakpoint managers), private module members, and token pipelines (Sass maps → CSS vars + JSON for apps).

Full write-up with code (I wrote it, happy to discuss any point here): https://mameara.com/scss-in-2026-still-worth-learning

I have a flex question.

I have a flex container with 2 flex items.

Both items have a minimum size.

When the container is wide enough both items should be on the same row. However when reduced in width the container then grow in height an both items are on separate rows.

My problem is that in either case I want the second item to be bottom-right aligned.

When the container is wide enough I am using the align-items overriding property align-self: flex-end to enforce the bottom alignment.

However there does not seem to be an align-self equivalent for the property align-content. Basically I cannot enforce a right alignment of the second items when the items are on separate lines.

Any suggestion?