topical media & game development
basic-css-06-Tr-It-Out-example6-3.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Albert Einstein </title>
<style type='text/css' media='all'>
* {
font-family: sans-serif;
}
p::first-letter {
font-size: 200%;
background-color: lightgray;
border: 1px solid black;
}
p::first-line {
letter-spacing: 5px;
}
/* :: before and ::after */
h1#top::before, h1#top::after {
content: "::";
}
/* Dynamic pseudo-classes */
li a {
padding: 2px;
color: black;
font-size: 15pt;
text-decoration: none;
}
li a:link {
background-color: white;
color: black;
}
li a:visited {
background-color: black;
color: white;
}
li a:active {
background-color: lightgray;
color: black;
}
li a:hover, li a:focus {
background-color: gray;
color: white;
}
ul {
list-style: none;
}
li {
border: 1px solid black;
padding: 5px;
margin: 2px;
float: left;
}
</style>
</head>
<body>
<h1 id='top'>Albert Einstein</h1>
<ul>
<li><a href='http://www.google.com'>Google</a></li>
<li><a href='http://p2p.wrox.com'>Wrox P2P</a></li>
<li><a href='http://www.mozilla.org'>Mozilla</a></li>
<li><a href='http://pear.php.net'>PEAR</a></li>
</ul>
<p>
You see, wire telegraph is a kind of a very, very long cat.
You pull his tail in New York and his head is meowing in Los
Angeles. Do you understand this? And radio operates exactly
the same way: you send signals here, they receive them there.
The only difference is that there is no cat.
</p>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
