CSS Cheat Sheet

I find CSS fiendishly difficult whenever I come back to it I end up having to re-learn stuff. This is my cheat sheet.

Posted: Fri 25 Mar, 2016, 19:15

Every time I come back to doing CSS I have normally forgotten exactly what combination of class or id or tag is required to get the presentation I want. I have lost count of the number of times I have re-learned this CSS basics. So, belatedly, here is my cheat sheet which I plan to add to over time:

  • A class is preceded by a .
  • A ID is preceded by a #
  • p.jam means paragraph with the class jam
  • td#identified means td elements with an ID of identified


Descendent selectors <class> <tag>

.navitem a {
            color: white;
            display: inline-block;
            text-decoration: none;

This means <a> tags within anything of class navitem.

ID selectors tag.id

ul.navmenuright {
            width: 300px;
            list-style-type: none;
            float: right;

Class selectors tag.class

ul#nav {
            width: 600px;

Margins and Padding

margin: <top> <right> <bottom> <left>