Ezen az oldalon megtalálhatók, azon meghatározások, melyek a vizuális képeken láthatók.
Az alcímek, a képeknek megfelelően vannak sorszámozva, így könnyen kikereshető, hogy melyik képhez, melyik sorszám alatt láthatóak a meghatározások.
Erről az oldalról, a kiválasztott képhez tartozó meghatározások, átmásolhatók saját html vagy css, azaz stíluslapunkra, és nem kell a billentyűzetről begépelni.
A sorszámozott címsorok után található ikonra kattintva, visszajutunk azon vizuális képekhez, melynek leírási anyagát láthatjuk.
A meghatározásokat külön - külön sorba írtam a jobb áttekinthetőség végett. Átmásolás után maradhatnak így is, akkor is működik a program. De a helyfoglalás végett, írhatjuk folyamatosan is, mintha egy folyamatos mondatot írnánk az utasításokból.
Amit az XHTML - lapra kell beírni, az fekete színnel van kiemelve.
Amit a css, azaz stíluslapra kell beírni, az kék színnel van kiemelve.
5. kép anyaga. 
<body> <div id="container">
<h1> Weblap címsora </h1>
<h2> Témakör címsora </h2>
<p> YYYYYYY YYYYYYYYYYY YYYYYYYYYYYY YYYYYYYYYYYYYY YYYYYYYYYYYYY YYYYYYY YYYYYYYYY YYYYYYYYY
YYYYYYYYYYYYYYYYYYYY YYYYYYYYYYY YYYYYYYYYYYYY YYYYYYYYYYYYYY YYYYY YYYYYYYYYYYYY YYYYYY
YYYYYYYY YYYYYY YYYYYYYYYY YY YYYYYY
</p>
</div>
</body>
6. kép anyaga.
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #ccc;}
#container { width: 800px; margin-top: 5px; margin-left: 5px; }
7. kép anyaga.
#container { width: 800px; margin-top: 5px; margin-left: 5px; border: 4px solid blue; }
-------------------------------------------------------------------------------------------------8. kép anyaga.
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #ccc;}
#container { width: 800px; margin-top: 5px; margin-left: 5px; border: 4px solid blue; }
#container { background-color: #fc0; }
9. kép anyaga.
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #ccc;}
#container { width: 800px; margin-top: 5px; margin-left: 5px;}
#container { width: 800px; height: 600px; background: url(XX/YYYYY.jpg);}
12. kép anyaga.
<body> <div id="container">
<div id="idketto"> <h1> Weblap címsora </h1> </div>
<h2> Alcím neve </h2>
<p> YYYYYYY YYYYYYYYYYY YYYYYYYYYYYY YYYYYYYYYYYYYY YYYYYYYYYYYYY YYYYYYY YYYYYYYYY YYYYYYYYY
YYYYYYYYYYYYYYYYYYYY YYYYYYYYYYY YYYYYYYYYYYYY YYYYYYYYYYYYYY YYYYY YYYYYYYYYYYYY YYYYYY
YYYYYYYY YYYYYY YYYYYYYYYY YY YYYYYY
</p>
</div> </body> </html>
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #0f0;}
#container { width: 800px; margin-top: 5px; margin-left: 5px; border: 4px solid blue; }
#container { background-color: #fc0; }
#idketto { width: 780px; background-color: #0ff; margin: 10px; }
14. kép anyaga.
<body> <div id="container">
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #0f0;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #0f0;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #0f0;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #0f0;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #0f0;}
<div id="idketto"> <h1> Weblap címsora </h1> </div>
<p> YYYYYYY YYYYYYYYYYY YYYYYYYYYYYY YYYYYYYYYYYYYY YYYYYYYYYYYYY YYYYYYY YYYYYYYYY YYYYYYYYY
YYYYYYYYYYYYYYYYYYYY YYYYYYYYYYY YYYYYYYYYYYYY YYYYYYYYYYYYYY YYYYY YYYYYYYYYYYYY YYYYYY
YYYYYYYY YYYYYY YYYYYYYYYY YY YYYYYY
</p>
</div>
</div> </body> </html>
----------------------------
#container { width: 800px; margin-top: 5px; margin-left: 5px; border: 4px solid blue; }
#container { background-color: #fc0; }
#idketto { width: 780px; background-color: #0ff; margin: 10px; }
.classegy { width: 780px; background-color: #f0f; margin: 10px; }
15. kép anyaga.
#container { width: 800px; margin-top: 5px; margin-left: 5px; border: 4px solid blue; }
#container { background-color: #fc0; }
h1 { text-align: center; }
h2 { text-align: center; }
#idketto { width: 780px; background-color: #0ff; margin: 10px; }
.classegy { width: 780px; background-color: #f0f; margin: 10px; }
16. kép anyaga.
#container { width: 800px; margin-top: 5px; margin-left: 5px; border: 4px solid blue; }
#container { background-color: #fc0; }
h1 { text-align: center; }
h2 { text-align: center; border-bottom: 2px solid #fc0; }
#idketto { width: 780px; background-color: #0ff; margin: 10px; }
.classegy { width: 780px; background-color: #f0f; margin: 10px; }
17. kép anyaga.
#container { width: 800px; margin-top: 5px; margin-left: 5px; border: 4px solid blue; }
#container { background-color: #fc0; }
h1 { text-align: center; }
h2 { text-align: center; border-bottom: 2px solid #fc0; }
#idketto { width: 800px; height: 150px; background: url(XX/YYYY.jpg) no-repeat; }
.classegy { width: 780px; background-color: #f0f; margin: 10px; }
18. kép anyaga.
#container { width: 800px; margin-top: 5px; margin-left: 5px; }
#container { background-color: #fc0; }
h1 { text-align: center; font-size: 2em; font-style: normal; color: #fc0; }
h2 { text-align: center; border-bottom: 2px solid #fc0; }
#idketto { width: 800px; height: 150px; background: url(XX/YYYY.jpg) no-repeat; }
.classegy { width: 780px; background-color: #f0f; margin: 10px; }