CSS (cascading style sheets) are used to define rules that determine the appearance/style of elements, or sub-sets of elements.
CSS is a huge learning curve in it's own right. I'll be honest, it took me many years to get comfortable with it. There is simply not the time or space to go into the detail of it here. I really don't want to devote more than a few pages to it, so I'll provide a bunch of sample code illustrating some of the most common "tricks" or features you are likely to want. After that, I recommend finding good tutorials for CSS online, or simply doing a Google search with the key term "CSS" in it and finding a StackOverflow response that helps. At the end of the day, CSS is all about making your app look good. You can still make an app fully functional without it, it just won't look as nice. Since the focus of this book is Javascript and learning programming that does stuff, I'll give you the accompanying CSS for all the projects rather than expecting you to create your own.
3.1 - CSS Selectors
You define a CSS rule by specifying a 'selector' that indicates either a tag, an id, a class, or a combination of those that you want to apply a set of style rules to. For example:
The above sets the padding and margins between all elements to zero, sets the background color to white, sets the default font as 'Roberto' (with the others as fallbacks if the first font is unavailable), and then creates a set of variables for the main colours that I want my site to be based on. By using variables for colours, it means I can just change the value here once, and it will auto change where-ever i've used that variable name later in the CSS.
# 3.3 - CSS Basic styling
## Units
There are a lot of options available for you in specifying units for sizing and positoning. So many it can be quite confusing. I'll mention a few of the more common ones here. For a full list and explaination please visit [http://devdocs.io/css/length](http://devdocs.io/css/length).
* `px` - Pixels (be aware of the problems this can cause when using screens of different sizes)
* `%` - Percentage of the enclosing element
* `vh` - Each unit equals 1 % of the height of the viewport (window of the browser)
* `vw` - Each unit equals 1 % of the width of the viewport (window of the browser)
* `em` - Each unit equals the height of the current font size. Eg: 1.5em is equivilant to one and a half line spacing.
* `pt` - Points, the unit in which font sizes have been traditionally measured.
## Spacing and borders
The box model forms the basis of all the spacing around your text, both within and outside of any border and background area.

* `padding: top right bottom left;`
* `margin: top right bottom left;`
* `background-color: #rrggbb;`
* `border: 1px solid #000000;`
Replace the `top`, `right`, `bottom`, `left` with sizes and units. For example: