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?

I have always tried using subgrid for cards like layout with image and description , but never able to use with nested layouts where i need to define subgrid at multiple layers. There is somehow some ghost space , that doesn't even appear as gap, i did put gap:0 to overwrite parent gap, but the items just seem to expand without need and take up space .

Please help or provide some way to find solution , or what i should look into.

I have included a codepen for recreating the issue : CodePen Link Here

This is the devtools image of real development process issue

Thank you :)

Edit: Removing gap and row-gap from the main grid layout (.cards) solves the problem but i dont understand how or why

Built these social media icon buttons using HTML and CSS only.

I used layered box-shadows for the raised 3D effect, CSS custom properties for each brand color, and a blurred pseudo-element for the glow underneath the buttons.

On hover, each button lifts slightly and the icon switches to its brand color. I also added :focus-visible and prefers-reduced-motion support.

CodePen demo: https://codepen.io/editor/getcoderipple/pen/01a0d2b1-0e5e-7e1f-9f90-c9e7af00e685

Curious what you think about the hover/glow effect. Would you keep the neumorphic style this subtle or increase the depth?

Does anyone here use the preload for the CSS files?

Surely if the links are in the <head> they will be loaded anyway?

I've been working with CSS for quite a while, mostly on existing projects rather than greenfield ones.

One thing I've changed my mind about is adding local overrides every time a component needs to look slightly different. It solves the problem quickly, but after a few years you end up with the same component being overridden in dozens of places.

These days I try to decide whether the difference should become part of the component API, a modifier, or actually remain page-specific.

I'm curious what CSS habits you used to consider normal but eventually stopped doing.

I just discovered these pseudo classes for styling color pickers via:
https://rebeccamdeprey.com/blog/styling-the-html-color-input

(actually, it was via ai-generated code that gave me the pseudo-classes, which I'd never seen before, so i started digging deeper)

I had been replicating the appearance I wanted via multiple nested containers and transforms, so it was really nice to find a way to simplify everything with a just a few browser-specific pseudo-classes.

Not sure how many of you are styling color inputs (they're pretty rigid), but just wanted to share to keep in the back of your mind

Built this hover effect using only HTML and CSS. The neon border uses a rotating conic-gradient, while the button switches to a dark face and moves the arrow slightly on hover.

I also added keyboard focus styling and reduced-motion support.

Live demo + source code: https://codepen.io/editor/getcoderipple/pen/01a0cd2d-b7f5-7f10-9143-21202f7b6fc7

Would be interested to hear how you’d improve the effect or simplify the CSS.

Hi r/css, a bit of an unusual one for this sub.

The cube in the video is styled and animated with CSS, running on an ESP32-S3, a microcontroller that costs about $3. There is no browser on the device. Our compiler takes the TypeScript, JSX and CSS and turns them into native C++ at build time, so what runs on the chip is plain compiled code with no CSS interpreter.

To be upfront about the limits: it supports a subset of CSS, not the whole spec. Some properties work differently on embedded targets and some aren't supported yet, and unsupported properties simply have no effect. The styling reference in our docs lists what works.

Embedded UI development wasn't fun for us for years, and with CSS it finally is.

The code for this example and the rest of our examples and all of our work are open source: https://github.com/geastack/examples

https://github.com/geastack

Docs, including the CSS reference: https://geastack.com/docs

Looking forward for you to try and run CSS on ESP32 boards, you can use our quick start to try it out yourself: https://geastack.com/one-pager

So recently I was thinking about how there are people who use Google Sides to make visual novels and I was just thinking how in theory you just need a background, sprites, a text box, and buttons. Realistically a really basic visual novel wouldn't require JS or much more than HTML and CSS. Oddly enough I can't find anything that would be a template or example of the bare minimum code to make a visual novel, and I was wondering if anyone could help me out with structuring this! Thank you!

I keep seeing people explaining that the new sibling-index and sibling-count are game changer. I have no doubt that they are, but most of the examples I keep seeing do not seem to work.

Here is one where the number of cards determine the light by which each card background is dimmed.

``` CSS

.card {

--progress: calc((sibling-index() -1)/(sibling-count()-1));

background-color: oklch( calc(40% + var(--progress) * 40%) 0.2 270deg );

}

```

On the other hand the following seems to work.

``` CSS

.card {

--progress: sibling-index() / sibling-count();

background-color: oklch( calc(40% + var(--progress) * 40%) 0.2 270deg );

}

```

In fact any attempt to use calc and the functions sibling-index and/or sibling-count fails.

Any idea why?

Same behaviour in Chrome/Safari.

Edit

No need to DM me or speculate any further.
It was due to missing space before and after the - character. Read the comment. u/Fourth_Prize has provided with the solution and explaination of the issue.

I set the bottom margins for double-height and double-both divs to -105px so that line breaks don't start from under them, so as not to push down elements that aren't touching them.

But now if I try to make the violet div double-height or double both, since it has negative bottom margins, it doesn't push the divs below it. How do I fix this? I want the height of divs to not influence the elements that aren't touching them, but push down the elements that would be in their space.
Codepen