Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Cassandra Godwin
Cassandra Godwin
3,581 Points

Flattening in CSS

Hello! I'm reading through the about normalize.css document and I'm confused as to some of the terminology used.

"Resets impose a homogenous visual style by flattening the default styles for almost all elements."

In this case, what does "flattening" the code mean? I'm just curious as to what the style sheet actually does in this process. Thanks!

1 Answer

Jordan Kaiser
Jordan Kaiser
5,438 Points

A CSS reset "flattens" by adjusting the default styling so that all elements are as similar as possible. For example an H1 will look exactly the same as an H2. It resets (flattens) the base styling of everything.

Normalize.css is different in that it only resets/adjusts styles in an opinionated manner. So some of the base styling of CSS is kept and some is adjusted. For example an H1 will be a larger font size then an H2.

Here is a codpen that demonstrates the difference between Normalize.css and a standard CSS Reset. Normalize is on the left.

https://codepen.io/nategreen/pen/MwxRvP?editors=110