<div id="footer">
  <p>contact: email@example.com</p>
</div>

The css property we will be using to insert the desired additional text is the “content” property. There are a few quirks to get used to when using this property. For one, the property can only be used in a rule whose selector uses the either the “before” or “after” pseudo-selector. The content that you add using css will be placed within the targeted element, but whether the content will appear before or after the pre-existing content of the targeted element depends on which pseudo-selector you choose.
Since we want the copyright information to appear after the e-mail address, we will use the “after” pseudo-selector. Create an additional rule in your stylesheet as follows:

div#footer p:after
{
  
}

This rule will target only paragraphs within the footer, and place whatever the value of the content property is after the existing content within the paragraph. Let’s create this copyright information with the content property now:

div#footer p:after
{
  content: " - copyright 2011";
}

If you look at the page in a browser, you should see that the footer now says “contact: email@example.com – copyright 2011″. Every page on the website should now have the updated footer, and we didn’t have to lay a finger on any of the xhtml documents.
Success, right? Well let’s say that you wanted to use the copyright character entity instead of the text “copyright.” Naturally, you’d think to replace “copyright” with the © character entity. You can go ahead and try it if you’d like.
What you’d see is that the text “©” appears literally on the webpage. The next thing you might do is remember that each character entity name has an entity number value too, that can be used as a character entity reference as well. You could then look up copyright’s character entity value as 169, and try replacing © with © in that content property value.
Well, this would have worked if we were using © in the xhtml content, but unfortunately, it does not work that way in the css. In order to get these character entities to work, we have to convert the entity decimal value to hexadecimal and use css escape syntax. If you don’t understand what is meant by all that, then no worries, the process is really straightforward.
First, do an internet search for “decimal to hex converter”; there are many of these resources on the web. In fact, you can simply type in “169 decimal to hex” to the bing search engine, and the answer should be at the top of the results, without having to go into any pages.
The hexadecimal equivalent of decimal value 169 is hex value A9.
Note: to differentiate hexadecimal numbers from standard [base ten or decimal] numbers, some resources might use the “0x” notation, e.g., 0xA9 for the hexadecimal value A9.
In order to use this in the css content property value, to prevent literally displaying “A9″ we need to use the css “escape” syntax to use it as a character entity. We do this with a backslash.
Replace © (or “copyright” if you didn’t attempt to use the xhtml character entity name) with “\A9 “:

content: " - \A9  2011";

Note: there are two spaces between “\A9″ and “2011″ and that is because the space following the hexadecimal value is part of the escape syntax. The space prevents ambiguity in situations where the designer wants the character entity to appear next to the content without any space, and the first character of that content just so happens to be a hexadecimal digit (i.e. 0-9 and a-f or A-F). If we wanted “©2011″ (that is, no space between © and 2011) then we would use “\A9 2011″ instead of “\A92011″ because the browser can’t tell you don’t mean \A and 92011, or \A92 and 011, \A920 and 11, and so on.
Well, everything works, but before you leave here to try this on your own project, there are a couple important items to consider.
First, the content property and the :before and :after pseudo-selectors do not work in versions of Internet Explorer before IE8, so if this content you will generate with this css technique is pivotal to the accessibility of your site, then it may be a good idea to hold off until more users have migrated away from those earlier versions of IE.
Second, and somewhat related to the previous concern, is the idea of semantics. Css is meant to be used for presentation and style only. All content and structure is intended to be kept in xhtml. This being said, when we use the content property, it is usually to enhance the page, rather than to add essential content.
Along this same vein, you may have already noticed that you cannot drag-select the text generated with the content property, because as far as the actual document goes, that content does not actually exist– it is merely presentational elements from css, and so it most definitely will not be used in any semantic application, like use in “pagerank” for Google’s search engine, accessibility with screen readers, and so forth.
As long as you are aware of these caveats, then go ahead and find clever uses of this unique and powerful css property.

