Awesome! Just tweeted this out for our GirlDevelopIt students, this is a great review resource.

For those of you looking for alternative ways to learn CSS (or teach it), here are our materials:

* CSS Basics/Layout: http://www.teaching-materials.org/htmlcss-1day/ (Scroll down) * CSS3: https://dl.dropboxusercontent.com/u/10998095/css3-workshop/i...

...I find that teaching the CSS3 workshop is always a great reminder of the crazy ass selectors you can use in CSS now, and I end up using them way more in the weeks after. And then forgetting again. :-)

This is awesome.

This is really neat. I've been using CSS for several years and have never stumbled upon something that uniquely educates in this manner. You'll only really grasp a true understanding of CSS like this if you sift through a lot of (dull) specification.

Also, this brings a lot of attention to the fact that CSS relies upon formal grammar and vocabulary (as the page is titled), which is something that you won't see often.

What do you mean exhibit their own idea of grammar? All programming languages are defined in terms of their formal grammar. A grammar and vocabulary is really all that they are.

Sorry, I edited my post to clarify.

>You'll only really grasp a true understanding of CSS like this if you sift through a lot of (dull) specification.

You'll likely only need this "true understanding" if you're editing said specification. Or implementing it.

Not really.

I've spent a lot of time in the past year mucking with CSS, some my own, but most of it applying to other sites via browser extensions. I'd learned most of the specific spec entities described here (though learned a few terms I'd not picked out before), some of which have proven quite useful in getting the results I want. Which often translate to "make the goddamned page readable".

And yes, I restyled the referenced page to improve readability (text to white, larger fonts, different spacing and padding).

Would you mind adding an issue about improving readability at github, or even better, making a fork and adding the improved styling? https://github.com/sakamies/css-vocabulary/issues

This is great! To anyone else delving into CSS, I also found this tutorial on CSS selectors helpful: http://flukeout.github.io/

This is a neat and simple idea. I wonder how difficult it would be to add other languages.

I think it could be possible for any context-free language, through outputting the parse tree with ranges wrapped with class="symbol-type". CSS's grammar being like this (for those not familiar with the idea): http://www.w3.org/TR/CSS21/grammar.html, and JS's being like this: http://www-archive.mozilla.org/js/language/grammar14.html. You might want to have a black/white list of foundational grammar rules to ignore.

Very neat and straight to the point. I'm writing a book about CSS, and this comes in very handy considering the vocabulary in CSS is usually misused and lacks precision, especially on Stack Overflow (including by me).

It's so hard at the beginning to google it,since you don't know the names. This is an extremely helpful tool for beginners!

This is very helpful, because even though I can produce css I sure didn't know the names of anything.

Really nice. Why did you skip the media query though?

    @media only screen and (min-width: 35em) {
        /* responsive styles */
    }

    @media print {
        /* printed styles */
    }

Page footer:

Made by @sakamies Improvements welcome at https://github.com/sakamies/css-vocabulary

Thanks for telling me, In fact I did send a pull request on the matter. (Although I don't understand the down-vote for stating a constructive criticism, what if I didn't know the vocabulary for media queries and was genuinely hoping to learn it on this site?).

I didn't down-vote.

For someone with only superficial knowledge of CSS but who regularly has to communicate with front-end devs, this is very very helpful.

A shared vocabulary is so important in any collaboration.

This is a really great visual way to learn CSS vocabulary. Love the simple and clear UX/UI. Have you thought about adding pop ups when you click on each term that explains the exact purpose of each? It could be an interesting way to expand this into a 5 minute self-taught tutorial.

This is really nice, I might fork it myself and add to it as I'd like to see some more explanation on certain parts, though it would then become something different.

I always referred to a declaration block as "rules". A single declaration is a "rule". I am not sure where I picked it up, but it is simpler.

Very neat and intuitive way to learn. I wasn't aware of the difference between "pseudo classes" and "pseudo elements" before.

Great resource.

Anyone know of something like this for Javascript or PHP?

Why do they use `::before` instead of `:before`? Is that a typo?

The double-colon notation is introduced in order to establish a discrimination between pseudo-classes and pseudo-elements.

Doesn't work with IE.

> Doesn't work with IE

That's not true. IE has supported it since IE9 at least. http://msdn.microsoft.com/en-us/library/ie/cc304078%28v=vs.8...

Pseudo-elements use two colons. A small number ("before", "after", "first-line", "first-letter") are grandfathered in as allowing either one or two, for backwards compat back to the days when there was no distinction between pseudo-elements and pseudo-classes in CSS.

well css is death so, no, thank you.

how is CSS dead? CSS is going to live on forever as the base of styling. Stylus, SASS, LESS will always compile to CSS, and their will be a "religious war" of which one to make as the base.

just because you use it, or because you like it does not mean is the right approach for styling websites. The future is canvas.

Assuming you're not simply trolling, would you care to clarify and expand your comments?

Are you referring to the HTML 5 canvas element? That's principally intended to provide native graphics capabilities for HTML, not to allow for semantic styling of textual content, as is the case (mostly) for CSS.

Otherwise, your comments here are not constructive nor do they follow the HN guidelines as I read them.

How would one create a document type page with a canvas? I'm generally curious and would love an example. I've use canvas before, but strictly for image manipulation and exploring animation.

My experience and limited knowledge of it don't lead me to believe it'll replace HTML/CSS documents anytime soon (which are really the starting point before blogs/apps).

What about resizing causing the whole canvas to be wiped away (thats a default behavior right?).

Edit: Also, how do you achieve separation of content and style?

Canvas is just a low level API for 2D graphics, on top of it you could build your own rendering engine with custom document object model, document serialization format, layout engine, styling engine, etc. This would be an enormous amount of work though, I don't believe that standard HTML/SVG/CSS/DOM are that broken that reimplementing them from scratch would become a viable option.