Ejemplo de div y span

<html>

<style>

.caja-roja{border:2px solid #f00;width:200px;height:200px;} .espacio{width:200px;height:10px;} .espacio2{width:200px;height:25px;} .caja1{border:2px solid #000;width:250px;height:150px;} .caja2-verde{border:2px solid #0f0;width:150px;height:150px;} .caja3-azul{border:2px solid #00f;width:100px;height:100px;} .redondea { border-radius: 100px;} .redondea1 { border-radius: 15px;}

</style>

  <div class="caja-roja redondea">

<div class="caja2-verde redondea">

</div>

</div>
  </div>

<div style=“color: blue;”> <h2> Ejemplo de div y span </h2>

<p>
  Esto es un párrafo dentro de un div,
  <span style="color: red;"> y esto un span dentro de un párrafo.</span>
</p>

</div>

 H1.miclase {border-width: 1px; border: solid; text-align: center}

</style> </head> <body> <H1 class=“miclase”> Este H1 está afectado por nuestro estilo </H1> <H1> Este no está afectado por nuestro estilo </H1> </body> </html>

<html>
  <style> 
.caja-roja{border:2px solid #f00;width:200px;height:200px;}
.espacio{width:200px;height:10px;}
.espacio2{width:200px;height:25px;}
.caja1{border:2px solid #000;width:250px;height:150px;}
.caja2-verde{border:2px solid #0f0;width:150px;height:150px;}
.caja3-azul{border:2px solid #00f;width:100px;height:100px;}
.redondea { border-radius: 100px;} 
.redondea1 { border-radius: 15px;} 
  </style> 


    <div class="caja-roja redondea">

<div class="espacio2 ">
</div>

   <div class="caja2-verde redondea">

<div class="espacio2 ">
</div>

<div class="caja3-azul redondea">

</div>
  </div>
    </div>

<div class="espacio ">
</div>

<div style="color: blue;">
 <h2> Ejemplo de div y span </h2>
  <p>
    Esto es un párrafo dentro de un div,
    <span style="color: red;"> y esto un span dentro de un párrafo.</span>
  </p>
</div>
</html>

Hojas de estilo

 H1.miclase {border-width: 1px; border: solid; text-align: center}

</style> </head> <body> <H1 class=“miclase”> Este H1 está afectado por nuestro estilo </H1> <H1> Este no está afectado por nuestro estilo </H1> </body>

 #miid {border-width: 1px; border: solid; text-align: center}

</style> </head> <body> <H1 class=“miclase”> Este H1 no está afectado </H1> <H1 id=“miid”> Este H1 está afectado por el estilo </H1> <H1> Este H1 no está afectado </H1> </body>

SPAN.ver-ex { font-variant: small-caps }

</STYLE> </HEAD> <BODY>

<P><SPAN class="ver-ex">Las primeras</SPAN> palabras
de este párrafo van en versalitas.

</BODY>

 DIV.Abstracto { text-align: justify }

</STYLE> </HEAD> <BODY> <DIV class=“Abstracto”>

 <P>La gama de productos Gran Jefe es nuestra apuesta
   para el año que viene. Este informe sienta las bases
   para confrontar a Gran Jefe con los productos de la
   competencia.

 <P>Gran Jefe reemplaza a nuestra gama "Commander",
   si bien ésta seguirá de momento en catálogo.

</DIV> </BODY>

<HEAD> <TITLE>Cómo Tallar la Madera</TITLE> <STYLE type=“text/css”>

H1 { text-align: center}

</STYLE> <BODY> <H1> Cómo Tallar la Madera </H1>

<HEAD> <TITLE>Cómo Tallar la Madera</TITLE> <STYLE type=“text/css”>

H1.madera {text-align: center}

</STYLE> <BODY> <H1 class=“madera”> Cómo Tallar la Madera </H1>

<HEAD> <TITLE>Cómo Tallar la Madera</TITLE> <STYLE type=“text/css”>

DIV.parrafos {text-align: right}

</STYLE> <BODY> <DIV class=“parrafos”>

<P>...texto del primer párrafo...
<P>...texto del segundo párrafo...
<P>...texto del tercer párrafo...

</DIV>

<HEAD> <TITLE>Como Tallar la Madera</TITLE> <STYLE type=“text/css”>

BODY {text-align: center}

</STYLE> <BODY> …el cuerpo está centrado… </BODY>

 H1.miclase {border-width: 1px; border: solid; text-align: center}

</style> </head> <body> <H1 class=“miclase”> Este H1 está afectado por nuestro estilo </H1> <H1> Este no está afectado por nuestro estilo </H1> </body>

</html>