Chapter 1: Introduction and Recommendations

Introduction

This tutorial provides a basic introduction to XHTML and CSS. It is primarily geared towards beginning Web designers and should provide you with a starting point from which you can become more advanced. The goal of the tutorial will be to build, from start to finish, a complete Web page that you can then use to store reference information about XHTML and CSS.

Throughout the tutorial you'll find a number of code examples. All code examples appear in Courier font. To save time, you can copy and paste these examples into your own text editor, or you can enter them by hand.

I hope you enjoy using this tutorial. If there's anything I can do to make your learning experience more productive, please contact me at lhorton@mail.utexas.edu.

Recommendations

Use a text editor, not a WYSIWYG editor

While you're learning, use a text editor to create your pages; it's the best way to gain the skills you'll need to build great Web sites. Also, once you learn how to use a text editor, you will likely find that you can do things more efficiently than you can with a WYSIWYG editor like Dreamweaver or FrontPage. Plus, WYSIWYG editors aren't always the best at writing code. By writing it yourself, your pages are likely to be smaller, look better, and be more standards compliant.

Experiment with a few text editors to find one you're most comfortable using. If you don't know where to start, try jEdit. More than likely it has all the features you need, and it runs on both Mac and PC. Mac users may also like TextWrangler. Both programs are free. If you have Dreamweaver, it also makes a decent text editor if you choose "Code" from the "View" menu.

Dreamweaver is a great tool, but I only recommend using it in WYSIWYG mode once you know how to read and modify the source code yourself.

Test frequently using multiple browsers

You're likely have a favorite Web browser -- the one you automatically start up whenever you want to browse the Web. When you begin designing Web pages, that same Web browser is also the one you will probably find yourself using to test your pages. That's fine, but you should also make a point to view your pages in other browsers as well. Browsers are notorious for using different methods to display a page and sooner or later, you'll discover that a page that looks fine in one browser will look terrible in another, even though they're both reading the same exact code. So, do yourself a favor and test in multiple browsers as early and as often as possible throughout the design process. You will also want to make sure you test on different operating systems as well, particularly if you use a non-Windows based computer.

The following is a short list of browsers that I recommend using to test compatibility. It's by no means comprehensive, but it should give you a start.

Read source code from sites you like

If you happen to stumble upon a great looking design on the Web, take a moment to view it's source code. Particularly, when it comes to CSS, reading source code is a great way to pick up on new techniques and ideas that you can adapt to your own site. A great source of examples is csszengarden.com, which is devoted to nothing but great CSS designs.

Experiment

As you learn XHTML and CSS, it's a good idea to experiment as much as possible. Try to figure out ways to do things that you don't already know how to do. If you make a mistake, learn how to fix it.

Chapter 2: What is XHMTL?

XHTML is an abbreviation of eXtensible Hypertext Markup Language and it is derived from both XML and HTML. A primary goal of XHTML is to separate Web content from presentation. A major problem with traditional HTML is that it often includes code for both the text of the page and the apperance of the page. This problem often results in complicated source code that contains information on everything from the actual page text, to the color of the text and the background image of the page. XHTML intends to address the problems of bloated HTML source code.

The Rules: Guidelines for Using XHTML

XHTML is actually very similar to HTML. Most all of the elements are the same, and if you know HTML, it should be very easy for you to learn XHTML. If you are new to Web design, XHTML should also be fairly easy to learn because you won't need to worry about the learning the complicated HTML code needed to affect the look and feel of your pages. With XHTML, there really is less to learn because the language itself is more minimal than it's precursor, HTML.

That said, there are several differences in how XHTML documents must be written. Whenever you design XHTML pages, keep the following rules in mind:

In chapter 3, we'll discuss how to implement these rules, so don't worry if anything is unclear to you now.

Chapter 3: Getting Started

Setting up the files and folders

To get started, create a folder somewhere on your computer called "CSSLesson". It's a good idea to place the "CSSLesson" folder somewhere where it's easy to access. Within this folder, create two empty text documents using the editor of your choice: "index.html" and "style.css". Within the "CSSLesson" folder, create another folder called "images". Download the images.zip file and extract its contents to the "images" folder. Once you're done, you should be ready to get started.

Setting up index.html

Open up the empty index.html document. We're going to spend a few minutes now adding some code to this document to prepare it for the rest of the lesson.

The DOCTYPE

The first step is to add a Document Type Definition, also known as a DOCTYPE. The DOCTYPE basically tells Web browsers that you've coded the site to be compliant with Web standards. It informs the browser that you expect it to apply strict rules when it comes to displaying your pages. In return, it's your job to make sure that the code you create is truly compliant. Luckily, there are tools to help with this process, and we will discuss those a bit later.

For now, we need to chose a DOCTYPE. There are several different DOCTYPES from which you can choose (check out Fix Your Site With the Right DOCTYPE! from alistapart.com). Since we're only interested in writing standards compliant code that uses CSS, let's use the XHTML-Strict specification. XHTML-Strict expects that absolutely no presentational HTML code will be included in the document. Copy the following code and paste it into index.html (the DOCTYPE must appear before all other code).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The <html> element

Now that we have a DOCTYPE, we can start inputting actual XHTML code. XHTML uses a tag-based syntax. Elements are defined using tags that have both an opening and a closing. In some cases, you can open and close a element all at once, but most often, you will need a matched pair of tags. The first tag we will use creates the HTML element. The HTML element simply marks the beginning of the XHTML document. In this case, we are also including an attribute in the HTML tag that tells the Web browser that the document is an XHTML document. On a new line, directly under the DOCTYPE, type the following code:

<html xmlns="http://www.w3.org/1999/xhtml">

We've now opened the html element, and now we need to close it. It's good practice to include the closing tag at the same time you write the opening tag. That way, you're less likely to forget to close them later. On a new line, type the </html>. Notice the forward slash within the tag. The forward slash is used to indicate element closure. The rest of the XHTML code will go between the <html> and </html> tags. The <html> element is also known as the root element -- it is the basis for the rest of the XHTML document

The <head> element

Next, we'll create a head element. The head element is used to contain information about the XHTML document itself. Within the two <html> tags, type <head> and on a new line, </head> to close the element. We're now ready to add some information. First, we'll set the title of the page. Type <title>XHTML and CSS</title>. By enclosing the words "XHTML and CSS" between the two title tags, we've told the Web browser what to display in the title bar of the browser. Also, when users bookmark the page, this is the default text that will be used to label the bookmark.

Cascading Style Sheets

At this point, you could start adding actual content to the file. However, the <head> section can also be used to specify the Cascading Style Sheet information that will be used in the XHTML document. There are several different ways to use CSS, two of which involve the <head> section. First, we can specify CSS style information in the <head> section itself. To do that we could include something like this:

