<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
     <head>
             <title>styl wewnetrzny body</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!- styl wewnetrzny -->
             <style type="text/css">
/* zerowanie wszystkich marginesów i przestrzeni*/
* {
margin: 0px;
padding: 0px;
}
/* definicja div*/
/* overflow: hidden --> ukrycie nadmiarowości czyli gdy elementy div są za duże*/
div {
overflow: hidden;
}
/* definicja ramki-główny element*/
/* margin-right: auto;-wartość domyślna */
#ramka {
	background-color: #C93;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

/* definicja nagłówka*/
#naglowek {
	width: 100%;
	background-color: #ffff33;
	text-align: center;
	font-size: 1cm;
	margin-right: auto;
}

/* definicja stopki*/
#stopka {
	width: 100%;
	background-color: #666666;
	text-align: center;
	margin-right: auto;
}

/* definicja klasy kolumny */
.kolumny {
width:30%;
margin-top:10px;
margin-right:2%;
margin-bottom:2%;
margin-left:10px;
}

/* definicje trzech kolumn */
/* float :left; to aby elementy były obok siebie */
#kolumna_pierwsza {
float:left;
background-color: #99FF33;
text-align: center;
margin-right: auto;
}

#kolumna_druga {
float:left;
background-color: #6699CC;
margin-right: auto;
}

#kolumna_trzecia {
background-color: #993333;
float:left;
text-align: center;
margin-right: auto;
}
             </style>
     </head>
             <body>
<div id="ramka">
<div id="naglowek"><font color="lime"> Oliwier Kuśmierczyk, 1P </font></div>
<div class="kolumny" id="kolumna_pierwsza">
     <ol>
	     <li> w oparciu o tabele (HTML > nie stosowane)</li>
	     <li> w oparciu o iframe (HTML > nie stosowane)</li>
	     <li> na DIVach                                </li>
	     <li> w oparciu o instrukcje HTML5             </li>
     </ol>
</div>
<div class="kolumny" id="kolumna_druga">
     <ol>
	     <li>overflow: hidden; - treść niemieszcząca się jest ukrywana		        </li></br>
	     <li>float:left; - interesujący nas element HTML stanie się pływającym       </li></br>
	     <li>margin-top:10px; - rozmiar górnego zewnętrznego marginesu, 10 pikseli   </li></br>
	     <li>margin-right:2%; - rozmiar prawego zewnętrznego marginesu, 2%           </li></br>
	     <li>margin-bottom:2%; - rozmiar dolnego zewnętrznego marginesu, 2%          </li></br>
	     <li>margin-left:10px; - rozmiar lewego zewnętrznego marginesu, 10 pikseli   </li></br>
     </ol>
</div>
<div class="kolumny" id="kolumna_trzecia">
     <ol>
	     <li>SECTION	</li>
	     <li>ARTICLE	</li>
	     <li>ASIDE	</li>
	     <li>HEADER	</li>
	     <li>FOOTER	</li>
	     <li>NAV		</li>
     </ol>
</div>
<div id="stopka">
     <ol>
	     <li> w oparciu o tabele (HTML > nie stosowane)</li>
	     <li> w oparciu o iframe (HTML > nie stosowane)</li>
	     <li> na DIVach                                </li>
	     <li> w oparciu o instrukcje HTML5             </li>
     </ol>

</br>
</br>
<a href="index.html">Powrót</a>
</div>
<div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hostinga.htw.pl/prv_hosting_footer.js"></script><div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hostinga.htw.pl/prv_hosting_footer.js"></script></body>
</html>