<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML CSS Example</title>
<style>
body {
width: 50%;
margin: 8px auto;
font: 1em/100% sans-serif;
color: #000;
}
.ex_01 {
line-height: 250%;
background-color: #ccc;
padding: 20px;
text-shadow: 0 1px 0 #fff;
}
.in_01 {
background-color: #999;
padding: 20px;
text-shadow: 0 1px 0 #ccc;
}
.in_02 {
background-color: #666;
padding: 20px;
text-shadow: 0 1px 0 #999;
}
</style>
</head>
<body>
<!--
1. div.ex_01>lorem20+div.in_$$*2>lorem20
2. p.ex_01>lorem20+p.in_$$*2>lorem20
-->
<div class="ex_01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, sed doloremque libero voluptas asperiores animi consequatur ducimus nam cupiditate placeat.
<div class="in_01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum at eligendi ab maxime culpa natus voluptatibus cumque praesentium a quis.</div>
<div class="in_02">Quo, fuga, similique, a ad at eum nam ullam blanditiis unde reprehenderit expedita aliquam incidunt odit quaerat accusantium distinctio libero.</div>
</div>
<p class="ex_01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur laudantium voluptatibus eaque fugit necessitatibus numquam sequi exercitationem quis error dolore?
<p class="in_01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, reiciendis saepe ipsam. Adipisci ullam illo dolore nulla atque veniam deleniti!</p>
<p class="in_02">Neque, totam, unde, ratione commodi minima quis accusantium esse eligendi magnam illum tempore perferendis quam fugit dolor blanditiis similique quo.</p>
</p>
</body>
</html>