<head>
	<style type="text/css">
		p {color: #00FF00}
	</style>
</head>

In this example, we've introduced a new element: the style element. We've also used an attribute called "type" to indicate that we are using CSS to specify styles within the page. The line that begins with p between the two style tags is an example of some CSS code, and in this case, sets the color of all text enclosed in paragraph tags (<p>) to a bright green color. The benefit of this approach is that it allows you, as a designer, to easily make changes to the styles used in the page. The downfall is that you need a section like this in each page. If your manager suddenly decided that she likes bright red instead of bright green for the paragraph text on all the pages in the site, you would have to change the code in every single document. Luckily there's an alternative that's perfectly suited for sites with multiple pages that need to look the same.

<style type="text/css" title="defaultStyle" media="screen">
		@import "style.css";
</style>

Remember when you created that blank text file called "style.css"? Well, now we're finally bringing it into the fold. Here we are using the <style> element to link to a separate document that contains all of our style information (well, not yet; but it will).

The benefit of the linking approach is that you only need to maintain a single document. You can link every page in your site to the same style sheet and changes you make to the style sheet will be instantly reflected on every page. This is one of the reasons why CSS is so powerful.

It's also possible to combine both approaches listed here. This would be useful if you wanted to apply a specific style to a single page, or group of pages, without changing the CSS for the entire site. Furthermore, you can specifiy more than one external stylesheet and link to them all.

Review

One last thing: validator.w3.org is a great resource for determining if your code is standards compliant. In order for the validator to work correctly, you need one more line of code directly under the <head> tag: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />. This element basically provides the validator with information about what characters to expect in your document. Without this information, the validator won't validate your code if you input it directly, although your Web server will typically provide it. Adding it here just simplifies the validation process. This also happens to be a perfect example of opening and closing an element all at once. Instead of using a matching </meta> tag, we've simply included a "/" at the end of the element to mark it closed. We can get away with this approach here because we don't need to enclose anything in the element.

Note that the code isn't yet complete enough to validate, so don't try it just yet.

Before we move on, take a moment to make sure that your XHTML code looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
      
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML and CSS</title>
<style type="text/css" title="defaultStyle" media="screen">
	@import "style.css";
</style>
</head>
      
</html>

You can use as many blank lines as you like in your XHTML code to make it more readable; they just get ignored by the Web browser. In fact, you could just string everything together into one long line, but it would be really hard to read and edit. The point is, feel free to use as much or as little white space as you want to make it easy on yourself.

Chapter 4: The <body> element

So far, we've done a good job of creating a well-formed XHTML document. As I mentioned, though, it still won't validate. The reason is that it is not completely well-formed. All XHTML documents must contain a <body> element. The <body> element is essentially where you place all the content you want to be displayed in the Web browser. Headings, paragraphs, images, forms, tables, lists, and multimedia all go in the <body> element. So, in order to complete our XHTML document, let's begin by adding a <body> element. Add a <body> tag followed by a </body> tag between the </head> tag and the </html> tag. Your code should now look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
      
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML and CSS</title>
<style type="text/css" title="defaultStyle" media="screen">
	@import "style.css";
</style>
</head>
<body>
</body>
</html>

If you were to visit validator.w3.org right now, and enter the above source code, the code would successfully validate as XHTML-Strict. The problem is, the page is still empty, so it's really not useful for much. Let's add some content now.

Heading Elements

Over 15 years ago, when HTML and the WWW protocol were first developed, it was intended as a way to distribute scientific research documents. If you've ever published your research or even read a journal article, you will recognize the fact that research articles typically have one very prominent characteristic: they're highly structured. Early Web pages were no different; each page was typically divided into precise hierarchical segments. The heading elements formed the foundation of this structure, and they are still present in the XHTML specification of today.

Within standard XHTML there are six heading elements. By default, browsers indicate their relative importance in terms of size.

Heading Elements

An example of proper usage of the heading elements is found in the XHTML for this tutorial. <h1> is used to indicate page title, <h2> is for chapter headings, and <h3> is for sub-headings. A common mistake that Web designers make is using the heading elements to apply emphasis to what should be regular text. For example, designers might use the <h3> tag to create bold text that's a bit larger than the regular paragraph font. Try not to make this mistake yourself -- it's a complete misuse of the heading structure. Use CSS instead.

Now that we know a bit more about the heading elements, let's use one to indicate our page title. On a new line under the <body> tag, type <h1>XHTML and CSS</h1>.

Next, let's create a second level heading: <h2>XHTML</h2>.

Another second level heading will allow us to divide the page into two major sections: <h2>CSS<h2>.

Let's add two third level headings under the second level headings. Use something like this: <h3>Description</h3>.

Your source code should now look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
        
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML and CSS</title>
<style type="text/css" title="defaultStyle" media="screen">
	@import "style.css";
</style>
</head>
<body>
<h1>XHTML and CSS</h1>
<h2>XHTML</h2>
<h3>Description</h3>
<h2>CSS</h2>
<h3>Description</h3>
</body>
</html>

We've now established a basic, but very functional and standards-compliant document structure.

The paragraph tag

Our <h2> elements define two different sections of our document. One will provide a description of XHTML and the other, a description of CSS. Now, let's add a paragraph to one of those sections.

In the XHTML section under the <h3> element, add a pair of tags like this <p></p>. These two tags create a paragraph element. Within those two elements, add a brief description of XHTML, according to your current understanding.

Your code should look like this now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
      
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML and CSS</title>
<style type="text/css" title="defaultStyle" media="screen">
	@import "style.css";
</style>
</head>
<body>
<h1>XHTML and CSS</h1>
<h2>XHTML</h2>
<h3>Description</h3>
<p>XHTML results from a combination of HTML and XML...</p>
<h2>CSS</h2>
<h3>Description</h3>
</body>
</html>

Creating Links

Since we're creating a nice reference page on XHTML and CSS, it would be handy to link to some useful pages on the Web. Let's create another second level section and add some links to it. Add this to the bottom of the <body> element:

<h2>Useful Links</h2>
<p><a href="http://www.csszengarden.com">css Zen Garden</a><br />
<a href="http://validator.w3.org">W3C Validator</a></p>

This is a short list for now, but feel free to add to it as you find more resources. You'll notice two new elements in this snippet of code. The first is the anchor element, specified with the <a> tag. This element is used to create a linkage between two different Web pages, or between sections of a single page. We are using it to link to another page, and to do that, we've included an attribute called "href" (hypertext reference). Another important rule to remember about XHTML is that attribute values must be enclosed in quotation marks. In this case, the attribute values are the URL's to which we are linking.

The other element is the line break element, specified by "<br />". This element is used to create a new line without the need to create a new paragraph. The <br /> insures that the second link appears on a line of it's own. Without it, the two links would run together. This is another example of an element that opens and closes at the same time.

Let's add one last block of code: a page footer. A page footer that provides information on when the page was last updated and how to go about contacting the Web designer is always good to include. Above the "Useful Links" list, add:

<p>Contact the <a href="mailto:yourname@yourdomain.tld">Webmaster</a><br />
Page last updated: 2005-09-26 at 3:21 PM</p>

Notice that the href attribute contains a slightly different value. This time, the link is to an e-mail address: yours. Make sure you have entered your correct address following the word "mailto".

At this point, we can consider your new XHTML document to be complete. Feel free to add more content to it if you want a place to store some reference information. Go ahead and validate the document one more time to ensure that you don't have any errors. If you do, try to correct them on your own. You might also want to preview your code in a Web browser to get an idea of how it looks.

For your reference, the final XHTML code should look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML and CSS</title>
<style type="text/css" title="defaultStyle" media="screen">
	@import "style.css";
</style>
</head>
<body>
<h1>XHTML and CSS</h1>
<h2>XHTML</h2>
<h3>Description</h3>
<p>XHTML results from a combination of HTML and XML...</p>
<h2>CSS</h2>
<h3>Description</h3>
<p>Contact the <a href="mailto:yourname@yourdomain.tld">Webmaster</a><br />
    Page last updated: 2005-09-26 at 3:21 PM</p>
<h2>Useful Links</h2>
<p><a href="http://www.csszengarden.com">css Zen Garden</a><br />
<a href="http://validator.w3.org">W3C Validator</a></p>
</body>
</html>

Chapter 5: What is CSS?

CSS is used to control the appearance of HTML elements on Web pages and appeared to address the growing problem of long complicated HTML code that contained style information. CSS and XHTML are often used side-by-side due to XHTML's strength in presenting data and the power of CSS to make it presentable. We've already talked a bit about how to include CSS in your document using external or internal stylesheets.

Stylesheet Definitions

In chapter three, you were introduced to a basic CSS definition:

   p {color: #00FF00}

At this point, we'll disect the definition a bit more to give you a better idea of how CSS definitions are created. As I mentioned, this particular definition effects all paragraph elements on the page. In this instance the "p" is called a "selector". A selector is used to direct a style definition to a particular element. The part of the definition enclosed in brackets is known as the "descriptor". The descriptor describes the exact style to apply to the selector. Components of the descriptor are called "properties". Properties are defined by using the name of the property (in this case, "color") followed by a value (in this case the HTML hex color code for bright green).

Now, descriptors can be much, much more complex than this and can include multiple properties. Consider the following example:

   p{
     color:#00FF00;
     font-family:Arial;
     font-weight:bold;
     font-size:12pt;
   }

Here, the text is still bright green, but it is also displayed in bold, 12 point, Arial font. Take a look at the format for this particular definition. Like XHTML, you may include whitespace. When using multple properties, however, be careful to include a semicolon after each one.

Stylesheets can be used in a number of ways. In this tutorial, we'll use CSS to control the positioning of content on the page, the appearance of text and links, and background images and colors.

Chapter 6: Using CSS to Position Content

If you previewed your XHTML document in a browser, and I strongly recommend that you do, you'll undoubtedly notice that the page is a little plain.

Plain page

Using CSS, we'll convert this plain page into something more appealing. We won't do anything too complicated, but this example should provide you with a good introduction to using CSS and hopefully, allow you to pick up new skills as you become more advanced.

In this example, we'll divide our page into four sections: header, menu, content, and footer, like so:

Page Layout

Div elements and id attributes

The truth is, we're not quite done with our XHTML document yet. CSS makes use of another element called "div". This element is used to divide the page into different sections for purposes of display. In Dreamweaver, <div> elements are commonly called "layers", but I like to think of them more like boxes that contain sections of XHTML code. In the page layout above, each section will be contained within a <div> element.

The <div> element also takes an optional attribute called "id". The "id" attribute is used to refer to a custom CSS definition that describes the appearance of a <div> element. It's important to note that a single "id" can only be used one time in a particular XHTML document. For our example, we will create an "id" for "header", "menu", "content", and "footer". We'll also create an "id" called "wrapper" that will be used with a <div> element that will contain all other <div> elements. For now, open "style.css", and paste the following:

#wrapper{
	margin-left: auto;
	margin-right: auto;
	width: 800px;
 }
#header{
	width: 800px;
	height: 150px;
}
#menu{
	margin-top:10px;
	float:left;
	width: 200px;
}
#content{
	margin-top:10px;
	float:right;
	width: 590px;
}
#footer{ 
	width: 100%;
}

