/r/css

Photograph via snooOG

A community for discussing about CSS (Cascading Style Sheets), Web Design and surrounding relevant topics. Feel free to discuss, ask questions, share projects and do other things related to CSS here.

About CSS
  • CSS, short for Cascading Style Sheets, is used almost universally across the web to affect the design and appearance of every website you visit. Here in /r/css, you've got a place on reddit to talk about CSS, whether you're new to CSS and want to learn, or a pro wanting to discuss the engineering and usability reasons that all modern browsers ignore

  • We welcome all CSS discussion here. If you need help with styling your website or your reddit, or want to share a neat trick you cooked up, it's welcome here!

Rules
  1. No spam. If you've developed a neat CSS trick that you want to share with others, make sure you share the trick, not your website. In other words, feel free to post something like "Isn't my 404 page neat?" with a link, but avoid posts like "Hey look how cool my site is!" that link to a storefront. This reddit is a place to learn and show off CSS, not sell your products. If your CSS helps sell your product, great, but make sure your post is about the CSS, not the product.
  2. Be nice. Not everyone is a fantastic designer. If someone posts their work here and you don't like it, give them objective feedback about ways to improve it, not "it's ugly." Likewise, CSS newbies often have the same questions as they grow and learn, so try not to be mean when they post a question we've seen a thousand times before. It might be old news to you, but they wouldn't ask if they hadn't already sought an answer, and there might be other people too afraid to ask for themselves.
  3. Don't use link shorteners (bit.ly for example), because they are automatically marked as spam.
  4. Try to use descriptive titles (not 'I have a question.'). I won't enforce this, but it'd be nice if you'd follow it.
Related subreddits
Useful Links
  • Inspire, a collection of all kinds of useful links.
  • /r/csshelp and /r/reddithax are the places to go for questions relating to Reddit's stylesheets. Techniques differ a lot between formal CSS development and subreddit stylesheets, so you'll often get better answers there.
  • Use Codepen or jsFiddle to provide working code samples.
  • Mozilla Developer Network is your one-stop shop for detailed information on CSS properties. Formal specifications for everything CSS can be found at W3.org. Don't go to W3Schools - it isn't a wiki maintained by real developers like MDN, so it's often out of date and prone to significant errors, and it has no relationship with the W3 so they have no special or insider knowledge.
  • CanIUse.com has 99% of the information you need on supporting different browsers.
  • Codecademy can get you started from 0 knowledge of web development in mere hours.
  • Learn Layout will teach you advanced techniques for designing modern sites.

Click here to message the mods.

/r/css

129,659 Subscribers

1

[Pc based code] I dont get why my code still looks not centered in other pcs.In mine its perfectly center alligned

3 Comments
2025/01/10
17:52 UTC

1

How to Resolve Deprecated Sass @import warning?

Since the release of Next.js 15, I keep encountering this warning. Does anyone know a solution?

Error example:
Sass u/import rules are deprecated and will be removed in Dart Sass 3.0.0.

typescriptCopy code5 | u/import '../typography.scss';

styles\config\index.scss 6:9  @use  
styles\global.scss 1:1        root stylesheet

I'm using Sass with multiple files. Here's how my config.scss file looks:

@import '../variables.scss';  
@import '../theme.scss';  
@import '../mixins.scss';  
@import '../animations.scss';  
@import '../typography.scss';  
@import '../common/atomic.scss';  

In global.scss, I include it like this, on the top of the file:

@use './config/index.scss' as *;

How do you handle multiple SCSS/CSS files?
I'd be really grateful if someone could help.
Thanks in advance!

2 Comments
2025/01/10
15:05 UTC

67

My first beginner portfolio

As a beginner with around 4-5 months of knowing CSS & HTML, it took me around a week to get all of this done. I may have made some duplicates of properties, but I am more than happy enough that it works good on all devices bigger than 320px width. If there are Frontend Devs out there, can they rate this website from 1/10 (rating it as you don’t know that I am a beginner) and write my cons & pros? It would be very useful to have some feedback from experienced people, in order to learn on my mistakes.

(Here is some things I still didn’t learn, so everybody can know: ARIA & Accessibility Everything except for min/max-width in media queries )

sorry for English mistakes, it is not my native language

22 Comments
2025/01/10
05:28 UTC

2

How to have flex item only take up exact width it needs when it contains collapsed text?

Hi there. I'm using flexbox to have a list of titles with a button on the right and a divider line in between. It works except for one issue - if the text on the left is too long it forces it to a new line, which is fine, but that flex item ends up larger than it should be, meaning my divider doesn't get to show. I have tried everything I can think of to get it to behave but it won't. width: min-content ends up forcing each word on a new line so that isn't the answer either. Any help would be appreciated. Note this is not the full context of what I'm doing. I don't do this on mobile. This is just an example that captures the issue I'm experiencing with long titles on narrow desktop. Codepen: https://codepen.io/mind_patterns/pen/gbYvyeZ

