nunfo/dabblet.css

## dabblet.css
/ * CSS * /

/* Reseteo CSS */
* { padding:0; margin:0; border:0; }

body {
	background-color: #444;
	text-align: center;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Selector descendente. Se aplica a los elementos <span> que estén dentro de un elemento <p> */
p span { color: red; }

/* Selector de clase. Se aplica a todos los elementos cuyo atributo class = "destacado" */
.destacado { color: blue; }

/* Selector de clase con alcance restringido. Se aplica únicamente a los elementos cuyo
atributo class = "destacado" y además sena de tipo <p> */
p.destacado { color: green; }

#container {
	width: 960px;
	margin: auto;
	text-align: left;
	background-color: #fff;
	border: 10px solid #aaa;
}

#header {
	background: url(http://www.nunfo.com/pruebas/Curso%20CSS/images/title.png) no-repeat #000;
	height: 125px;
}

#header h1 {
	margin: 0px;
}

#header a span {
	visibility: hidden;
}

#header a {
	display: block;
	text-decoration: none;
}

#sidebar {
	background-color: #ccc;
	width: 200px;
	padding: 10px;
	float: left;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}

#main {
	margin-left: 220px;
	padding: 10px;
}

#footer {
	clear: both;
	background: #000;
	color: #ccc;
	text-align: center;
	padding: 5px;

}

#footer a {
	color: #fff;
	text-decoration: none;
}

pre {
	font: 13px Courier New, Courier, mono;
	background: #eee;
	border-left: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
	padding: 10px;
}


## dabblet.html
<!-- HTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- incluimos la referencia a la hoja de estilos CSS. el id lo usamos para luego hacer referencia desde javascript -->
<link rel="stylesheet" href="css/01.css" type ="text/css" id="hojaCss"/>
<title>Layout Tableless 2 columnas</title>
<script>
function cambiarCss(estilo) {
	var rutaCss;

	rutaCss = "css/layout2_" + estilo + ".css";
	document.getElementById('hojaCss').href = rutaCss;
}
</script>
</head>

<body>

<!--  Comienzo contenedor del cuerpo -->
<div id="container">

	<div id="header">
		<h1><a href="default.html" title ="Enlace a página principal"><span>CSS Sésamo #1</span></a></h1>
	</div><!-- fin header -->

	<div id="sidebar">
		<h3>Barra lateral</h3>
		<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
		<!--
		<form method="post" action="" name="estilo">
		<select name="diseño" id="diseño" onChange="cambiarCss(this.options[this.selectedIndex].value)">
			<option value="fijo">Fijo</option>
			<option value="liquido">Líquido</option>
			<option value="elastico">Elástico</option>
			<option value="hibrido">Híbrido</option>
		</select>
		</form>
		-->
	</div><!-- fin sidebar -->

	<div id="main">
		<h3 class="destacado">Contenido</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Fusce eget arcu lacus, et aliquet nisl. Aliquam ut eros id diam gravida ullamcorper.
		Morbi risus nisi, consectetur non fringilla in, tempus in diam.
		Vestibulum mattis pulvinar consectetur.
		Etiam mi augue, hendrerit quis vulputate ultricies, mollis non leo. Ut ut egestas nisi.</p>
		<p class="destacado">Praesent consequat lorem purus. Proin non neque non diam malesuada condimentum sit amet et dolor.
		Integer diam purus, mollis eget cursus eu, molestie sit amet diam. Mauris ligula purus,
		vehicula vel blandit eu, facilisis id quam. Aliquam dignissim lectus sed velit lobortis ultrices.</p>
		<p>Ut scelerisque dictum mi ut mollis. Integer hendrerit diam eget ligula vulputate commodo.
		Nullam neque magna, lobortis sit amet convallis quis, elementum a lacus.
		Suspendisse nec dui vel purus malesuada consequat. Aliquam lacinia varius condimentum.
		Nullam venenatis felis quis lectus dictum sollicitudin. Pellentesque sodales suscipit rutrum.
		Integer commodo interdum est eu tincidunt.</p>
		<pre>Nullam blandit imperdiet mauris at rhoncus.
