Advanced CSS

Today, we went into CSS a little deeper.  We used this plunk.  We covered how when you write HTML, the browser styles this for you, WITHOUT any CSS.  When you are viewing a webpage and inspect an element or use F12 to view the Chrome debugger, it will tell you which elements were style by you directly, supplying the file and the line number.  It also shows you which rules were applied via the browser, the rules that are applied by your browser are referred to as "user agent stylesheet".  When you don't have a CSS rule that applies, the "user agent stylesheet" is used.  The "user agent stylesheet" is the default and anything more specific, supplied by you overrides these settings.  You can have multiple stylesheets.  If two rules collide, the LAST one that is applied wins.
I have found the best practice when setting up your rules is to first write your HTML as correctly as possible, then start applying your CSS directly to those HTML elements.  Initially instead of <p class="normal">some text</p> and it's corresponding css rule p.normal { font-size: 12px; }, try to just use <p>some text</p> and css rule p {font-size: 12px;}.  Use classes as exceptions to your normal CSS until you need more control over the element.
More specific rules win in CSS.  div#header wins over #header and div.  p.inverse wins over .inverse and p.  Keep this precedence in mind, and be ONLY AS SPECIFIC as you need to be.  This will help later.  As an example in the plunk, in the CSS I used the selector nav ul li.  This was enough to JUST target the ul (unordered list) from the navigation.  It didn't effect the ul on the bottom of the page.  We could have used classes to do this, but we didn't need to
During class, we downloaded and started using Twitter Bootstrap.  This CSS framework solves many annoying problems with browsers.  It does a reset so your pages should look the same in Chrome, Firefox, Internet Explorer, etc..  This wasn't the case before.  It also makes it easy to create pages with columns.  One of the largest benefits of Bootstrap is that if you follow their guidelines, your web page will work well on a desktop, ipad or smaller mobile device.
I put several divs on the page with twitter bootstrap classes.  These won't do anything until you download the latest version of Bootstrap and put it into your project. Make SURE you have the latest, version 3.0.2.  A couple students got version 2.3 accidentally and it didn't with our HTML.  So download it, look in the CSS directory and copy the contents of the file to bootstrap.css in your project (click "new file" on the left).  Make sure to link bootstrap.css to all of your HTML files.  Create another <link> tag, similar to the one in your index.html file.
There are a lot of things in Twitter Bootstrap.  Take a look at how I used it in the plunk.  You need to have divs nested within each other.  Start with a div like this:  <div class="container">  inside of that put a row <div class="row"> inside of that put your columns.  Each row can have 12 and only 12 columns.  You can use <div class="col-md-12"> to fill the whole page for that row, or you can split it up however you like, for example:  <div class="col-md-4"></div><div class="col-md-8"></div>.  Put your content inside the divs.  In the plunk, I put a border around the divs so it was clear what was happening.

Useful to remember:  Ctrl-F5 forces your browser reload CSS and Javascript.  Remember this when you CSS just isn't responding to what you are doing.

Ok, for homework, download Bootstrap, put it into your project and add a contact us page to the project.  Make sure your menu works to link to it and put some content on there Bootstrap style (container, row, column).  Post your plunks on the blog when you are done, OR if you have problems.  If you get stuck, post and ask what's wrong with the code.  You should have a mini website when you are done, good luck!