Understanding CSS

To understand how CSS works, you can imagine that there is an invisible box around every HTML element. CSS allows you to create rules that control the way that each individual box, and the content of that box, is presented.

In the images below you can see an HTML page. On the left side, you see how it would have been rendered in a browser. On the right side I have added outlines to each element so that you can see how CSS will treat each element as if it lives inside its own box. The block level elements are shown with an orange border, and inline elements have a blue border.