Archive - CSS Simplified

New Top Discussion

Did you know that you can display a nicely styled text instead of the default ALT text in case your image is broken?

Jan 4

Ever been annoyed by tiny buttons on mobile phones? I’m sure at least once in your life you have zoomed in on a page just to click on a small button…

Feb 16

I don’t know about you, but I totally love blob-shaped images like these on websites. It makes the page appear more modern (and less boring). I was…

Mar 8

Here’s is a nice heading style with horizontal lines in the middle on both sides. Do you know how to make this without adding additional divs or images…

Jan 12

With so many properties and selectors available, it's easy to see why CSS can sometimes seem overwhelming. But if you take time to learn each of them…

Feb 1

The question is simple and it feels like the answer should be simple too. Suppose we have a short phrase in a paragraph element like this with a blue…

Jan 19

Today we're going to talk about the clamp() function. If you're not familiar with it yet, clamp() allows you to set a range of values for a property…

Feb 22

Have you ever had to change the number of grid columns for different screen sizes in your CSS? Maybe you've found yourself duplicating the same code and…

Mar 22

Have you ever clicked on a link expecting to stay on the same tab, only to see it open another tab? It can be frustrating for your visitors too! What if…

Mar 15

Ever been in a situation where you have to display some paragraphs in a narrow block or column? You must have noticed a lot of white space to the right…

Jan 25

I’ve brought you something different this week. One tip for you to make CSS a little less overwhelming. I’ve often been asked how to get better at…

Nov 2, 2022

Hey all! As much as I love sending you these CSS tips every week, I need a short break. Hey all! As much as I love sending you all these CSS tips every…

Dec 14, 2022

#nojs-banner { position: fixed; bottom: 0; left: 0; padding: 16px 16px 16px 32px; width: 100%; box-sizing: border-box; background: red; color: white; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 13px; line-height: 13px; } #nojs-banner a { color: inherit; text-decoration: underline; } This site requires JavaScript to run correctly. Please turn on JavaScript or unblock scripts