CSS Cheatsheet

In this blog, I would like to cover some basics of CSS. CSS helps us in abstracting styles (presentation) from markup and business logic. 
Selectors
  • #id - word following the # is the id of the element to which css can be applied.
  • .class - word following the . is the class.
  • h1 - to style all DOM elements of specific type h1, h2 etc.
  • header h1 - descendant selector. This will style all h1 elements that exist anywhere inside the header element. This is different from child selector which only applies to children.
  • nav > ul > li - child selector. Child selector locates element that are directly beneath them. In this case, this style will be applied to all li elements that are children ul that are children of nav elements.
  • input[someAttr] - attribute selector. Selects all inputs which have the attribute someAttr
    • input[someAttr=true] - selects all inputs which have the attribute someAttr = true
    • input[someAttr*="abc"] - selects all inputs whose attribute someAttr contains 'abc' in its value
    • input[someAttr^="abc"] - selects all inputs whose someAttr attribute has value starting with 'abc'
    • input[someAttr$="abc"] - selects all inputs whose someAttr attribute has value ending with 'abc'
    • input[someAttr~="abc"] - selects all inputs whose someAttr attribute has whole word abc in it. This is specially used in cases where your attribute value is made up of several values separated by space. For ex <input someAttr="xyz abc cde"/>
Let's take a look at some examples of adding effects via styles - shadow, transform, transitions and animations. Here's the jsfiddle -


If you take a look at the code, for 2d transforms, we are just using the transform property to rotate the image by various angles. For 3d transforms, we use perspective and rotateY. For animation, we first define a class in which we specify the keyframe name, the duration of animation and its iteration. Then we define the actual keyframe. In a keyframe, we define the whole path of animation by using from, to, 25%, 50% etc as progress. We also have to add vendor specific implementation for this to work on all browsers.