When HTML was invented it was based around a Document Object Model (DOM, a means of separating out all the different elements within a web page into discrete objects, each with their own properties and values. This led logically to the introduction of style sheets, enabling a web page's content to be completely separated from its styling, and also makes HTML documents easily modifiable by languages such as JavaScript to provide dynamic user interaction.
     Because web pages use a DOM it is easy for you to style every aspect of it with CSS. For example, each heading will be within pairs of tags such as <h1> ... </h1> and a single CSS instruction can set the styling of all such occurrences within a document, changing the font used, its size, any font decoration, and so on.
     TThis lets you completely change the design of a page without altering the HTML, and some style settings can even apply dynamic effects to page elements such as changing their color and other properties when the mouse passes over them, or even create transition effects by using proprietary browser extensions.

• Div and span example

Most examples in this book require the latest version of any of Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, Opera, iOS or Android in order to work correctly. To see how the examples work use your browser's View Source feature, or download the examples file, unzip the contents and examine the files in a text editor.