Some CSS comics

Hello! I’ve been writing some comics about CSS this past week, and I thought as an experiment I’d post them to my blog instead of only putting them on Twitter.

I’m going to ramble about CSS at the beginning a bit but you can skip to the end if you just want to read the comics :)

why write about CSS?

I’ve been writing a tiny bit more CSS recently, and I’ve decided to actually take some time to learn CSS instead of just flailing around and deciding “oh no, this is impossible”.

CSS feels a little like systems programming / Linux to me – there are a lot of counterintuitive facts that you need to learn to be effective with it, but I think once you learn those facts it gets a lot easier.

So I’m writing down some facts that I found counterintuitive when learning CSS, like the fact that position: absolute isn’t absolute!

why try to read the specs?

I’ve been having a lot of fun reading through the CSS2 spec and finding out that some things about CSS that I was intimidated by (like selector specificity) aren’t as complicated as I thought.

I think reading (parts of) the CSS specs is fun because I’m so used to learning CSS by reading a lot of websites which sometimes have conflicting information. (MDN is an incredible resource but I don’t think it’s 100% always correct either.)

So it’s fun to read a more authoritative source! Of course, it’s not always true that the CSS specs correspond to reality – browser implementations of the specs are inconsistent.

But expecially for parts of CSS that are older & better-established (like the basics of how position: absolute works) I like reading the specs.

how are the CSS specs organized?

CSS used to be defined by a single specification (CSS2), but as of CSS 3 each part of CSS has its own specification. For example, there’s a CSS 3 specification for colours.

Here are the links I’ve been using:

there’s a PDF of the CSS2 spec here
CSS Snapshot 2018 lists all the CSS specifications as of 2018, which is where I’ve been looking for links to the CSS 3 specifications
Understanding the CSS Specifications is an explanation of how to approach reading the CSS specs. For example, it recommends reading CSS sizing which I haven’t tried reading yet.

I’ve been kind of alternating between the CSS 2 spec and the CSS 3 specs – because the CSS 2 spec is smaller, I find it easier to digest and understand the big picture of how things are supposed to work without getting lost in a lot of details.