Pseudo Classes

There are some contexts or states that elements may have that are common enough that the browser provides 'implied' classes on those elements. These pseudo-classes are best illustrated by example. An a href="#" element, for instance, has a number of useful pseudo-classes depending on the state of user-interaction.

An example link to work with:

Pseudo Elements

To some extent, we can use CSS to create elements on the page that are not actually there in our HTML source.These pseudo-elements should generally be used only for styling, but can be extremely useful as a way to avoid putting extra tags on the page solely for creating visual style.

An example html tag: section

An example css rule: p { margin: 1em 0; }

How could we use these to add a < > around html code examples?

How could we use these to add a [css] label before css code examples?

How might we use pseudo elements to add a stylistic flourish to each section of this document?