Dev.to

The 5 CSS Specs Every Developer Should Know

Hi there! I'm Shrijith Venkatrama, founder of Hexmos. Right now, I’m building LiveAPI, a tool that makes generating API docs from your code ridiculously easy. Let’s dive into five CSS specs that I think are essential for anyone working on the web today. CSS has evolved a lot, and these specs cover the core skills and tools you need to style and structure modern sites efficiently. Whether you’re adjusting colors, targeting elements, or building layouts, knowing these will make your life easier and your code cleaner. I chose these five—CSS 2.1, Selectors Level 3, CSS Color Module Level 3, Flexbox, and Grid—because they form a solid foundation while including key modern features. CSS 2.1 is the baseline that defines how CSS works. Selectors Level 3 improves how you target elements. CSS Color Module Level 3 handles color and transparency. Flexbox and Grid are the go-to solutions for layouts, covering one- and two-dimensional needs. Together, they give you what you need for most projects in 2025. Let’s break them down! CSS Level 2 Revision 1 (CSS 2.1) Let’s start with CSS 2.1. This spec, finalized in 2011, is the foundation of modern CSS. It’s not the newest, but it’s critical because it sets the rules that browsers still follow. U nderstanding it helps you make sense of everything built on top of it. The official CSS 2.1 spec covers the essentials like the box model and positioning. Key Concepts The Box Model: Every element is a box with content, padding, borders, and margins. The default box-sizing is content-box. Positioning: Options like static, relative, absolute, and fixed control where elements sit. Floats: A pre-Flexbox way to align elements, still useful in some cases. Try this: .box { width: 200px; padding: 20px; border: 2px solid black; margin: 10px; background-color: lightgreen; } Without border-box Add box-sizing: border-box and see how the dimensions shift: .box { width: 200px; padding: 20px; border: 2px solid black; margin: 10px; background-color: lightgreen; box-sizing: border-box; } With border-box Learn more in here. The box-sizing property allows us to include the padding and border in an element's total width and height. Why Dig Deeper? CSS 2.1 explains why margin: auto centers a block or why floats behave the way they do. It’s the starting point for troubleshooting and mastering newer specs. Selectors Level 3 Next is Selectors Level 3. This spec, released in 2011 and refined since, upgrades your ability to target elements precisely. It builds on CSS 2.1’s basic selectors with more powerful options. Check the official spec for details. Key Concepts Pseudo-classes: Includes :hover, :first-child, and :not(). Attribute Selectors: Target elements like [type="text"]. Combinators: Use > (child), + (adjacent sibling), and ~ (general sibling) for relationships. Try this: CSS Selector Demo div:not(.special) { color: red; } p + span { font-weight: bold; } div:not(.special) This div is red (no class) This div is not red (has class "special") This one is also red p + span This is a paragraph. This span is bold (immediately follows the paragraph). Another paragraph. Some other element in between. This span is normal (not immediately after a paragraph). This targets divs without the special class and bolds spans after p tags. Why It’s Worth It Selectors Level 3 reduces the need for extra classes, making your CSS leaner. Explore :nth-child() or attribute selectors in the spec to level up your targeting game. CSS Color Module Level 3 Now, CSS Color Module Level 3. Finalized in 2018, this spec defines how colors work in CSS, including transparency. It’s straightforward but powerful—see the official spec for the full rundown. Key Concepts RGB and HSL: Use rgb(255, 0, 0) or hsl(0, 100%, 50%) for precise colors. Opacity: rgba() and hsla() add an alpha channel. Named Colors: Beyond basics, you get names like rebeccapurple. Try this: DOCTYPE html> button { background: rgba(0, 128, 255, 0.7); /* semi-transparent blue */ color: hsl(200, 50%, 20%); /* dark desaturated blue */ border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; } body { background: #f5f5f5; font-family: sans-serif; padding: 2rem; } Click Me Adjust the alpha or HSL values to see the effect. Why Care? This spec gives you control over colors and opacity, which are key for modern designs. It’s a stepping stone to gradients and overlays in later modules. CSS Flexible Box Layout Module Level 1 (Flexbox) On to Flexbox, or CSS Flexible

Apr 5, 2025 - 19:13
 0
The 5 CSS Specs Every Developer Should Know

Hi there! I'm Shrijith Venkatrama, founder of Hexmos. Right now, I’m building LiveAPI, a tool that makes generating API docs from your code ridiculously easy.

Let’s dive into five CSS specs that I think are essential for anyone working on the web today.

CSS has evolved a lot, and these specs cover the core skills and tools you need to style and structure modern sites efficiently.

Whether you’re adjusting colors, targeting elements, or building layouts, knowing these will make your life easier and your code cleaner.

I chose these five—CSS 2.1, Selectors Level 3, CSS Color Module Level 3, Flexbox, and Grid—because they form a solid foundation while including key modern features.

CSS 2.1 is the baseline that defines how CSS works.

Selectors Level 3 improves how you target elements.

CSS Color Module Level 3 handles color and transparency.

Flexbox and Grid are the go-to solutions for layouts, covering one- and two-dimensional needs.

Together, they give you what you need for most projects in 2025.

Let’s break them down!

CSS Level 2 Revision 1 (CSS 2.1)

Let’s start with CSS 2.1.

This spec, finalized in 2011, is the foundation of modern CSS.

It’s not the newest, but it’s critical because it sets the rules that browsers still follow. U

nderstanding it helps you make sense of everything built on top of it. The official CSS 2.1 spec covers the essentials like the box model and positioning.

Key Concepts

  • The Box Model: Every element is a box with content, padding, borders, and margins. The default box-sizing is content-box.
  • Positioning: Options like static, relative, absolute, and fixed control where elements sit.
  • Floats: A pre-Flexbox way to align elements, still useful in some cases.

Try this:




  


   class="box">Without border-box

Add box-sizing: border-box and see how the dimensions shift:




  


   class="box">With border-box