Creativitat Web = Inici - Bàsics - CSS - PHP/Scripts - Usabilitat

<h1>Heading 1</h1>

<h3>Heading 3</h3>

<p>Paràgraf</p>

<a href="#" >enllaç1</a>
<a href="#" >enllaç2</a>

<h3>Heading 3</h3>

<p>Paràgraf</p>

<p>Paràgraf</p>

<h2>Heading 2</h2>

<p>Paràgraf</p>

<a href="#" >enllaç</a>

<h2>Heading 2</h2>

<p>Paràgraf</p>

<p>Paràgraf</p>

<h4>Heading 4</h4>

<p>Paràgraf</p>

<a href="#" >enllaç</a>

<h4>Heading 4</h4>

<p>Paràgraf</p>

<p>Paràgraf</p>

Codi HTML i CSS

  <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>presentació CSS centrada de tres columnes (strambotica)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" xml:space="preserve">
/*<![CDATA[*/
 body {   text-align:center; }
#marc { min-width:500px;  width:750px; 	margin:20px auto;}
#cap { min-width:500px;  width:750px; 	margin:20px auto; background-color:#ffff66;
border-bottom:1px solid #000; border-top:1px solid #000;}
 #columna1 {width:29%; text-align:left;  float:left; margin-right:5px;  padding-right:5px;
  padding-left:5px; background-color:#ffd; font-family:sans-serif; font-size:14px;}
  #columna2 {width:44%; text-align:left;  float:left; margin-right:5px;
    letter-spacing:1px; line-height:140%;
  background-color:#fff;  padding-left:5px; font-family:sans-serif;}
   #columna3 {width:22%; text-align:left; float:left;  padding-left:5px;
    background-color:#ccf6f6; min-width:150px; font-family:sans-serif;  font-size:14px;
 clear:both;}

  a {font-weight:bold; text-decoration:none; color:blue; }
#c2 a {font-weight:bold; color:darkred;}
#c2 a:hover {font-weight:bold; color:blue;}

/*]]>*/
</style>
</head>
<body>

  <div id="cap"><h1>Heading 1</h1></div>
  
<div id="marc">

 <div id="columna1">
<h3>Heading 3</h3>
 <p>Paràgraf</p>
     <a href="#" >enllaç1</a><br />
     <a href="#" >enllaç2</a><br />
 <h3>Heading 3</h3>
 <p>Paràgraf</p>
 <p>Paràgraf</p>
 </div>
 
 <div id="columna2">
<h2>Heading 2</h2>
<p>Paràgraf</p>
 <a href="#" >enllaç</a><br />
<h2>Heading 2</h2>
 <p>Paràgraf</p>
  <p>Paràgraf</p>
 </div>

 <div id="columna3">
<h4>Heading 4</h4>
 <p>Paràgraf</p>
     <a href="#" >enllaç2</a>
   <h4>Heading 4</h4>
 <p>Paràgraf</p>
 <p>Paràgraf</p>
</div>


 </div>



</body>
</html>