CSS: Adding Style to Web Pages UP TO SPEED Validating Web Pages As mentioned on page 5, a web page's doctype identifies which type of HTML or XHTML you used to create the web page. The rules differ subtly depending on type: For ex- ample, unlike HTML 4.01, XHTML doesn't let you have an unclosed <p> tag, and requires that all tag names and at- tributes be lowercase (<a> not <A>, for example). HTML5 includes new tags and lets you use either HTML or XHTML syntax. Because different rules apply to each variant of HTML, you should always validate your web pages. An HTML validator is a program that makes sure a web page is written correctly. It checks the page's doctype and then analyzes the code in the page to see whether it matches the rules defined by that doctype. For example, the validator flags mistakes like a misspelled tag name or an unclosed tag. The World Wide Web Consortium (W3C), the organization that's responsible for many of the technol- ogies used on the web, has a free online validator at http:// validator.w3.org. You can copy your HTML and paste it into a web form, upload a web page, or point the validator to an already existing page on the web; the validator then ana- lyzes the HTML and reports back whether the page is valid or not. If there are any errors, the validator tells you what the error is and on which line of the HTML file it occurs. If you use Firefox, you can download the HTML Valida- tor plug-in from http://users.skynet.be/mgueury/mozilla. This plug-in lets you validate a page directly in your web browser; just open a page (even a page directly off of your computer) and the validator will point out any errors in your HTML. There's a similar plug-in for Safari, called Safari Validator, which you can find at http://zappatic.net/projects/ safarivalidator. Valid HTML isn't just good form, it also helps to make sure your JavaScript programs work correctly. A lot of JavaScript involves manipulating a web page's HTML: identifying a particular form field, for example, or placing new HTML (like an error message) in a particular spot. In order for JavaScript to access and manipulate a web page, the HTML must be in proper working order. Forgetting to close a tag, using the same ID name more than once, or improperly nesting your HTML tags can make your JavaScript code behave erratically or not at all. CSS: Adding Style to Web Pages At the beginning of the Web, HTML was the only language you needed to know. You could build pages with colorful text and graphics and make words jump out using different sizes, fonts, and colors. But today, web designers turn to Cascading Style Sheets to add visual sophistication to their pages. CSS is a formatting language that lets you make text look good, build complex page layouts, and generally add style to your site. Think of HTML as merely the language you use to structure a page. It helps iden- tify the stuff you want the world to know about. Tags like <h1> and <h2> denote headlines and assign them relative importance: A heading 1 is more important than a heading 2. The <p> tag indicates a basic paragraph of information. Other tags provide further structural clues: for example, a <ul> tag identifies a bulleted list (to make a list of recipe ingredients more intelligible, for example). CSS, on the other hand, adds design flair to well-organized HTML content, making it more beautiful and easier to read. Essentially, a CSS style is just a rule that tells a web browser how to display a particular element on a page. For example, you can introduction 7