Prerequisites for this tutorial:
A moderate understanding of XHTML and CSS

In order to get started, create a new xhtml document using your favorite xhtml editor, and save it as anything you like (make sure it has either an htm or html file extension!), and copy the following code into your blank document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<style type="text/css">
body
{
  text-align: center; /* to support older IE browsers */
  font: 100% calibri, verdana, sans-serif;
  margin: 0px; /* zero out margin and padding for best browser
compatibility */
  padding: 0px;
}
div#wrapper
{
  text-align: left; /* overrides the centering in the body rule */
  margin: 0px auto; /* centers the content on the browser window */
  width: 800px;
  background-color: #cddaff;
}
div#header
{
  text-align: center;
  background-color: #b2fadb;
}
table#buttons
{
  border-spacing: 25px 0px;
  margin: 0px auto;
  padding-bottom: 10px;
}
table#buttons td
{
  border: 1px solid #769185;
  margin: 0px 20px;
  width: 200px;
  height: 50px;
}
div#footer
{
  text-align: center;
  font-size: 70%;
  background-color: #b6c9ff;	
}
div.contentPage
{
  width: 700px;
  margin: 0px auto;
  border: dashed 1px #769185;
  padding: 10px;
  font-size: 120%;
}
h2, p
{
  margin-top: 0px;
  padding: 3px;
}
</style>

</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1>Click a button to see each page</h1>
    <table id="buttons">
      <tr>
        <td>Home</td>
        <td>Contact</td>
      </tr>
    </table>
  </div> <!-- /header -->
  <div id="contentHome" class="contentPage">
  <h2>Welcome to Gary's tent shoppe</h2>
    <p>Hi, my name is Gary Gertmertin, and I love to sell tents. Ever since I was a wee lad, tents were beautiful pieces of human innovation to me. Over the years, I've slept in at least fifteen tents. Don't get me wrong, I hate camping, I just love tents.
    </p>
    <p>We sell all kinds of tents. There are doggy tents and tent mansions, complete with a swimming pool. If you want to know what types of tents we sell, then go to the contact information tab on this site, and shoot me an e-mail. We don't give out pictures, so don't bother asking.
    </p>
  </div>
  <div id="contentContact" class="contentPage">
    <h2>How to contact Gary</h2>
    <p>I refuse to use telephone technology. So don't ask for any telephone numbers.</p>
    <address>
      Gary Gertmertin<br />
      e-mail: gertymerty@example.com
    </address>
  </div>
  <div id="footer">
    <p>copyright 2011</p>
  </div>
</div>
</body>
</html>

From here on out, only add code that is bold and italicized.
Don’t worry if you don’t understand what all the CSS is doing; for this tutorial, what’s important to be aware of here is that there are multiple divisions (as coded with div elements, and in this example there are only two) that are intended to represent different sub-pages of this xhtml document, namely, a div element uniquely identified (with the id attribute) as “contentHome” and another with the id value “contentPage.”
Important: elements that you intend to control individually with javascript have to be referred to by the id attribute of the element, because unlike the class attribute, the id uniquely identifies the element and thus prevents ambiguity in the reference.
Go ahead and view the newly created page in a browser. You should see that both the home page and the contact page (the dashed line boxes in the periwinkle content area) are visible, stacked on top of each other. If there were more sub-pages, then there would be even more boxes here. There is a small bit of xhtml and css groundwork that we need to take care of before getting to the javascript. First, we’re going to prepare the “buttons.”
We want the user to be able to click on the “Home” and “Contact” “buttons” in the header section of the page to access the different sub-pages. Normally we would opt for anchor elements, but since we’re not actually leaving this page, we can just make the table data element behavior resemble anchor elements using css.
First, add the following declaration to the “table#buttons td” style rule in the embedded stylesheet:

 
table#buttons td 
{
  border: 1px solid #769185; 
  margin: 0px 20px; 
  width: 200px; 
  height: 50px; 
  cursor: pointer;
} 

