trongthanh

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

.blue {
	color: blue;

trongthanh

/**
 * Float Demo
 */
html {
	font-family: sans-serif;
	font-size: 150%;
	color: #666;
}

.container {

trongthanh

/**
 * Clear Fix Demo
 */
html {
	font-family: sans-serif;
	font-size: 150%;
}

.container {
	background: #aaddaa;

trongthanh

/**
 * Box Model Demo 2
 */
/*
* {
	box-sizing: border-box;
}*/
/*html, body {
	height: 100%;
}*/

trongthanh

/**
 * Box Model Demo 1
 */

/*
What properties will affect a block element's outer size?
*/
.box1 {
	float: left;
	color: red;

trongthanh

/**
 * Color inheritance experiment
 */
html {
 	color: magenta;
 	font-size: 120%;
}
 
input, button, p, select {
 	font-size: inherit;

trongthanh

/*
 * Demo - CSS Text and Typography
 */
 
body {
	font-family: Helvetica, Arial, Open Sans, sans-serif;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
}

trongthanh

/**
 * Stacking Context Demo
 */
* { box-sizing: border-box; }
body { font-size: 20px; font-family: sans-serif; }
div {
	border: 1px dashed black;
	min-width: 10em;
	min-height: 5em;
	padding: 0.5em 1em;

trongthanh

/**
 * Position Property & Positioning Context Demo
 */
div {
	padding: 10px;
}
.main {
	width: auto;
	border: 5px solid lightgreen;	
	background-color: AliceBlue;

trongthanh

/**
 * Position Property & Positioning Context Demo
 */
div {
	padding: 10px;
	/*NOTE: box-sizing is natural (content-box)*/
}
.main {
	width: auto;
	border: 5px solid lightgreen;