When you look at the specification for display properties in the CSS specification, it's easy to get overwhelmed quickly. Luckily, there are only three types of display you need to know:

• block
• inline
• none

none is the simplest of the display types. Set an item's display type to none and it will not show on the page. It won't be rendered in any way by the browser (which can be frustrating when making elements which appear later). block and inline are essentially the CSS equivalent of a line break - an element after a block element will appear below it, whereas an element after an inline element will appear to the right of it. Using this, you can turn lists into horizontal menus and prevent paragraphs from automatically adding line breaks when they are closed.

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.