Note: the “pointer” value does not work on IE4-5.5. Add “pointer: hand;” as well to accomodate those browsers.
Now, when the cursor moves over those table data elements, it becomes the hand which signifies a clickable area. We can improve this further by giving an even more pronounced visual cue. Anchor elements aren’t the only elements that the hover pseudo-selector works for. Let’s create some style for when the user hovers over a button. Type in the following style rule:

 

td:hover 
{ 
  background-color: #a1e2c6;
} 
 

You can add additional properties as you like to truly have a customized appearance. The user should now be given adequate visual cues that these table data elements are dynamic.
We’re almost ready to start writing some javascript to get the desired functionality to work. As it stands, all the sub-pages are visible onto the content pane when the webpage is accessed. We only want a sub-page to be visible if the corresponding button is clicked. Let’s use CSS to start hiding all the sub-pages by default.
To do this, add the following declaration to the “div.contentPage” style rule:

 
div.contentPage 
{ 
  width: 700px; 
  margin: 0px auto; 
  border: dashed 1px #769185; 
  padding: 10px; 
  font-size: 120%; 
  visibility: hidden; 
} 

If you refresh your page in the browser window, you’ll notice that while the sub-pages have been successfully hidden, they still take up the space in the content pane they did while they were visible. This will become especially problematic as the sub-pages become longer, or more sub-pages are added. To fix this problem, we have to separate the sub-pages from the standard document flow.
To remove an element from the document flow, we can change its position property using css. Add the following declaration to the “div.contentPage” style rule:

 
div.contentPage 
{ 
  width: 700px; 
  margin: 0px auto; 
  border: dashed 1px #769185; 
  padding: 10px; 
  font-size: 120%; 
  visibility: hidden; 
  position: absolute; 
} 

When you refresh the browser, the page should look as if it has no sub-pages. Now that these sub-pages are hidden away, we need to be able to get them back on command by clicking the buttons. This is where the javascript comes in. Are you ready?
Javascript is a fairly advanced topic, and this tutorial isn’t designed to lay down foundational knowledge for it. Rather, you should be able to learn just enough javascript to be able to integrate this functionality in your own site, and tweak it to your liking.
Add the following attribute to each opening td tag:

<td onmouseup="">Home</td>
<td onmouseup="">Contact</td>

onmouseup is an example of an event attribute. It will allow us to call javascript code when the user lets go of the left-click button on his or her mouse while the cursor is over a button. Other examples of event attributes are onclick, onmouseover, and onmouseout just to name a few. Clever use of these events will allow you to create a creative and dynamic website.
Write the following code as the value for the onmouseup attribute for the first td element:

<td onmouseup="showHide('contentHome','contentContact');">Home</td>

and the following for the second td element:

<td onmouseup="showHide('contentContact','contentHome');">Home</td>

Now, this shouldn’t really make any sense yet. Just recognize a couple facts here: showHide is the name of a function, and we are calling it here while passing in two, what are called, arguments– the strings “contentHome” and “contentContact,” which just so happen to be the names given to the buttons by their id attributes.
The showHide function works by passing in the element (by its id attibute value) you want to make un-invisible as the first argument, and whatever elements you want to hide or remain hidden are however many final arguments you want to pass, whether it’s the second argument, or third or fourth and so on. So in this case, when the user clicks the Home button, the contentHome div element becomes visible, and the contentContact becomes hidden or remains hidden, and vice versa for clicking the Contact button.
There’s only one problem though, and that is that the showHide javascript function does not exist yet. We have to write it, and that is just what we are going to do next. First, we are going to create an embedded javascript document within the head element of this page.
Scroll up to your head element where your embedded stylesheet exists. Add an opening and closing “script” tag pair somewhere directly within the scope of the head element.

 
<script type="text/javascript"> </script>

Start off by writing the following code within the script element:

function showHide()
{

}

