Ejemplo sencillo para aprender a usar DIV y CSS

5 views

Skip to first unread message

unread,

Mar 31, 2013, 12:17:01 AM3/31/13

to VFP a PHP

Se me hizo facil comprender este ejemplo que quiero compartir con el grupo.

Ya olvidé como hacer lo de las CSS (alguna vez lo vi en la escuela) y estoy volviendo a retomar el tema.

Guarde el siguiente codigo en un block de notas con la extensión .html

Ejemplo con div.html

<html

<head

<title>Mi Primera Web Con DIVs</title>

</head>

<body>

<p>Este es mi primer DIV llamado bartolo</p>

</div>

<p>Este es mi segundo DIV llamado catalina</p>

</div>

<p>Este es mi tercer DIV llamado perico></p>

</div>

</body>

</html>

Luego guarde el siguiente codigo con el nombre estilo-a001.css

body{background-color:yellow; text-align:center}

#global {background-color:#FF9900; margin:0px auto 0px auto; padding:2px 2px 2px 2px; width:800px; border:#000 1px solid}

#bartolo {background-color:#00CC00; margin:0px 2px 0px 0px; width:80px; float:left; border:#000 1px solid; text-align:left}

#catalina {background-color:#00CCFF; margin:0px 0px 0px 0px; width:712px; float:left; border:#000 1px solid; text-align:center}

#perico {background-color:#00CCFF ; margin:2px 0px 0px 0px; width:712px; float:left; border:#000 1px solid; text-align:justify}

p {padding:10px 10px 10px 10px}

La extension .css es obligatoria a menos que use un editor como notepad++ y elija el tipo de archivo al guardar.

La explicación del ejemplo está aquí: