Applying styles to every paragraph or every image on your webpage is pretty straight-forward. Elements like these are not complicated. A <p> tag usually contains a flow of text, and maybe the occasional <span>. An <img> tag contains an image, and nothing more. But when we turn our CSS toward more complex elements, like lists and tables, a bit more planning is needed.

Ordered and unordered lists contain multiple list items, and perhaps more lists nested within them. And tables usually have multiple rows, table cells, and table headers. Getting the effect you want, or even knowing what’s possible, can be difficult because of there are so many potential options.

In this lesson, we aim to demystify some useful CSS approaches for these two tricky element categories. We need to not only know which properties should be utilized to achieve beneficial effects, but also as important, which tags they should be applied to.