The function keyword allows you to create a new function. We’ve named this function “showHide.” Everything between the curly brace pair will be executed when this function is called. Just assume that the parenthesis pair after “showHide” are required boilerplate code to get the function to work.
Inside of the curly braces type the following code:

function showHide() 
{ 
  var d = document; 
} 

We’ve now created a shorter name for document. Whenever we have to write “document,” we can simply write “d” instead. Each statement in javascript must be ended with a semicolon. Now, type the next line of code:

var d = document;
var args = showHide.arguments;

Like the previous line of code, we’ve assigned a shorter name for a longer sequence of characters to not only make typing more efficient, but more meaningful as well. By typing “showHide.arguments” we are accessing the list of arguments passed into the showHide function. The new variable “args” will now represent that list. We will now grab the first item from the list. Type the following line of code:

var d = document;
var args = showHide.arguments;
var idName = args[0];

We’ve successfully grabbed the first item of the list (item 0), and stored it in the variable “idName.” This is the name of the of element we wish to “show,” but not the element itself. We have to first retrieve the element, by writing the following line of code:

var d = document;
var args = showHide.arguments;
var idName = args[0];
var elementToShow = d.getElementById(idName);

We are passing our idName string into the getElementById function to grab the actual element we want to make visible, and we are storing it within the new variable we have named “elementToShow.”
Now that we have the element we’re looking for, to make it visibile, type the following code on a new line:

var d = document;
var args = showHide.arguments;
var idName = args[0];
var elementToShow = d.getElementById(idName);
elementToShow.style.visibility = 'visible';

At this point, the buttons should be able to make their respective sub-pages visible, but we have a couple problems. First, the sub-page made visibile will still be outside the document flow, which won’t work for this webpage design (the footer needs to be able to be pushed down). Second, we have no way of hiding any other sub-pages that might already be visible. Let’s address these problems now.
Type in the following code next:

var d = document;
var args = showHide.arguments;
var idName = args[0];
var elementToShow = d.getElementById(idName);
elementToShow.style.visibility = 'visible';
elementToShow.style.position = 'static';

The default css position property value is “static,” so this should now pop the sub-page back into the document flow. Excellent, the “show” part of the showHide function is now complete. It is now time for the “hide” part.
We will first start by declaring a new variable we plan to store the element we want to hide:

var d = document;
var args = showHide.arguments;
var idName = args[0];
var elementToShow = d.getElementById(idName);
elementToShow.style.visibility = 'visible';
elementToShow.style.position = 'static';

var elementToHide;

This part is a little trickier. For this specific webpage, since there are only two sub-pages, we could just do something very similar to what we did to show the elementToShow, but that would limit this function for webpages with only two sub-pages. We need to make this function more scalable, so as to allow any number of these sub-pages.
We will achieve this with a loop. For each iteration of the loop, we will hide the next argument in the list of arguments until the list is finished. To create this loop, write the following code:

var elementToHide;

for (var i = 1; i < args.length; ++i)
{

}

Without having explained the logic and syntax behind this code, the important thing to understand is that with this code, starting from the second argument, everything between those curly braces will be executed exactly as many times as there exist arguments remaining in the args list.
We will add three statements to this loop:

 
var elementToHide; 
for (var i = 1; i < args.length; ++i) 
{ 
  elementToHide = d.getElementById(args[i]);
  elementToHide.style.visibility = 'hidden';
  elementToHide.style.position = 'absolute';
} 

This should look similar to the code used to show the first argument. This time around, we are grabbing each of the remaining elements from the list, and overwriting the elementToHide variable each iteration with the next element in the list. Each element is set to be hidden again or remain hidden, and escape the document flow.
At this point, if all went well, you should be able to refresh the webpage in the browser window, and the dynamic functionality of the page should be complete.
If you want further practice, then try adding additional sub-pages, and buttons that correspond with them. The real challenge will come when you try to adapt this code to your own project. Hopefully this tutorial will have made the otherwise daunting javascript language manageable enough to create your own show/hide behavior to add to your website.