Tuesday, 3 May 2011

CSS shorthand

There's all sorts of CSS shorthand available online and I get confused easily. This is what is meant by the differing formats of CSS shorthand:

  • .someClass { padding: [top], [right], [bottom], [left] }
  • .someClass { padding: [top], [right & left], [bottom] }
  • .someClass { padding: [top & bottom], [right & left] }
  • .someClass { padding: [top, right, bottom & left] }

So we can have 1, 2, 3 or 4 entries after the property, this is represented in the list above by square brackets, these can be whatever your chosen values are (e.g. px, em, % etc.)