By the time I started creating web pages, CSS had been invented, but browser support was in its infancy. So I started styling in HTML at the same time as I was learning my HTML, approaching both largely with a suck-it-and-see attitude.
Want to bold my text? Umm... <B>...</B>. Well, that seems easy enough. Italics? <I>...</I>. Check. Make my text red? Ah that's slightly trickier. I need to use <font> with a color attribute, but OK, not too bad, and Ooh, there's a couple of other cute things I can do with that tag too.
Then browser support starts to improve, and I'm told that I should be using CSS instead. Initial reaction was resentment. Give up these nice simple tags for some new, strange syntax? But I've got to do it, apparently.
OK. So let's see. We've got a style attribute, and we can put it on any element. OK. So.. style="color:red". Maybe that's not so bad. What about a light grey background colour? Let's try style="color:red background-color:lightgrey"... Huh, well that didn't work, the text's not even red anymore. Ah, it needs a semicolon. Try style="color:red; background-color:lightgrey"... Yes that's got it. But the background's a bit tight to the text. Need to expand out the background a bit. Ah padding! Yes, that looks better.
And so it goes on. Practically everyone learns CSS more or less this way. We learn more and more properties and how they interact and conflict, we learn about CSS rule sets, selectors, the cascade, inheritance, and gain a fuller grasp of the box model. And these are all learnt from cookbooks and, these days, how-to-do-X questions and answers from venues like Stack Overflow.
Eventually though, I started to get frustrated. Some things I just couldn't get to work the way I expected them to, and the cookbooks didn't help. Many CSS devs hit this when they get to vertical alignment, and so did I, but there are other curiousities too. So I started reading the CSS specification. After several goes the words began to make sense, and I realised that I had missed out on learning practically all the CSS concepts that underpin the properties.
To explain what I mean, here's ten questions about CSS concepts, rather than how-to-do-X. The answers can all be found in the CSS 2.x specification which is now more than two decades old and has excellent browser support. Given its age, there really should be no reason for anyone who works regularly with CSS not to know the answers. So, how many can you answer?
- How big is the canvas?
- What is the subject of a selector?
- What is !important's place in the cascade?
- What are the location and dimensions of the initial containing block?
- What vertical alignment does the strut have?
- When does clear:left cause clearance to occur, and how does that affect margins?
- When the width of an non-replaced block-level element in normal flow is over-constrained and does not total exactly 100% of its containing block's width, which property's used value differs from its computed value?
- When does an anonymous table-row object get generated?
- When does a single element establish both a block formatting context and an inline formatting context at the same time?
- What is an inline element's aligned subtree?
Top comments (0)