Most of the explanation for this example is in the source code.

Heading Level 4

Heading Level 6
          Finally,  
            at long last, 
              a pre (preformat) element without that horrible monospace font.
This sentence applies the Velma style class to a span of text. Here the Daphne style class is applied to different spans of text.

You can also style other inline elements. This is a default HTML mark element. This is a custom styled mark element.

This is the Shaggy style class applied to a div block.

This is the Scooby style class applied to a div block. Without a border and background color, it's not obvious that this is a block. But this div carves a block out of the page just like the one above.