Minified CSS means exactly the same
#ffffff became #fff, 0px became 0, four margin values became three (the left copies the right), and the comment and whitespace are gone. The computed styles are identical.
Build tools transform the CSS you write into the CSS browsers download: Sass adds variables, mixins and nesting before the browser sees it, PostCSS runs plugins such as Autoprefixer, Tailwind generates utility classes from your markup, and minifiers make the final file as small as possible.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Rewrite this Sass with native CSS only: $gap: 16px; .grid { gap: $gap; .item { padding: $gap / 2; } }.
Minify this by hand without changing its meaning: .box { margin: 0px 0px 0px 0px; color: #ff0000; /* red */ }.
Explain it without notes
What is a CSS preprocessor? Compare Sass variables with CSS custom properties.
What is PostCSS, and how is it different from Sass?
What does Autoprefixer do, and how does it decide what to add?
How does Tailwind keep its CSS small, and what is the main pitfall of that approach?
What happens to CSS between your editor and the browser in a typical production build?
Preview
Console
Nothing logged yet.Expected console output
color same
background-color same
padding same
margin same