Save your changes and return to index.html. Add the necessary <div> elements to make your code look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML and CSS</title>
<style type="text/css" title="defaultStyle" media="screen">
	@import "style.css";
</style>
</head>
<body>
<div id="wrapper"> 
      
<div id="header">
<h1>XHTML and CSS</h1>
</div>
    
<div id="content">    
<h2>XHTML</h2>
<h3>Description</h3>
<p>XHTML results from a combination of HTML and XML...</p>
<h2>CSS</h2>
<h3>Description</h3>
   
<div id="footer">
<p>Contact the <a href="mailto:yourname@yourdomain.tld">Webmaster</a><br />
   Page last updated: 2005-09-26 at 3:21 PM</p>
</div>
   
</div>
<div id="menu"> 
<h2>Useful Links</h2>
<p><a href="http://www.csszengarden.com">css Zen Garden</a><br />
<a href="http://validator.w3.org">W3C Validator</a></p>
</div>

</div>
</body>
</html>

Now, preview your XHTML document in a browser and see what happens.

Assuming everything looks OK, let's take a moment and review what we just did. In style.css, we began by creating the "wrapper" id. The wrapper id does two things -- it effectively sets the width of the page content to 800 pixels, and it sets the margins on both the left and right to "auto". Margin refers to the white space around the edge of the element. By using "auto" as the value for "margin-left" and "margin-right", the "wrapper" <div> element is centered in the browser window because there are equal amounts of margin on both sides. If you were to resize the browser window, it would remain centered. The #menu "id" and the #content id also use margins. The "top-margin:10px" property in both instances, places a 10 pixel wide margin between the bottom of the #header div and the #menu and #content div elements.

