CSS
===
What is CSS
-----------
**C**ascading **S**tyle **S**heets
the *beautiful* skin atop HTML
[![Worst website](img/worst-website.png)](http://www.theworldsworstwebsiteever.com/)
[![Worse](img/nice-website.jpg)](http://www.polygon.com)
http://designm.ag/wp-content/inspiredology/2012/11/Polygon_main.jpg
CSS in the Wild
---------------
tweak css values for a website using Inspector
fire up inspector, or Ctrl+Shift+C, click on something, and see the sidebar
3 ways of defining css
----------------------
1. inline
2. `
```
### `body` to select html tags
``` html
body {
background-color: #dddddd;
}
```
### `.class` to select class
``` html
.logo {
color: #90a150
}
```
### `ul` to style lists
``` html
ul {
list-style-type: none;
}
li {
display: inline-block;
margin-left: 1em;
}
```
yucks!
### use `nav ul` selector to be more precise, or give a `class` to the nav
``` html
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
```
### float, box model, clearing
we want logo to be beside the links, use `float` to ask browser to
squeeze them on the same line
``` html
.logo {
float: left;
font-size: 3em;
}
nav ul {
float: right;
list-style-type: none;
}
```
### messed up layout
use a `clear: both` on `div.content` to clear it away
``` html
.content {
clear: both;
}
```
### margin
our links seem to be too close together, use `margin-left` to give it space
``` html
nav ul li {
display: inline-block;
margin-left: 1em;
}
```
### padding
our content looks like they are too close to the edges of the page
wrap everything in a `div.container`, set `padding-top: 3em`
``` html
.container {
padding-top: 3em;
}
```
### fonts
make impressive logo bigger using `font-size`
``` html
.logo {
color: #90a150;
float: left;
font-size: 3em;
}
```
`text-align` has no more use now that it's floated, remove it
### shorthands for `font`
``` html
nav ul {
float: right;
list-style-type: none;
font-size: 1.3em;
font: 1.3em sans-serif;
}
```
### Webfonts
[Google Web Fonts](http://www.google.com/fonts)
``` html
font-family: 'PT Sans', sans-serif;
```
### centering everything
set a `width` for `.container` or a `max-width`
``` html
.container {
margin: 0px auto;
max-width: 760px;
padding-top: 3em;
}
```
### Pseudo selectors
introducing `a:link`, `a:hover`, `a:visited`
``` html
a:link {
color: #839e24;
text-decoration: none;
border-bottom: 0.14em dotted #839e24;
}
a:hover {
color: #303030;
background: #b1d641;
border-bottom: none;
}
```
there's a lot more, such as `n-th child`, explore on your own
References
----------
[Detailed reference on all CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
[Google Web Fonts](http://www.google.com/fonts)