https://preview.redd.it/eibph1mmn2ce1.png?width=548&format=png&auto=webp&s=9a547a3c291406e545c22a614718e52e99511489

15 Comments
2025/01/10
01:51 UTC

0

Styling headings ‘inline’ a paragraph

Is there some CSS trick which would allow markup such as:

<h5>Lorem Ipsum</h5>
<p>Pellentesque at aliquam enim, a facilisis dolor. Donec feugiat
accumsan.

to be styled with an ‘inline’ heading. What LaTeX calls a paragraph. I.e. to get formatting such as:

<p><strong>Lorem Ipsum</strong>. Pellentesque at aliquam enim,
a facilisis dolor. Donec feugiat accumsan.

I could put h5 inside of p but that’s technically an invalid markup, I guess?

I know about role and aria-level, but that’s less ‘natural’ markup hence why I’m pondering existence of some black magic which would make it work with h5.

7 Comments
2025/01/10
01:50 UTC

3

* or body

For the life of me I just can't understand the difference. I get one overwrites all things within the document but I would like a reason for it's use. If I can just use the body element every time why even use * ?

9 Comments
2025/01/09
22:20 UTC

0

z-index not working with pseudo-classes

Recently trying to make a border style animation but for some reason the psuedo class background is appearing on top of the main-background even with the z-index
```

.about-me-content{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: auto;
    flex: 1 1 0;
    max-width: 700px;
    position: relative;
    z-index: 0;
    background-color: #e84393;
}
.about-me-content::after{
    content: '';
    position: absolute;
    background: green;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    translate: -50% -50%;
    z-index: -1;
}

 ```
 <div class="about-me-content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero cupiditate debitis distinctio, nisi iusto facere accusamus vel. Aliquam incidunt molestias maiores perspiciatis doloremque, vel debitis ea tempore accusantium nisi!</p>
                </div>

https://preview.redd.it/ia6hswmbkzbe1.jpg?width=884&format=pjpg&auto=webp&s=10d690e1420567d73e47e1be538ab55f6f114715

29 Comments
2025/01/09
15:22 UTC

4

Any Idea on how to create these kind of lines that always stay at the background ?

I've seen these kind of vertical lines in a lot of modern website designs. But I don't know how to write it so it always stay in background even when scrolling. May I get some help on that ?

This is the website from the screenshot - https://riadmammadov.com/

https://preview.redd.it/jg0xw91hwxbe1.png?width=1920&format=png&auto=webp&s=27d900c40d8dfa99dd3c8ca2e457146c538317a4

8 Comments
2025/01/09
09:48 UTC

0

How to pixelate surrounded the text

hello how to do this pixelate effect surrounded the text in large size as in the photo

4 Comments
2025/01/09
03:49 UTC

3

Is it possible, in a grid, to rows that are aligned differently in different columns

Is it possible to achieve this kind of layout using a CSS grid and five divs?

https://preview.redd.it/k8thyr1d8vbe1.png?width=932&format=png&auto=webp&s=1567c41b74e30291c3995adca82fb10e04679782

10 Comments
2025/01/09
00:50 UTC

3

@position-try value not applying for CSS anchor positioning?

I am playing around with CSS anchor positioning at work and for the life of me, cannot figure out why the custom fallback positioning is not applying.

I’ve defined an anchor, positioned the target around said anchor, and am now attempting to deal with horizontal overflow by defining fallback positions.

In Chrome dev tools, it just has a strike-through, indicating that the fallback isn’t working. All the fallback position that I’ve created does is set the target’s width to an absurdly small value of 10px, so it should have more than enough space to fit on the page when the component overflows.

Has anyone run into this issue? I suspected that there was another rule overriding this, but in the computed styles section of my dev tools, it looks like it is supposed to apply.

Thanks in advance.

1 Comment
2025/01/08
15:10 UTC

4

text-reveal effect not smooth

Hi! i have been trying to create a text-reveal effect which colours the text but their is space between my content and it does not smoothly fill the second part or content after space and when it finishes the color just snaps in their.. any way on how to fix it?