The "header" id is simple. Here' we've just created a box that is 800 pixels wide and 150 pixels tall. It contains our <h1> element and forms a sort of page banner.

Things get slightly more complicated for the "menu" id. The "float" property is used here to tell the menu to align to the left side of the page and allow the rest of the page content to wrap around it. The width of the menu is set to 200 pixels.

The "content" id is similar to the "menu" id, only it floats to the right. By setting a float value for both the "content" and the "menu" <div> elements, they appear side by side. The "content" id is also set to be 590 pixels wide, which leaves a 10 pixel space between the menu and the content (800 pixels - 590 pixels - 200 pixels=10 pixels. The reasons behind this will become clearer once we start adding color and borders.

Lastly, the "footer" is contained within the "content" div and is set to a width of 100%. Here we are basically telling the "footer" div to be 100% the width of its parent element. In this case, the parent element is the "content" div, and therefore, "footer" is also 590 pixels wide.

This chapter illustrates the proper way to arrange an XHTML page. In HTML, it was common to find Web designers using tables to create different sections of the page. Using CSS, we can and should use tables only to display tabular information and use CSS for layout purposes.

Chapter 7: Controlling the Appearance of Text

One of the primary uses of CSS is to control the appearance of text in XHTML documents. Currently, the text on our page has a pretty basic appearance, but with a few new CSS definitions we can give the text a more modern, contemporary look and make it easier to read at the same time.

Parent Elements

In the previous chapter, we discussed how we set the footer to inherit the width property of its parent element, the "content" div. Inheritance is an important feature of CSS. Certain properties, when set for a parent element are also automatically reflected in the child elements. In our XHTML document, the most important parent element is the <body> element, because it contains all other elements. Using the "body" selector, we'll create a style definition that flows through the rest of the document and sets the font to Arial for all other elements contained within the body element. Enter the following at the top of style.css:

body{
 	font-family:Arial,Helvetica,sans-serif;
}

If you were to preview index.html now, you would notice a pretty major change. All the text in the entire document now appears in Arial font. If you are wondering why we used three different fonts as our property values it's because we can't always be sure that every computer has the "Arial" font installed. In this case, "Helvetica" is our fallback to "Arial", and if "Helvetica" is not installed, the computer's default "sans-serif" (without feet) font is used. You can specify any font you like with the "font-family" property, but you should be careful. If you choose a really specific font, it's highly possible that visitors to your Web site won't have it installed and the page will appear differently than you intended.

On a similar vein, we could use the h2 selector to set properties of all second-level headings in the document. For example, we might want all <h2> elements to have 14 point font. However, there might be times when we want <h2> elements in different sections of the page to look differently. A good example is the <h2> element in the "menu" div versus the <h2> elements in the "content" div. Assuming we want the <h2> element in the "menu" div to have a different format than the one in the "content" div, we can do the following:

#menu h2
	margin-top:5px;
	padding:0;
	font-size:12pt;
	font-weight:bold;
	color:black;
}


