Screenshot on iPhone

As stated in the initial post for the css vocabulary dingus: Here’s a little tool to help learn css. It has some sample css on the left and css terms on the right. Clicking on a thing in either panel highlights the corresponging items in the other panel. Click the image or the link above to try it out.

I'm doing my thesis work for OAMK on Gridlover (Ah, I love any opporotunity to plug my pet project) and need to explain css on a very basic level, so I thought it would be appropriate to finally polish the css vocabulary thingy a bit. It's now mobile friendly too. Missing media queries for now though.

Should be useful as reference material to go along with a css tutorial, or even for seasoned professionals to check up on the correct terminology. There's so much terminology in html and css that often we refer to them with inaccurate terms and the conversation may get confusing if on opposite sides of a discussion we mean a bit different things with the same words.

The w3c specifications are a bit thick and not very good for memorizing simple things, or for quick reference. So I've tried to digest the specs and make the vocabulary an easy reference and as factually accurate as possibble. Feedback and improvements via pull requests would be nice, the whole thing is up on github.

Lexologist needed

Is that even a word? I’d love to get some guru-level help to get some kind of file import working so you could play with the vocabulary on your own css. I have a function already that uses the browser provided css objects. It generates markup down to the level of selectors, properties and values, but it only gets the browser parsed declarations, so any vendor prefixes and shorthands are lost.

Specifications