Simple CSS Cascade Example

In-context Example of Internal CSS:

<title> Interesting Title Text Here! </title>


	font-family: Verdana, Helvetica, Arial, sans-serif;
	background-color: black;
	color: #FF33FF;
	font-size: x-large;

	color: #FFFFFF;
	font-size: xx-large;

	font-size: large;


In the above example, the CSS body tag selector changes the font, background colour, font colour and size of things in the body. However, CSS is also modifying all h1 tags on the page and all p tags on the page, so there will be some minimal cascade (dominance issues) involved.

H1 tags will have a different font colour and a larger size of text than the body, despite the fact that the body specifies another colour and size.
Because the H1 selector is more specific (and also listed later) it is more dominant regarding the colour and size.

P tags will have a smaller size of text than other text in the body, for similar reasons.

The simple, minimal cascade in this example:

Because the body selector affects the entire contents of the body tag, including h1s and ps, anything that the h1 or p CSS settings _don't_cover_ will be specified by the body tag's CSS settings.

This means, for example, that any h2 and blockquote tags would follow the CSS rules for the body tag.

However, text in the h1 tags will have the same font and background colour as the body, because the h1 CSS did not specify something different from the body tag's CSS regarding font and background colour. (This is also because the body tag is listed first inside the CSS style tags, and because the other tags h1 and p are nested within the page's body tag).
The same goes for text in the p tags -- it will be exactly the same as the body except for font size.