```

.name-heading h1{
    position: relative;
    color: transparent;
    -webkit-text-stroke: 1px green;
}
.name-heading h1::before{
    content: 'Yaseen Rehan';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    color: #4cd137;
    transition: 0.5s ease-in-out;
    overflow: hidden;
    animation: name-heading 6s linear infinite;
}

  <div>
            <div class="name-heading">
                <h1 class="no-margin">Yaseen Rehan</h1>
            </div>
            

        </div>
7 Comments
2025/01/08
11:22 UTC

9

Finally got around to designing my own webpage, thoughts?

29 Comments
2025/01/08
03:26 UTC

2

doubt regarding specificity ,css

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Cascade</title>
  <link rel="stylesheet" href="./style.css">
  <style>
div.box.inner-box{
color: white;
background-color: red;
}
/* .white-text{
color: white;
} */
  </style>
</head>

<body>
  <div id="outer-box" class="box" style="background-color: purple;">
<div class="box" >
<p>Yellow Text</p>
<div class="box inner-box">
<p class="white-text">White Text</p>
</div>
</div>
<div class="box">
<p>Yellow Text</p>
<div class="box inner-box">
<p class="white-text">White Text</p>
</div>
</div>
  </div>
</body>

</html>

style.css

/* Don't change the existing CSS. */

.box {
  background-color: blue;
  padding: 10px;
}

p {
  color: yellow;
  margin: 0;
  padding: 0;
}

why am i seeing the <p>white text</p> as yellow still, internally declared css rule wouldn't it override color declared in external style.css 
https://ibb.co/zbm0q5H

mine & how should it look: 
https://ibb.co/bRbYqb0
15 Comments
2025/01/07
19:18 UTC

0

Hi, I would need help.

How to add a Dropdown menu to one div?

Solved

9 Comments
2025/01/07
18:14 UTC

34

I Created VanillaHTML (a CSS File)

Check out VanillaHTML and VanillaHTML Github

Hi, I’m Bijan!

I’ve been creating websites as a hobby for quite a while now, and professionally for a little over four years now.

In that time I’ve noticed one thing that never seems to change despite everything in tech ALWAYS changing, and that’s how ugly regular HTML looks.

I write about this project in detail on my portfolio but here’s what it is and why I made it!

What VanillaHTML Is and Isn’t

Let’s be real, default HTML is an ugly duckling. You hate to look at it, but you also know how much potential it really has with the right CSS.

VanillaHTML is a CSS file that allows for regular HTML to look and feel much more modern. But it also enforces the use of Semantic HTML. This means that if you are building your HTML to meet accessibility you will want to make sure you are using HTML elements that tell the browser what the element on your website does.

This is not intended to replace design or CSS in any way. If you are building websites for businesses then you should be designing and working with CSS. However, you can use it as a starting point for any project. By default there are no classnames, all the CSS is applied directly to the semantic element, so you can easily add classes to your html for your custom design, or remove and add what you do or don’t like from the file.

By enforcing these Semantic HTML practices as you build a website, you develop good habits and practices as a web developer. It not only makes building easier, but it also makes the internet better.

Why I Made VanillaHTML

I wanted to create an experience where learning HTML felt more modern, fun, and more effective. I wanted the visual aspect of building a basic HTML website to make it clear what exactly your HTML is doing.

I also wanted to highlight the importance of accessibility and how powerful default HTML can actually be and how much value these semantic elements provide.

31 Comments
2025/01/07
17:42 UTC

1

View Transitions API - whole page freezes while transitioning

Hello, I was wondering if we know whether this behaviour will be changed in the future as it's pretty annoying. When I replace part of the page while using the new View Transitions API, not only the replaced content but the whole page freezes meaning user can not interact with buttons, scroll etc.

2 Comments
2025/01/07
16:15 UTC

17

Is possible to horizontally center the remaining items in the grid? (CSS Grid)

33 Comments
2025/01/07
07:52 UTC

5

Need some advice on landing page body sections.

https://preview.redd.it/mbibslpu3mbe1.png?width=1920&format=png&auto=webp&s=c7f73c9bc0879490bfc19a7d5a33418ca7409eb5

How do the sections look? This is the employer landing page for my project "HireSpot," which I'm building for my portfolio as part of my junior web developer role application. I'm not very strong when it comes to UI/UX because I'm more of a backend developer with experience in Python, Django Framework, and Django Rest Framework.

If you have any feedback or advice for me, I would be very grateful. Thank you.

18 Comments
2025/01/07
02:16 UTC

2

Vertical spacing - Why are popular frameworks adopting different methods?

Hello,

Hopefully someone can quickly point me in the right direction, and explain why? I've tried googling but it's not the easiest thing to google.

This markup example hopefully explains what I'm trying to do:

<div style="padding:20px;">
    <h1 style="margin-bottom:10px;">Heading</h1>
    <p style="margin-bottom:10px;">Standard paragraph</p>
    <p style="margin-bottom:10px;">Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

There appears to be a few ways of achieving the above. I've noticed libraries like radix use flex/grid and have 0 margin & padding on all tags. While libraries like mantine favour margin & :last-child, where all h1, p tags etc have margin and also rely on them colapsing. I'll give examples below.

Example 1 - Flex

<div style="padding:20px; display:flex; flex-direction:column; gap:10px;">
    <h1>Heading</h1>
    <p>Standard paragraph</p>
    <p>Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

Example 2 - Grid

<div style="padding:20px; display:grid; grid-column:1; gap:1.5rem;">
    <h1>Heading</h1>
    <p>Standard paragraph</p>
    <p>Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

Example 3 - Margin

<style>
    .container p:last-child {
        margin-bottom:0;
    }
</style>
<div class="container" style="padding:20px;">
    <h1>Heading</h1>
    <p>Standard paragraph</p>
    <p>Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

What are the pros and cons of the above so I can better decide which to adopt myself? And which method do you personally use and why?

Thanks in advance for any help.

P.S. I've used the Radix UI Theme, but really hated the way they did sizing in pixels (rather than em/rem) and then to make it worse, the size properties just seemed like random numbers (amongst other issues). So I moved to Mantine, but now while they use rem/em, they do this margin approach to spacing consecutive elements. I keep finding I'm removing the margins in components more than I use the margins. Which then got me here.

12 Comments
2025/01/07
00:50 UTC

2

Drop-up menu

Hello, I am currently trying to learn CSS and I was trying to make a drop-up menu and ran across couple of issues. For some reason menu content is slightly bigger than my button. I tried couple of things that I could think of and now I'm just stuck why is it this way?

https://preview.redd.it/qstsqg56tgbe1.png?width=491&format=png&auto=webp&s=d096f0c6dbc13698e6884001349c8e2b52091f26

This was my first question. And another one is - is there any way to make my content appear smoothly? I was trying to use transition, but it seems not to work with how my code is written? I didn't use JS because I know very little about it (probably will learn it later) and was trying to find some work around.

Here's entire HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Drop-Up Menu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .dropup {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            background-color: white;
            color: purple;
            border: 2px solid purple;
            padding: 0.6em 1.2em;
            font-size: 1em;
            border-radius: 1.25em;
            transition: 0.2s;
        }

        .dropup-content {
            display: none;
            position: absolute;
            bottom: 100%;
            background-color: white;
            width: 100%;
            border: 2px solid purple;
            border-top-left-radius: 0.625em;
            border-top-right-radius: 0.625em;
            border-bottom: none;
        }

        .dropup-content a {
            color: black;
            padding: 0.75em 1em;
            text-decoration: none;
            display: block;
        }

        .dropup-content a:first-child {
            border-top-left-radius: 0.625em;
            border-top-right-radius: 0.625em;
        }

        .dropup-content a:hover {
            background-color: #f1f1f1;
        }

        .dropup:hover .dropup-content {
            display: flex;
            flex-direction: column;
        }

        .dropup:hover .dropbtn {
            background-color: #f1f1f1;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top: none;
        }
    </style>
</head>

<body>
    <div class="dropup">
        <button class="dropbtn">Get in Touch</button>
        <div class="dropup-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</body>

</html>

Would appreciate any help! Many thanks!a

P.S. there certainly are mistakes and some stuff that can be improved in this code, but as I said I'm just learning still :)

1 Comment
2025/01/07
00:28 UTC

8

What units do you guys use?

Do you guys mostly use rems? or pixels? what about vh and vw? percentages? ems maybe? what about media queries? what units for them? I would like to see an answer formatted like this, would be appreciated.

padding and margin: rems
width and height: ems
font-size: pixels
etc etc

11 Comments
2025/01/06
22:26 UTC

3

Grid Display Issues

https://preview.redd.it/dsypz8xz1gbe1.png?width=538&format=png&auto=webp&s=7861110f262baec1043cffd9d893904dd8f21561

Does anyone know why when i remove display: grid code from css stylesheet that line under the arrow icon goes away ? it was never there on the fontawesome image i took the code from. I dont want that line.

Link to Code Via Github (new to this XD):

https://github.com/afolliet/Google_Homepage.git

7 Comments
2025/01/06
21:47 UTC

24

What would you rate this for an absolute beginner?

Two days ago I started to learn css by a youtube video and today I finished it (video was not very long tbh), after completing it I thought to make a login Page and ended up making this one without any reference so on a scale of 1 to 10 how much would you rate it and what are the fixes that can make this a good one? Your feedback and suggestions will help me a lot to improve myself.

109 Comments
2025/01/06
10:45 UTC

3

Stuck to learn CSS position and flex boxb so where should i learn and practice CSS

Hey everyone i make many projects on frontend but whenever i write css by own i stuck and confused how the css position and flex box like i know basic things about css. So please me guys

8 Comments
2025/01/06
08:28 UTC

5

Formatting disappearing on mobile

Could someone help me understand why the bar " I " between the date and the read time disappears on mobile?

https://realworldinvestor.com/how-to-become-an-investor/

5 Comments
2025/01/06
00:12 UTC

Back To Top