#content h2{
	margin:0;
	font-size:14pt;
	font-weight:bold;
	text-decoration:underline;
	color:#333;
	padding-left:5px;
	padding-right:0;
	padding-top:0;
	padding-bottom:0;
}

Go ahead and add these two definitions to style.css. Each one should go beneath its associated "id" definition. You can probably guess what most of the properties do. The margin property is used to set the distance between the border around an element and other elements on the page. With the heading elements, there is an invisible border that typically contains some white space to set the headings off from the rest of the text. Our CSS code here overrides that margin to provide a better appearance. The color property is also used here to set the menu header to black and the content header to a dark gray. You can specify colors using the name of the color or the HTML hex value. See http://www.w3schools.com/html/html_colors.asp for a good color reference.

Let's go ahead and complete our text formatting by adding the following definitions:

#header h1{
	margin:0;
	padding-left:1em;
	padding-top:55px;
	font-size:40px;
	font-family:Georgia,"Times New Roman",serif;
	font-variant:small-caps;
	color:white;
}
#content h3{
	margin:0
	font-size:12pt; 
	font-weight:bold; 
	color:#333;
	padding-left:5px;
	padding-right:0;
	padding-top:0;
	padding-bottom:0;
}
#content p{
	font-size:10pt;
	color:#333;
	padding-left:5px;
}  

#footer p{
	font-size:9pt;
	color:#666;
}

Add each of these definitions beneath their related "id" definition and preview the document in your browser. The <h1> element in the header div will "disappear" because we've set the color to white. We've also used quite a few properties with the <h1> element. Like the other heading elements, we've modified the padding, but we've also added some values for margin. The "1em" value for "margin-left" places some whitespace to the left side of the element that is equivalent to the width of one character. We've padded the top of the element with 55 pixels in order to horizontally center the element in the div. Since the div has a total height of 150 pixels and since the we've specified the characters as 40 pixels tall, a 55 pixel padding at the top of the element pushes the text down to the middle (150 pixels - 40 pixel text = 110 pixels; 110 pixels / 2 = 55 pixels top and bottom). Lastly, we used the font-variant property to create a "small caps" effect on the element. If you want to see the results, change the color to black and preview it in your browser, and then change it back to white to prepare it for the next chapter.

We've customized the appearance of all text on the page with the exception of the links. The appearance of the links can be set much like the rest of the elements. Go ahead and add the following:

#menu a, #menu a:visited{
 	color:white;
 	text-decoration:none;
}
#menu a:hover{
	color:#CCC;
	text-decoration:underline;
}
#footer a, #footer a:visited{
	color:#999;
	text-decoration:none;
}
#footer a:hover{
	color:black;
	text-decoration:underline;
}

Now, enter this code into style.css in the appropriate sections.

The descriptors used here should now be familiar to you, but the selectors may not. First, we've used selectors like a:hover and a:visisted. These are special CSS rules, called psuedo-classes, that are used to set special effects for HTML anchors. Using a:hover, special formatting becomes visible when the user mouses over a link. The a:visited class specifies how the link should look once it has been visited. Secondly, we've specified more than one selector in the same definition. By separating the selectors with commas we can apply the same descriptors to more than one selector at the same time. In this example, we're making sure that the visited links looks no different from un-visited links.

Alignment

