CSS From the Ground Up

The difference between block and inline

This feels like such a crucial foundation for understanding CSS and yet I was only vaguely aware of the difference. By default, HTML elements have a display: block, which means they take up 100% of the width of their parent element and start with a height of 0, growing to fit the content inside them.

Block elements have a width of 100% by default, while inline elements have a width proportional to their content.

Flexbox

Another display mode aside block and inline is flex. I already knew some of the basics of flexbox going into this course, but there were some intricacies that I learned which helped me understand it better.

By default, flex children will grow according to the content inside them.
The length of the longest word inside an element determines the “minimum” size that element.

Margins

Another CSS concept that I only vaguely understood before this course was margins, and their behavior in different contexts. Two specific take-aways stood out:

The two divs each have a 1em margin, but that does not mean that the space between them is 2em.
The margins collapse here, so you don’t see any space between the blue outline and the red outline.
The div with text inside has no margin, while the <p> does have margin.

Em units

In typography, one em unit is equal to the point size of a font. em units are really helpful for making your padding and margin proportional to the size of the text inside your element.

  • When setting margin and padding, 1em is equal to the font-size of the element. That means that if I set my padding to 2em and the font size is 16px, the padding will be 32px.
  • When setting font-size itself, 1em is actually equal to the font-size of the parent element. So if my parent's font size is 16px, and I set font-size: 2em, that will make my own font size 32px. Then if I set my margin to 2em, the margin will be 32px • 2= 64px.
The value of 1em is dependent on the parent’s font size.

Grid, positioning, background-blend-mode

There were a bunch of other concepts that I either knew nothing about or learned more deeply in Powell’s course. I learned about CSS grid and how it allows you to be both very specific and concise about the layout you want. I understood positioning better, while recognizing it shouldn’t be relied on all the time. I also learned a cool trick in the background-blend-mode property that allows you to add a tint to your background images:

Moody red tint added to Hopper’s Nighthawks with CSS.

CSS is itself a system that evolves over time

Just like the design of a programming language or any other standard, the people who define the CSS spec have to make certain trade-offs and consider various stakeholders in designing the language.

Some closing thoughts

One of the things I loved about taking this course was that it was a chance to investigate and understand CSS from the ground up; no complex layouts, no fancy libraries—just plain HTML and CSS. Having an understanding of the fundamentals has helped me feel much more confident working in more complex layouts with hundreds of divs and classes on a single web page, because I know it all boils down to a bunch of HTML elements with some properties on them. Powell’s course taught me both specific tips for creating great layouts, as well as a deeper understanding and appreciation for some of the foundational principles of CSS. Any behavior you notice when designing a web page, however confusing it may be, will have an explanation if you investigate closely enough. Working with CSS becomes much more enjoyable once you really understand it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store