CSS
drie mogelijkheden
1 - normale html attributen hebben geen . of # voor de code nodig
2 - .naam kan door heel je pagina gebruikt worden
en wordt aangeroepen met class
3 - # ervoor wil zeggen dat deze maar één keer in je pagina gebruikt mag worden
aanroep met ID=" naam "
add 1 de reeds gegeven table
voorbeeld a (dus de link)
LINKBLOKKEN IN KLEUR
<html>
<head>
<title>Table Cell Links</title>
<style type="text/css">
a { display: block;
width: 150px;
background-color: red;
color: white; }
a:hover { background-color: blue; }
</style>
</head>
<body>
<p><a href="link.htm">LINK TEST</a></p>
<p><a href="link.htm">LINK TEST</a></p>
<p><a href="link.htm">LINK TEST</a></p>
<p><a href="link.htm">LINK TEST</a></p>
<p><a href="link.htm">LINK TEST</a></p>
</body>
</html>
add 2
<HTML>
<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<STYLE>
BODY { background : #006000}
P.main { font-family : Arial;
font-size : 12pt;
color : white}
P.info { font-family : Arial;
font-style : italic;
color : #80C000}
P SPAN { font-style : italic;
font-size : 14pt}
A { color : #C0C8FF;
font-weight : bold}
.text { color: red;
margin-left: 10px;
font-size: 28px;
font-family: Arial Black }
.highlight { margin-top: -38px;
margin-left: 8px;
color: darkred;
font-size: 28px;
font-family: Arial Black }
</STYLE>
</HEAD>
<BODY>
<P CLASS="main"><DIV CLASS="text" STYLE="{color : white; font-style : italic}">The HTML Reference Library</DIV>
<DIV CLASS="highlight" STYLE="{color : gray; font-style : italic}">The HTML Reference Library</DIV>
<P CLASS="main">is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI><DIV CLASS="text">Windows 3.x</DIV>
<DIV CLASS="highlight">Windows 3.x</DIV>
<LI><DIV CLASS="text" STYLE="{color : blue"}>Windows 95/NT</DIV>
<DIV CLASS="highlight" STYLE="{color : darkblue"}>Windows 95/NT</DIV>
</UL>
<P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF="
htmlib@htmlib.demon.co.uk <mailto:htmlib@htmlib.demon.co.uk>mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>
</BODY>
</HTML>
add 3
Controleer je CSS in NS want soms is het ietsje anders, zoals:
Netscape CSS
min-width: 600px; aangeven
#top { position: absolute; top: 0; left: 0; min-width: 600px; width: 100%; height: 100px;background-color: #e5e5e5; }
#left { position: absolute; top:100px; left: 0; width: 19%; margin: 1% 1% 0 0;background-color: #e5e5e5; }
#middle { position: absolute; top:100px; left:20%; min-width: 360px; width: 60%; margin-top: 1%;background-color: #e5e5e5; }
#right { position: absolute; top:100px; left: 80%; width: 19%; margin: 1% 0 0 1%; background-color: #e5e5e5;}
<div id="top">
top
</div>
<div id="middle">
midden
</div>
<div id="left">
left
</div>
<div id="right">
right</div>
Een ID gebruik je dus voor de hoofditems van je site.
Deze noemt men ook wel Containers.
====================
