Although I've made slight modifications, the style sheet was developed by Eric Meyer in the dawn of the use of CSS in HTML writing. Earlier the HTML code often covered the look of the page as well as its content. In the early days, we usually had to develop two styles, one for all but Microsoft Windows and a special one for Microsoft Windows.

I've increased the size of the font mainly to make it visible on small mobile screens which didn't even exist when Eric developed the style sheet for this. I've also used an image from my collection instead of Eric's original.

Although he may have never stated it exactly in these words.Eric's motto was "Push the boundaries and make it work." Note that some of these element definitions are unneeded today. Although this style sheet by Eric could be used for much more HTML content than I have presented, I have included it for an example of difficulties faced before CSS was mature.

Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

/*Borrowed from Eric Meyer*/

div#links {position: absolute; top: 20px; left: 200px; width: 80%; height: 600px; font: 40px Ariel, sans-serif; z-index: 100;}

div#links a {display: block; text-align: center; font: bold 1em sans-serif; padding: 0px 10px; margin: 0 0 1px; border-width: 0; text-decoration: none; color: black; background: beige; border: none;}

div#links a:hover {color: black; background: beige; border: none;}

div#links a span {display: none;}

div#links a:hover span {display: block; position: absolute; top: 180px; left: 40px; width: 240px; padding: 5px; margin: 40px; z-index: 100; color: black; background: #33CCFF; font: 22px Ariel, sans-serif; text-align: left;}

div#content {position: absolute; top: 110px; left: 161px; right: 25px; color: #BAA; background: #22232F; font: 28px Verdana, sans-serif; padding: 10px; border: solid 5px #444;}

div#content p {margin: 0 1em 1em;}

div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #333; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}

dt {font-weight: bold;}

dd {margin-bottom: 0.66em;}

div#content a:link {color: white;}

div#content a:visited {color: #BBC;}

div#content a:link:hover {color: #FF0;}

div#content a:visited:hover {color: #CC0;}

code, pre {color: #EDC; font: 110% monospace;} -->

</style>

</head>

<body>

<div id="links">

<a href= "index.html" title= "">Index<span><img src= "jfa.ico" width= "35px"><br>

Since this link is in the defined Links area, it can also have an image and a message.

</a><a href="http://www.meyerweb.com/eric/css/">Link<span><img src= "Caspar.jpg" width= "350px"><br>

Description: Caspar, the friendly goat</b><br> This could include only an image or only text.</span></a> </div>

<div id= "content">

<p>Although I've made slight modifications, the style sheet was developed by Eric Meyer in the dawn of the use of CSS in HTML writing. Earlier the HTML code often covered the look of the page as well as its content. In the early days, we usually had to develop two styles, one for all but Microsoft Windows and a special one for Microsoft Windows.

<p>I've increased the size of the font mainly to make it visible on small mobile screens which didn't even exist when Eric developed the style sheet for this. I've also used an image from my collection instead of Eric's original.

<p>Although he may have never stated it exactly in these words.Eric's motto was "Push the boundaries and make it work." Note that today many of these element definitions are unneeded; for example, we have a CSS element for "Content" and can manipulate it just as we do "Body." This style sheet by Eric could be used for much more HTML content than I have presented here.

</div>

</body>

</html>