Suspendisse orci metus, sodales ac pretium eget,
faucibus at sem. Nam quis gravida turpis.
Nulla facilisi. Donec bibendum, dolor id
vestibulum imperdiet, tellus eros egestas mi,
non scelerisque ante orci eget urna.
Vivamus nec erat metus. Vestibulum nec auctor est.
Vivamus a enim ipsum, at rutrum nunc.
<span>Aliquam at tellus odio, sed tempor lacus.</span>
Curabitur dapibus justo ac orci cursus vulputate.
Nullam hendrerit, lorem et dapibus vulputate,
leo orci varius sem, a mollis nibh quam sit amet purus.
Sed tincidunt mi id est cursus sodales. Morbi ipsum nunc,
condimentum eget sagittis ac, volutpat vitae massa.</pre>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span>Pellentesque mattis condimentum sem vitae aliquet. </span> Mauris ante tortor, accumsan sed pulvinar ac, luctus nec eros. In laoreet ligula vitae velit ullamcorper pretium. Curabitur neque purus, sollicitudin sit amet lacinia vitae, placerat congue velit. Nulla porta orci sit amet ipsum imperdiet at dignissim nibh cursus. Quisque urna ante, pretium sed laoreet vitae, commodo vitae leo. Aenean sed risus velit. Etiam non magna et lacus tempus placerat. Etiam ornare, ante non consectetur vestibulum, justo lacus posuere neque, vitae facilisis mi massa quis neque. Aenean nec diam dolor, vel tincidunt leo. Vestibulum aliquet diam eu mauris laoreet quis commodo odio posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div ><!-- fin main -->

	<div id="footer">
		<p>CSS Sésamo #1: Layout tableless (dos columnas)<a href="http://www.facebook.com/nunfo.es"
			title="Página en Facebook de nunfo"> nunfo </a></p>
	</div><!-- fin footer -->

</div><!--  fin container -->

</body>

</html>


## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/ * CSS * /

	/* Reseteo CSS */
	* { padding:0; margin:0; border:0; }

	body {
	background-color: #444;
	text-align: center;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	}

	/* Selector descendente. Se aplica a los elementos <span> que estén dentro de un elemento <p> */
	p span { color: red; }

	/* Selector de clase. Se aplica a todos los elementos cuyo atributo class = "destacado" */
	.destacado { color: blue; }

	/* Selector de clase con alcance restringido. Se aplica únicamente a los elementos cuyo
	atributo class = "destacado" y además sena de tipo <p> */
	p.destacado { color: green; }

	#container {
	width: 960px;
	margin: auto;
	text-align: left;
	background-color: #fff;
	border: 10px solid #aaa;
	}

	#header {
	background: url(http://www.nunfo.com/pruebas/Curso%20CSS/images/title.png) no-repeat #000;
	height: 125px;
	}

	#header h1 {
	margin: 0px;
	}

	#header a span {
	visibility: hidden;
	}

	#header a {
	display: block;
	text-decoration: none;
	}

	#sidebar {
	background-color: #ccc;
	width: 200px;
	padding: 10px;
	float: left;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	}

	#main {
	margin-left: 220px;
	padding: 10px;
	}

	#footer {
	clear: both;
	background: #000;
	color: #ccc;
	text-align: center;
	padding: 5px;

	}

	#footer a {
	color: #fff;
	text-decoration: none;
	}

	pre {
	font: 13px Courier New, Courier, mono;
	background: #eee;
	border-left: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
	padding: 10px;
	}
	<!-- HTML -->
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<!-- incluimos la referencia a la hoja de estilos CSS. el id lo usamos para luego hacer referencia desde javascript -->
	<link rel="stylesheet" href="css/01.css" type ="text/css" id="hojaCss"/>
	<title>Layout Tableless 2 columnas</title>
	<script>
	function cambiarCss(estilo) {
	var rutaCss;

	rutaCss = "css/layout2_" + estilo + ".css";
	document.getElementById('hojaCss').href = rutaCss;
	}
	</script>
	</head>

	<body>

	<!-- Comienzo contenedor del cuerpo -->
	<div id="container">

	<div id="header">
	<h1><a href="default.html" title ="Enlace a página principal"><span>CSS Sésamo #1</span></a></h1>
	</div><!-- fin header -->

	<div id="sidebar">
	<h3>Barra lateral</h3>
	<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
	<!--
	<form method="post" action="" name="estilo">
	<select name="diseño" id="diseño" onChange="cambiarCss(this.options[this.selectedIndex].value)">
	<option value="fijo">Fijo</option>
	<option value="liquido">Líquido</option>
	<option value="elastico">Elástico</option>
	<option value="hibrido">Híbrido</option>
	</select>
	</form>
	-->
	</div><!-- fin sidebar -->

	<div id="main">
	<h3 class="destacado">Contenido</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Fusce eget arcu lacus, et aliquet nisl. Aliquam ut eros id diam gravida ullamcorper.
	Morbi risus nisi, consectetur non fringilla in, tempus in diam.
	Vestibulum mattis pulvinar consectetur.
	Etiam mi augue, hendrerit quis vulputate ultricies, mollis non leo. Ut ut egestas nisi.</p>
	<p class="destacado">Praesent consequat lorem purus. Proin non neque non diam malesuada condimentum sit amet et dolor.
	Integer diam purus, mollis eget cursus eu, molestie sit amet diam. Mauris ligula purus,
	vehicula vel blandit eu, facilisis id quam. Aliquam dignissim lectus sed velit lobortis ultrices.</p>
	<p>Ut scelerisque dictum mi ut mollis. Integer hendrerit diam eget ligula vulputate commodo.
	Nullam neque magna, lobortis sit amet convallis quis, elementum a lacus.
	Suspendisse nec dui vel purus malesuada consequat. Aliquam lacinia varius condimentum.
	Nullam venenatis felis quis lectus dictum sollicitudin. Pellentesque sodales suscipit rutrum.
	Integer commodo interdum est eu tincidunt.</p>
	<pre>Nullam blandit imperdiet mauris at rhoncus.
	Suspendisse orci metus, sodales ac pretium eget,
	faucibus at sem. Nam quis gravida turpis.
	Nulla facilisi. Donec bibendum, dolor id
	vestibulum imperdiet, tellus eros egestas mi,
	non scelerisque ante orci eget urna.
	Vivamus nec erat metus. Vestibulum nec auctor est.
	Vivamus a enim ipsum, at rutrum nunc.
	<span>Aliquam at tellus odio, sed tempor lacus.</span>
	Curabitur dapibus justo ac orci cursus vulputate.
	Nullam hendrerit, lorem et dapibus vulputate,
	leo orci varius sem, a mollis nibh quam sit amet purus.
	Sed tincidunt mi id est cursus sodales. Morbi ipsum nunc,
	condimentum eget sagittis ac, volutpat vitae massa.</pre>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span>Pellentesque mattis condimentum sem vitae aliquet. </span> Mauris ante tortor, accumsan sed pulvinar ac, luctus nec eros. In laoreet ligula vitae velit ullamcorper pretium. Curabitur neque purus, sollicitudin sit amet lacinia vitae, placerat congue velit. Nulla porta orci sit amet ipsum imperdiet at dignissim nibh cursus. Quisque urna ante, pretium sed laoreet vitae, commodo vitae leo. Aenean sed risus velit. Etiam non magna et lacus tempus placerat. Etiam ornare, ante non consectetur vestibulum, justo lacus posuere neque, vitae facilisis mi massa quis neque. Aenean nec diam dolor, vel tincidunt leo. Vestibulum aliquet diam eu mauris laoreet quis commodo odio posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div ><!-- fin main -->

	<div id="footer">
	<p>CSS Sésamo #1: Layout tableless (dos columnas)<a href="http://www.facebook.com/nunfo.es"
	title="Página en Facebook de nunfo"> nunfo </a></p>
	</div><!-- fin footer -->

	</div><!-- fin container -->

	</body>

	</html>