When you use a word processor, you can choose various alignment options for your text. Similarly, with CSS, we can also set text alignment. By default, the text is left-justified, and that's fine for most purposes, but our menu would look better if it contained centered text.

Add the following property to the #menu descriptor:

text-align:center;

Now, all text contained within the #menu div will be center aligned.

span Elements and classes

There's one last HTML element that we'll add to index.html. A close relative of the div element is the span element. Span elements are like div elements in that they can be used to contain sections of XHTML code. However, they can't be used to position text; they're mainly used just to format text. For example, if div elements are boxes for text, span elements act kind of like a highlighters. If we wanted a portion of a paragraph to appear in red, for example, we could use a span.

Let's surround each acronym in our paragraph text with a span and apply some sort of text formatting to it. Now, we can't use an "id" definition to do that because we have multiple acronyms and we need to reuse the definition. At the same time, we can't use a p selector because we just want to affect a specific portion of the paragraph text. There's a solution: classes.

Classes work exactly like an "id" definition", but can be reused. For this reason, they're perfect for span elements. To create a "class", we can assign a name, just like in an "id", but instead of a number sign, use a period. Add the following to the bottom of style.css.

.acronym{
	color:black;
	font-weight:bold;
}

Our normal paragraph text is a dark grey, so by making the acronym text black with a bold typeface, they'll stand out a bit more. To apply the format, return to index.html and for each acronym enclosed in a paragraph element, do something like this:

<p><span class="acronym">XHTML</span> results from a combination of 
<span class="acronym">HTML</span>
 and <span class="acronym">XML</span>...</p>

Preview the page, and notice the result. You should now be well on your way to becoming an expert in text formatting. In the next chapter, we'll wrap up the tutorial by enhancing the apperance of the div elements.

Chapter 8: Borders and Backgrounds

Your page is starting to look pretty good, but it's still a little hard to tell where each section begins and ends. If you're a fan of a minimalist appearance, you might decide to stop here. However, if you want a more colorful and vibrant page, there's still a few more things we can do.

Background Color

The CSS property "background-color" can be used to specify a background color for each element. There are a couple elements on our page that could use a background color, so let's go ahead and add to their CSS definitions.

In the body descriptor, add another property that reads:

background-color:#333;

This will give our page a dark gray background.

In the #content descriptor, add the following property:

background-color:white;

This will ensure that our text is still visible. Without this, the dark gray background from the body element would show in the "content" div and our dark text would be hard to read.

Background Image

It's possible to create some very nice looking pages using only XHTML and CSS, but sometimes it's nice to include photographs or other images. The CSS property "background-image" allows us to specify images, and we'll use this property on the "header" and "menu" div elements.

Add this property to the #header descriptor:

background-image:url(images/header.jpg);

You might remember the header.jpg file from when you first setup your files for the tutorial. This particular file is exactly 800 x 150 pixels, so it fits perfectly in the header div.

Set the background image for the "menu" div with this property:

background-image:url(images/menu.gif);

By default, background images are tiled, meaning they repeat over and over until they completely fill their associated element. In this case, we're using menu.gif to provide a tiled background for the menu.

Borders

There are three different CSS properties that allow us to create and customize a border around our XHTML elements. They are: border-width, border-style, and border-color. Each of these properties can also be used to specify a border style for just one side, using properties similar to: border-left-width, border-left-style, and border-left-color. A useful alternative is that each of these properties can be reduced to a single shorthand property called border, using the following syntax: border: width,style,color. Another possibility is border-left:width,style,color.

Let's add a few borders to some of the div elements on our page to enhance its appearance. First, let's add a 1 pixel solid black border to the header, menu, and content elements by adding the following to the descriptors:

border-width:1px;
border-style:solid; 	
border-color:black;

You can also use the shorthand version:

border:1px solid #black;

To complete the tutorial, let's add a dotted line at the top of the #footer div element to divide it from the rest of the content. We'll use the shorthand method:

border-top:1px dotted #333;

You may wish to view the completed CSS and the complete XHTML page.

That concludes our XHTML/CSS Tutorial. If you have any questions about anything presented here, please contact me at lhorton@mail.utexas.edu.

References:

HTML 4.01 / XHTML 1.0 Reference
A useful list of XHTML elements, their attributes, and usage

Blooberry Index Dot CSS
A great CSS property reference

css Zen Garden
A great place to find inspiration and examples of innovative CSS usage