XHTML and CSS are two different animals, or specifications used to create web pages. Each has a distinct look and purpose. When used together, the combination can produce a useful, informationrich, and highly attractive web page.

If you see an example here or in any later chapter typed in a particular way, you should copy that exactly as you type along with the exercises in the book. The rules defining how a language is put together are its syntax. In this chapter, you will learn the syntax of XHTML and CSS. You will learn what each of these specifications does, how each looks, and how to write both. Basic rules for typing both XHTML and CSS, such as when to use the spacebar, when to type a semicolon, or when to type a bracket, will also be explained in this chapter.

Anatomy of a Website

For those of you who have never built a website before, a summary of what goes into a site may help you understand what HTML/XHTML and CSS do and how they can work together to implement your vision. (If you've already worked with one of the "visual tools" like Dreamweaver or FrontPage, you're a little further along the learning curve, but this recap will still help to put what you're about to learn into perspective.)

If you have explored the World Wide Web, you know that a web page may contain text, images, links, sounds, and movies or moving images. You may also be aware that some pages use scripts written in various languages such as JavaScript, PHP, or ASP to create interactivity, to connect the page to a database, or to collect information submitted in a form.

The glue that holds all those pieces and parts together and displays it in a browser such as Internet Explorer or Netscape Navigator in a readable or useable manner is HTML or XHTML. The browser is your window on the World Wide Web; XHTML is the language used to tell the browser how to format the pieces and parts of a web page.

CSS enters the scene by adding style to the formatted elements on a web page. The style might involve color, placement, images, fonts, or spacing, but it would not change the underlying pieces and parts formatted by the XHTML.

NOTEThe Internet is a vast collection of interconnected computer networks from all over the world. The World Wide Web (WWW) is a part of the Internet but is not the Internet itself. The Internet has many parts besides the WWW, such as e-mail.

What Are XHTML and HTML?

Hypertext Markup Language (HTML) is the programming specification for how web pages can be written so they will be understood and properly displayed by computers. XHTML is an acronym for Extensible Hypertext Markup Language, a specification that grew out of HTML. You'll see what "extensible" means in a moment, but to understand the role of HTML and XHTML, you need to understand the three terms in HTML.

Hypertext is simply text as it exists in what is called "hyperspace"-the Internet. It is plain text that carries the content of your web page and the programming information needed to display that page and link it to other pages. Hypertext is formatted via a markup language-a standardized set of symbols and codes that all browsers can interpret.

NOTE The organization devoted to creating and publishing the standardized rules for various web technologies, including XHTML, is the World Wide Web Consortium, or W3C, at www.w3.org. See also the Web Standards Project, a grassroots coalition fighting for the adoption of web standards, at www.webstandards.org.

Markup is used to convey two kinds of information about text or other content on a web page: first, it identifies what kind of structure the content requires. If you think of a web page as simply a whole lot of words, the HTML is the markup, or framework, that specifies that certain words are headings or lists or paragraphs. The way you mark up the text on the page structures the page into chunks of meaningful information such as headings, subheads, and quotes.

Markup may also define the presentation of those elements; for example, the different fonts to be used for headings and subheadings. When it was first developed, HTML was the only tool for defining visual presentation on screen. When the World Wide Web began, the only information transmitted using the Hypertext Transfer Protocol (HTTP) was text. As the capability to transfer images, sounds, and other information was added, presentational markup was added to HTML to help format the new information.

After a few years of amazing growth, the HTML that was being used to mark up individual elements reached burdensome proportions. It became apparent that markup for presentation was an inefficient way to define what every item of text or graphics on a website should look like, and the web community developed Cascading Style Sheets (CSS) as a better way to handle presentation.

What's the Difference between XHTML and HTML?

XHTML actually is HTML-it is the most recent standard for HTML recommended by the W3C. XHTML was chosen for the basis of the codes used in this book because it is the current recommendation. You will be learning HTML when you learn XHTML. It is a two-for-the-price-of-one bargain. There are a few basic differences in writing XHTML versus writing HTML, and these will be pointed out to you at appropriate times in the book.

XHTML is more than HTML, because it is extensible. XHTML uses the syntax rules of the Extensible Markup Language (XML). An extensible markup language can be extended with modules that do things such as make math calculations or draw graphical images. Web pages written in XHTML can interact with XML easily.

What Is CSS?

CSS is an acronym for Cascading Style Sheets, another programming specification. CSS uses rules called styles to determine visual presentation. The style rules are integrated with the content of the web page in several ways. In this book, we will deal with style rules that are embedded in the web page itself, as well as with style rules that are linked to or imported into a web page. You will learn to write the style rules and how to import, link, or embed them in the web pages you make. In HTML, styles can be written into the flow of the HTML, or inline, as well.

CSS can also be integrated into web pages in other ways. Sometimes you have no control over these rules. Browsers allow users to set up certain CSS style rules, or user styles, according to their own preferences. The user preferences can override style rules you write. Further, all browsers come with built-in style rules. Generally the built-in styles can be overridden in your CSS style rules. Built-in browser display rules are referred to as default presentation rules. Part of what you will learn is what to expect from a browser by default, in order to develop any new CSS rules to override those default display values.