CSS terms poster

19 October 2011

I created a handy cheatsheet poster for CSS terms so you don't embarrass yourself again when you speak about CSS.

Also, check out this Samuel L. Lipsum placholder text generator!

Created from this post by Tab Atkins and this post by Louis Lazaris.

Update 20 october 2011:
Ben Ward pointed out that the pseudo-element example needed a double colon (::before) instead of a single colon (:before) to be valid CSS3.

In the W3C CSS2.1 specification the syntax of pseudo elements and pseudo classes are the same, both starts with a colon (:) followed by the name of the pseudo. In the W3C CSS3 specification the syntax of pseudo elements was changed, a pseudo element starts with two colons (::) followed by the name of the pseudo.

Yeah... about that... Our big friend, the internet explorer, doesn't like you for that. Since they are a little slow IE only support the single colon version (:before).

To be CSS3 valid ánd backwards compatible with IE you should declare both :before ánd ::before. But unfortunately the browsers ignores a complete ruleset if it encounters an unknown pseudo element. Therefore you can't just add them both in a sequence (a:before, a::before), but you need to declare them both as seperate rulesets.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!


Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!