Essential CSS Training - Cascading & Specificity

dabblet.css

/**
 * Essential CSS Training - Cascading & Specificity
 */
html {
	font-family: sans-serif;
	font-size: 200%;
}

.blue {
	color: blue;
}
.red {
	color: red;
}
/*
#box {
	color: green;
}
.box {
	color: purple;
}*/

/*.container .box {
	color: cyan;
}
.container p {
	color: yellow;
}*/
/*
.box.red {
	color: red;
}
.container .box {
	color: blue;
}*/

dabblet.html

<div id="parent" class="parent container">
	<p id="box" class="box red blue">Hello World</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}