====== CSS Notes ======
===== Style priority, override =====
The later modified the former. So custom style must be declared last.

<code>
 <link rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css" /> 
....
 <link rel="stylesheet" href="app.css">
</code>

===== Concepts =====
==== CSS Selectors ====

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
==== The element Selector ====

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):
Example

    p {
        text-align: center;
        color: red;
    }

==== The id Selector ====

The id selector uses the id attribute of an HTML element to select a specific element.

An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example
   #para1 {
    text-align: center;
    color: red;
   }

Note 	Do NOT start an ID name with a number!

==== The class Selector ====
The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

Example
   .center {
     text-align: center;
     color: red;
   }

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all <p> elements with class="center" will be center-aligned:

Example

   p.center {
    text-align: center;
    color: red;
   }

Note 	Do NOT start a class name with a number!

==== Grouping Selectors ====
If you have elements with the same style definitions, like this:
<code>
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
</code>

you can group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:
Example
<code>
h1, h2, p {
    text-align: center;
    color: red;
}
</code>
===== Order =====
  * http://www.w3schools.com/css/css_howto.asp
  * http://stackoverflow.com/questions/9198327/apply-css-style-to-a-nested-class-inside-div

<code html>
<div id="content">
  <div id="main_text">
      <h2 class="title"></h2>
  </div>
</div>

#main_text .title
{
    /*attributes*/
}
</code>

  * http://stackoverflow.com/questions/1140646/css-syntax-to-select-a-class-within-an-id

===== Box model =====
  * http://learn.shayhowe.com/html-css/opening-the-box-model/
  * http://kimbryant.net/on-bootstraps-grid-using-display-inline-block-instead-of-floats/

===== Angular =====
  * conditioned class: http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs
  *