What is CSS

Cascading Style Sheets are the presentation layer of the web page. This is where you get to make fonts look beautiful, create imaginative layouts and generally be a designer.

Its worth knowing some CSS, you don't then you are not the final designer of the web page!

Everything is a box

CSS follows a thing called the box model. Every element is a box, how you manipulate these boxes dictates how the page looks and feels.

This model is the foundation of the web page - take a look at this great video to explain a little more.

its boxes all the way down

A core idea with web design is that you need to design for the unpredictable, your design must respond to circumstances beyond your control.

You can design things with precise pixel sizes, but you don't know what device your audience will use, so its useful to also allow for things to expand and contract naturally.

letting the browsers lay out the content

Allowing the browser to decide upon some of the layout, while defining other elements helps a page adapt to different devices.

what does the box model look like

Elements can contain content, the box model defines various areas around that content.

Padding is immediately outside your content and makes up part of its width

Border is optionally around the outside of your padding and content.

Margin is spacing outside of your content and border

what does the box model look like

Selectors

To change the style of your HTML you need to select the element you want to style.

The simplest kind of selector is with the HTML tag.

Classes can be added to any HTML element as an attribute. Classes can be reused on as many elements as you want.

IDs can also be added as an attribute to HTML and are designed to be used once per page.

Next Lesson: Style with CSS