Guide to CSS.and.HTML Web.Design

AN INTRODUCTION TO WEB DESIGNRefresh the web page in the browser, and you should see it immediately change, looking 1like that shown in the following image. Effectively, nothing in the web page was changed(you could have overwritten the rules in creating-and-styling-a-web-page.css ratherthan creating a duplicate style sheet)—instead, the web page’s design was updated purelyby using CSS. (Note that in the download files, there are two sets of documents for thisexercise—one with the design as per step 7, and the other as per step 11, the latter ofwhich has the -2 suffix added to the HTML and CSS document file names.)Although this was a very basic example, the same principle works with all CSS-baseddesign. Create a layout in CSS and chances are that when you come to redesign it, you maynot have to change much—or any—of the underlying code. A great example of this ideataken to extremes is css Zen Garden (www.csszengarden.com), whose single web page isradically restyled via dozens of submitted CSS documents. 23

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Working with website content Before we explore how to create the various aspects of a web page, we’re going to briefly discuss working with website content and what you need to consider prior to creating your site. Technology and design aren’t the only factors that affect the success of a website. The human element must also be considered. Most of the time, people use the Web to get information of some sort, whether for research purposes or entertainment. Typically, people want to be able to access this information quickly; therefore, a site must be struc- tured in a logical manner. It’s imperative that a visitor doesn’t spend a great deal of time looking for information that should be easy to find. Remember, there are millions of sites out there, and if yours isn’t up to scratch, it’s easy for someone to go elsewhere. There are exceptions to the general rule of a website having a structured and logical design—notably sites that are experimental in nature or the equivalent of online art, thereby requiring exploration. In these cases, it may actually be detrimental to present a straightforward and totally logical site, but these cases are strictly a minority. In this section, we’ll look specifically at information architecture and site maps, page lay- out, design limitations, and usability. Information architecture and site maps Before you begin designing a website, you need to collate and logically organize the infor- mation it’s going to contain. A site map usually forms the basis of a site’s navigation, and you should aim to have the most important links immediately visible. What these links actually are depends on the nature of your website, but it’s safe to say that prominent links to contact details are a common requirement across all sites. A corporate website may also need prominent links to products, services, and a press area. The resulting site map for a corporate site might resemble the following illustration. Here, the boxed links serve as the primary navigation and are effectively sections of the website. Underneath each boxed link is a list of subcategories or pages housed within that section. With this structure, it’s easy for a newcomer to the site to work out where information is located. When working on site maps, try talking to people who might be interested in the site to get their reaction to your organization of the content. When work-24

AN INTRODUCTION TO WEB DESIGNing for a client, ensure that they sign off on the site map, and that you get feedback on the 1site map from people at all levels in the company and, if possible, from the company’scustomers. In all cases, seek the opinions of both the technically minded and relative com-puter novices, because each may have different ideas about how information should bestructured. After all, most web designers are technically minded (or at least well versed inusing a computer), and they often forget that most people don’t use the Web as regularlyas they do. In other words, what seems obvious to you might not be to the general public.For larger sites, or those with many categories, site maps can be complex. You may have tocreate several versions before your site map is acceptable. Always avoid burying contenttoo deep. If you end up with a structure in which a visitor has to click several times toaccess information, it may be worth reworking your site’s structure.Basic web page structure and layout Once you’ve sorted out the site map, avoid firing up your graphics package. It’s a good idea to sketch out page layout ideas on paper before working on your PC or Mac. Not only is this quicker than using graphics software, but it also allows you to compare many ideas side by side. At this stage, you shouldn’t be too precious about the design—work quickly and try to get down as many ideas as possible. From there, you can then refine your ideas, combine the most successful elements of each, and then begin working on the computer.Although the Web has no hard-and-fast conventions, themes run throughout successfulwebsites, many of which are evident in the following image of a version of my SnubCommunications homepage. 25

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN A website’s navigation should be immediately accessible—you should never have to scroll to get to it. It’s also a good idea to have a masthead area that displays the organization’s corporate brand (or, if it’s a personal site, whatever logo/identity you wish to be remem- bered by, even if it’s only a URL). The homepage should include an introduction of some sort that briefly explains what the site is about, and it should have some pull-ins to other areas of the site. These pull-ins could be in the form of news items that link to recent product launches, completed proj- ects, and so on. Most websites require a method for people to contact the site owner, and at least one clear link to a contact page is essential. Avoid constantly changing the design throughout the site. In print, this sometimes works well and provides variation within a book or magazine. Online, people expect certain things to be in certain places. Constantly changing the position of your navigation, the links themselves, and even the general design and color scheme often creates the impres- sion of an unprofessional site and makes it harder to use. Ultimately, however your site ends up, and whatever your design, you need to ensure your creation is as usable as possible. A good checklist—even if the points may seem entirely obvious—is as follows: Is the site easy to navigate? Is it easy for users to locate content on each page? Is it easy for users to find what they need on the site? Are download times kept to a minimum? Is the site suitable and relevant for its target audience? Does the site use familiar conventions?26

AN INTRODUCTION TO WEB DESIGNIf you can answer yes to all these things, then you should be on the right track!Regarding conventions, it’s important not to go overboard. For example, some web 1gurus are adamant that default link colors should always be used. I think that’s sweetand quaint, but somewhat archaic. As long as links are easy to differentiate from othertext and styled consistently throughout the site, that’s what matters.Limitations of web design Depending on your viewpoint, the inherent limitations of the Web are either a challenge or a frustration. Print designers often feel the latter, and consider themselves hampered by the Web when compared to the relative freedom of print design. Resolution is low, and you can’t place whopping great images everywhere, because if you did download speeds would slow to a crawl and all your visitors would go elsewhere. Columns take on a different role online compared to in print, as they’re primarily used to display several areas of content with the same level of prominence. You don’t use columns online to display continuous copy, unless you use just one column. If you use several columns, the visitor has to constantly scroll up and down to read everything. There are other limitations when it comes to rendering text online. There are few web standard fonts (detailed in Chapter 3); serifs, which work well on paper, don’t work so well online; and reading text onscreen is already harder than reading print, so complex page backgrounds should be avoided. And then there are issues like not knowing what an end user’s setup is, and therefore having to consider monitor resolution and color settings, what browser is being used, and even the various potential setups of web browsers. Do you go for a liquid design, which stretches with the browser window, or a fixed design, which is flanked by blank space at larger monitor resolutions? Don’t worry, this isn’t a pop quiz. These are questions that will be answered in this book, but I mention them now to get you thinking and realizing that planning is key with regard to web design. Because this is largely a book about concepts, ideas, and techniques, we won’t return to talk about planning very much, hence drumming it in at this early stage. Also, don’t get disheartened by the previous limitations spiel. The Web is a truly magnifi- cent medium, and for every downside there’s something amazing to counter it. So what if the resolution’s low? Nowhere else can you so effortlessly combine photography, video, sound, and text. Sure, it’s all well and good to read a magazine, but the Web enables inter- action, and navigation can be nonlinear, enabling you to link words within specific pieces to other articles on your website or elsewhere on the Internet. Don’t get me wrong: the Web is a great thing. If it weren’t, I wouldn’t be interested in it, wouldn’t be designing for it, and wouldn’t be writing this book. 27



2 WEB PAGE ESSENTIALS

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN In this chapter: Creating XHTML documents Understanding document type definitions Using meta tags Attaching external documents Working with the body section Using CSS for web page backgrounds Commenting your work Starting with the essentials You might wonder what’s meant by this chapter’s title: web page essentials. This chapter will run through everything you need to do with a web page prior to working on the lay- out and content, including creating the initial documents, attaching external documents to HTML files, and dealing with the head section of the web page. Little of this is a thrill with regard to visual design, which is why many designers ignore the topics we’ll cover, or stick their fingers in their ears, hum loudly, and wish it would all go away (and then probably get rather odd looks from nearby colleagues). However, as the chapter’s title states, everything we’ll be talking about is essential for any quality web page, even if you don’t see exciting things happening visually. This chapter also explores web page backgrounds, which, although they should be used sparingly and with caution, often come in handy. It’s worth bearing in mind that some aspects discussed here will crop up later in the book. For example, CSS techniques used to attach backgrounds to a web page can be used to attach a background to any web page element (be that a div, table, heading, or paragraph). But before we get into any CSS shenanigans, we’ll put our CSS cheerleading team on hold and look at how to properly construct an XHTML document. Document defaults As mentioned in Chapter 1, we’ll be working with XHTML markup in this book rather than HTML. Although XHTML markup differs slightly from HTML, the file suffix for XHTML web pages remains .html (or .htm if you swear by old-fashioned 8.3 DOS naming techniques). Although XHTML’s stricter rules make it easier to work with than HTML, you need to be aware of the differences in the basic document structure. In HTML, many designers are used to starting out with something like the following code: <html> <head> <title></title> </head>30

WEB PAGE ESSENTIALS <body> 2 </body> </html> 31But in XHTML, a basic, blank document awaiting content may well look like this (althoughthere are variations): <!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\" xml:lang=\"en\" lang=\"en\"> <head> <meta http-equiv=\"content-type\" content=\"text/html; ¯ charset=utf-8\" /> <title></title> </head> <body> </body> </html>Although this is similar to the minimal HTML document, there are important differences.The most obvious is found at the beginning of the document: a DOCTYPE declaration thatstates what document type definition (DTD) you are following (and no, I’m not shouting—DOCTYPE is spelled in all caps according to the W3C). <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">The DTD indicates to a web browser what markup you’re using, thereby enabling thebrowser to accurately display the document in question (or at least as accurately as itcan—as shown in Chapter 9, browsers have various quirks, even when you’re using 100%validated markup).Next is the html start tag, which contains both a namespace and a language declaration.The first of those is intended to reduce the ambiguity of defined elements within the webpage. (In XML, elements can mean different things, depending on what technology is beingused.) The language declaration indicates the (default) language used for the document’scontents. This can assist various devices, for example enabling a screen reader in correctlypronouncing words on a page, rather than assuming what the language is. (Also, internalcontent can have language declarations applied to override the default, for example whenembedding some French within an English page.) The xml:lang attribute is a reservedattribute of XML, while the lang attribute is a fallback, used for browsers that lack XMLsupport. Should the values of the two attributes differ, xml:lang outranks lang. <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang =\"en\" lang=\"en\">You’ll also notice that a meta tag appears in the head section of the document: <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />To pass validation tests, you must declare your content type, which can be done using thismeta element. Here, the defined character set is UTF-8 (Unicode), the recommended

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN default encoding, and one that supports many languages and characters (so many charac- ters needn’t be converted to HTML entities). There are other sets in use, too, for the likes of Hebrew, Nordic, and Eastern European lan- guages, and if you’re using them, the charset value would be changed accordingly. Although www.iana.org/assignments/character-sets provides a thorough character set listing, and www.czyborra.com/charsets/iso8859.html contains useful character set dia- grams, it’s tricky to wade through it all, so listed here are some common values and their associated languages: ISO-8859-1 (Latin1): Western European and American, including Afrikaans, Albanian, Basque, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, Galician, German, Icelandic, Irish, Italian, Norwegian, Portuguese, Spanish, and Swedish. ISO-8859-2 (Latin2): Central and Eastern European, including Croatian, Czech, Hungarian, Polish, Romanian, Serbian, Slovak, and Slovene. ISO-8859-3 (Latin3): Southern European, including Esperanto, Galician, Maltese, and Turkish. (See also ISO-8859-9.) ISO-8859-4 (Latin4): Northern European, including Estonian, Greenlandic, Lappish, Latvian, and Lithuanian. (See also ISO-8859-6.) ISO-8859-5: Cyrillic, including Bulgarian, Byelorussian, Macedonian, Russian, Serbian, and Ukrainian. ISO-8859-6: Arabic. ISO-8859-7: Modern Greek. ISO-8859-8: Hebrew. ISO-8859-9 (Latin5): European. Replaces Icelandic-specific characters with Turkish ones. ISO-8859-10 (Latin6): Nordic, including Icelandic, Inuit, and Lappish. For an overview of the ISO-8859 standard, see http://en.wikipedia.org/wiki/ISO_8859. DOCTYPE declarations explained XHTML 1.0 offers you three choices of DOCTYPE declaration: XHTML Strict, XHTML Transitional, and XHTML Frameset. In the initial example, the DOCTYPE declaration is the first thing in the web page. This is always how it should be—you should never have any content or HTML elements prior to the DOCTYPE declaration. (An exception is the XML dec- laration; see the section “What about the XML Declaration?” later in this chapter.) XHTML Strict For code purists, this is the DTD that does not allow the use of presentational markup or deprecated elements: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">32

WEB PAGE ESSENTIALSIt forces a stricter way of working, but tends to ensure greater browser compatibility when 2you play by its rules, and so it’s used throughout this book.XHTML TransitionalIn common usage, this friendly DTD enables you to get away with using deprecated ele-ments, and is useful for those rare occasions where you’d otherwise be banging your headagainst a brick wall, trying to work out how to get around using one of those few still-use-ful old tags: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">Note that even if you end up solely using strict markup, the transitional DTD still ensuresbrowsers generally render elements correctly.XHTML FramesetFrames are a relic, and are rarely used online. However, for backward compatibility and forthose designers who still use them, there is a frameset-specific DTD (individual pageswithin a frameset require one of the aforementioned DTDs): <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Frameset//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd\">Note that in Gecko browsers, XHTML Transitional and Frameset are rendered in“almost standards” mode. The main difference between this and standards mode is inthe formatting of tables, which is designed to largely match that of Internet Explorer,making sliced-images-in-tables layouts less likely to fall apart.HTML DOCTYPEsIf you wish to work with HTML markup rather than XHTML, your documents still need aDOCTYPE to pass validation. The three DOCTYPEs for HTML 4.01 more or less match thosefor HTML: Strict, Transitional, and Frameset. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\"> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/frameset.dtd\"> 33

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Partial DTDs Always include full DTDs. Some older web design packages and online resources provide incomplete or outdated ones that can switch browsers into “quirks” mode, displaying your site as though it were written with browser-specific, old-fashioned markup and CSS, and rendering the page accordingly (as opposed to complying strictly with web standards. The argument for quirks mode was largely down to backward-compatibility. For example, it enabled Internet Explorer 6 to display CSS layouts with the box model used by Internet Explorer 5. This type of fix is today considered archaic—see Chapter 9 for modern methods of backward compatibility, including conditional comments. For more on quirks mode, read Wikipedia’s article at http://en.wikipedia.org/wiki/Quirks_mode. For the record, an example of an incomplete DTD looks like this: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"/DTD/xhtml1-transitional.dtd\"> In this case, the URI (web address) is relative. Unless you have the DTD in the relevant place on your own website, the browser will display the page this DTD is included on in quirks mode. (And, quite frankly, if you do have the DTD on your website instead of using the one on the W3C’s site, you are very odd indeed.) The same thing happens if you leave out DTDs entirely. Therefore, always include a DTD and always ensure it’s complete. What about the XML declaration? As stated earlier, there is an exception to the DTD being the first thing on a web page. The one thing that can precede it is an XML declaration (often referred to as the XML prolog). This unassuming piece of markup looks like this (assuming you’re using Unicode encoding): <?xml version=\"1.0\" encoding=\"utf-8\"?> The tag tells the browser which version of XML is being used and that the character encod- ing is UTF-8. For an overview of character sets, see the following URLs: www.w3.org/ International/O-charset.html, www.w3.org/International/O-charset-lang.html, and www.w3.org/International/O-charset-list.html. Some web design applications add this tag by default when creating new XHTML docu- ments, and the W3C recommends using it to declare the character encoding used within your document. However, I don’t, because versions of Internet Explorer before version 7 take one look at the XML declaration, recoil in horror, and then spit out your site in a way rather different from how you intended (the playfully-referred-to quirks mode discussed earlier).34

WEB PAGE ESSENTIALSOf course, Internet Explorer 6’s share of the market is in decline, but it’s likely to take at 2least a couple of years from Internet Explorer 7’s release for its predecessor to becomeextinct. Therefore, because the XML declaration has the potential to cause havoc with afair chunk of your likely audience, it’s cause for concern. However, as mentioned earlier,there’s an alternative, compliant, totally safe option that you can use instead: <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />Using the preceding meta tag works fine, it does the same job as one of the main roles ofthe XML declaration (stating the page’s character encoding), and no browsers choke on it.The net result is that everyone goes home happy, and we can finally start talking about thenext part of a web page.Although the content-type meta tag can be placed anywhere in the head of a webpage, it’s worth noting that some browsers don’t get the right encoding unless this tagis the first element within the head section.The head section The head section of a web page contains information about the document, the majority of which is invisible to the end user. Essentially, it acts as a container for the tags outlined in this section (which should generally be added in the same order that we run through them).Page titles Many designers are so keen to get pages online that they forget to provide a title for each page. Titles are added using the title element, as follows: <title>IMAGES FROM ICELAND - photography by Craig Grannell</title> The title is usually shown at the top of the browser window (and sometimes within the active tab, if you’re using a browser that has a tabbed interface); the results of the previ- ous code block are shown in the following image.By default, web design packages usually do one of the following things with regard to thetitle element: Add no content. Set the title element’s content as “Untitled Document.” Set the title element’s content as the application’s name. 35

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN The first of these results in no title being displayed for the web page and is invalid XHTML, while the second means your page joins the legions online that have no title. The third option is just as bad: using your web page to advertise the application you used to create it. Therefore, add a title to every web page you create—in fact, make it one of the first things you do, so you don’t forget. With regard to the content of your web page titles, bear in mind that this is often the most prominent thing returned in search engine results pages. Keep titles clear, concise, and utterly to the point. Use too many words and the title will be clipped; use too few (or try to get arty with characters) and you may end up with something that stumps search engines and potential visitors, too. Generally speaking, for the homepage at least, it’s good to include the name of the site or organization, followed by an indication of the site’s reason for existence (and author or location, if relevant). For instance, as shown in the following image, the Snub Communications title includes the organization’s name, the primary services it offers, and its author. Some designers use the same title throughout their site. This is a bad idea—web page titles are used as visual indicators by visitors trawling bookmarks or their browser’s history. This is why I generally tend to use titles as a breadcrumb navigation of sorts, showing where a page sits within the website’s hierarchy, like this: <title>Company name - Services - Service name</title>36

WEB PAGE ESSENTIALSmeta tags and search engines 2 The Web was once awash with tips for tweaking meta tags. This was because although these tags are primarily there to provide information about the document, they were ini- tially what most search engines used to categorize web pages and return results. It didn’t take long for the shortfalls in the system to become apparent and for designers to abuse them, and so many meta tags are today considered redundant. Generally, search engines now trawl the content of the web page (including the contents of the title element), trying to match a user’s search with the most important content on the page. This is why strong use of semantic markup is essential—by correctly utilizing headings, paragraphs, and other structural elements for text, and by avoiding overuse of images for text content, modern search engines get a better handle on your content and can therefore—in theory—return more accurate results to users. Tagging and other forms of metadata are also becoming an increasingly popular search engine aid, for both internal search engines—those within the site itself—and for the search engines that return results from the whole of the Internet. Both are a means of adding information to a website to aid users. Visual tags may show a number of keywords associated with a blog posting, for example, enabling a user to see if something interests them by the size of the word; search engines will latch onto the keywords and the content of the piece itself. Metadata enables you to “embed” information in the page, aiding all manner of devices, and potentially creating networks and links to like information. A form of metadata—microformats—is explored in Chapter 8. Despite this, it’s still worth being mindful of meta tags when creating web pages, for those search engines that still make use of them—just be aware that they’re not nearly as impor- tant as they once were (with the possible exception of description). Keywords and descriptions Unless you’re totally new to web design, it’s likely you’ll be aware of the keywords and description meta tags: <meta name=\"keywords\" content=\"keywords, separated, by, commas\" /> <meta name=\"description\" content=\"A short description about the Web ¯ site\" />Because meta tags are empty tags, they must be closed using a spaceand trailing slash, as explained in Chapter 1.The first of these tags, keywords, should contain a list of words that users might type intoa search engine to find your site. Because of abuse (websites including thousands of wordsin the meta tag content, in order to try and create a catchall in search engine resultspages), such lists are rarely used these days. Instead, search engines tend to look at theentire content of a page to determine its relevance to someone’s search. If you choose toinclude this element in your web page, 30 or fewer words and short phrases are sufficient. 37

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN The contents of the description’s content attribute are returned by some search engines in a results page along with the web page’s title. As with the title, keep things succinct, otherwise the description will be cropped. Most search engines display a maximum of 200 characters, so 25 well-chosen words are just about all you can afford. revisit-after, robots, and author Other meta tags also use name and content attributes. These tags assist search engines. In the following example, the first tag provides an indication of how often they should return (useful for regularly updated sites), and the second tag states whether the page should be indexed or not. <meta name=\"Revisit-After\" content=\"30 Days\" /> <meta name=\"robots\" content=\"all,index\" /> The content attribute of the robots meta tag can instead include the values noindex and none, in order to block indexing, and follow or nofollow, depending on whether you want search engine robots to follow links from the current page or not. The author meta tag is of less use to search engines, and typically includes the page author’s name and home URL. Designers sometimes use it as a means to declare the author’s name and details, but it has little use beyond that. <meta name=\"author\" content=\"Craig Grannell for ¯ www.snubcommunications.com.\" /> Attaching external documents A web page—as in the (X)HTML document—is primarily designed to contain content that is structured in markup. Presentation should be dealt with via external CSS documents, and behavior via external scripting documents. Although it is possible to work with the likes of JavaScript and CSS within an HTML document, this goes against the modular nature of good web design. It’s far easier to create, edit, and maintain a site if you work with separate files for each technology. (The exception is if your “site” is only a single page, therefore making it sensible to include everything in a single document.) As already mentioned, XHTML documents are text files that are saved with the suffix .html (or .htm). CSS and JavaScript files are also text documents, and their file suffixes are .css and .js, respectively. When you start a project, having already set the relevant DOCTYPE and added meta tags, it’s a good idea to create blank CSS and JavaScript files and to attach them to your web page, so you can then work on any element as you wish. Attaching external CSS files: The link method In the previous chapter, you were shown how to attach CSS to a web page (see the section “Adding styles to a web page” in Chapter 1), and we’ll briefly recap the process here. There are two methods of attaching an external CSS file: the link method and the @import method.38

WEB PAGE ESSENTIALSThe link tag specifies a relationship between the linked document and the document it’s 2being linked to. In the context of attaching a CSS file, it looks something like this: <link rel=\"StyleSheet\" href=\"stylesheet.css\" type=\"text/css\" ¯ media=\"all\" />The attributes used are the following: rel: Defines the relation from the parent document to the target href: The location of the target file type: The MIME type of the target document media: The target medium of the target documentThe title attribute is also occasionally used with the link element, either to provideadditional information or to be used as a “hook” for the likes of a style sheet switcher (seewww.alistapart.com/stories/alternate/ for more information). Any style sheet lackinga title attribute (and a rel value of stylesheet) is persistent—always affecting a docu-ment. These are by far the most common types of style sheets. A preferred style sheet alsotakes a title along with the rel attribute and only one such style sheet can be used at atime—typically the first, with subsequent ones ignored. On pages that offer alternate stylesheets (typically via a style switcher), the persistent styles are always used, and the firstpreferred is the additional default; the preferred styles, however, can be swapped out byselecting an alternative style sheet. (Note that in Firefox, you should avoid adding a titleattribute to any style sheet for print, because otherwise the content may not print.)In the previous example, the media attribute is set to all, specifying that this style sheet isintended for all devices. But it’s feasible to attach multiple style sheets to a web page, andset the media attribute of each one to a different type. For instance, in the following exam-ple, two CSS files are attached, one for screen and the other for printed output: <link rel=\"stylesheet\" href=\"stylesheet.css\" type=\"text/css\" ¯ media=\"screen\" /> <link rel=\"stylesheet\" href=\"printcss.css\" type=\"text/css\" ¯ media=\"print\" />There are other media types, including aural, braille, projection, and tv, but few aresupported well. However, in Chapter 10, we’ll look at style sheets for print, which is one ofthe alternatives to screen that is supported reasonably well in mainstream browsers.Attaching CSS files: The @import methodA problem with the link method is that obsolete browsers see the style sheet but don’tunderstand it. This can result in garbled layouts—and often in unusable websites for thoseunfortunate enough to have to deal with such arcane web browsers. The solution is tohide the CSS from such browsers by using a command that they don’t understand and sowill ignore. This is often referred to as the @import method. 39

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN As shown in the following example, the style element is used to do this: <style type=\"text/css\" media=\"all\"> /* <![CDATA[ */ @import url(stylesheet.css); /* ]]> */ </style> The CSS specifications permit the use of the style sheet location as a quoted string instead of enclosing it in url(). The method shown here is more commonly supported, though. The following image shows the result in obsolete browsers, such as Netscape 4. The CSS is hidden, so just the content is displayed. However, compliant browsers see the CSS and render the site as shown in the following image.40

WEB PAGE ESSENTIALS 2This method isn’t perfect. Some browsers think they can deal with CSS but can’t, meaningthey understand @import, import the CSS, and then screw up the display anyway. Also,some versions of Internet Explorer in some cases offer a flash of unstyled content,although a workaround there is to have a link or script element in the web page’s headsection (which will be likely, since sites should carry a print style sheet in addition to theone for screen, or work with JavaScript). In any case, if you have to cater for obsolete andalternative devices, using @import is probably the best bet, ensuring your site is accessibleto (almost) all.Attaching favicons and JavaScriptFavicons are those little icons you often see in your browser’s address bar. They areattached using the link method discussed earlier, although you only need to include threeattributes: rel, href, and type. The type value can change, depending on the file type ofyour favicon. For example, image/png is fine if you’ve used a PNG. <link rel=\"shortcut icon\" href=\"favicon.ico\" type=\"image/x-icon\"/>These days, favicons are almost ubiquitous, and they provide users with an additionalvisual clue to a site’s identity. Although not particularly useful on their own, they can behandy when trawling through a large bookmarks list—you can look for the icon ratherthan the text. However, don’t rely on them instead of a good web page title—they shouldmerely be an additional tool in your arsenal. 41

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Attaching a JavaScript file to a web page is similarly painless. You do so via the script ele- ment, as follows: <script type=\"text/javascript\" src=\"javascriptfile.js\"></script> You may have seen the language attribute used within script start tags, but this is deprecated and won’t validate if you’re using XHTML Strict. Checking paths When working with external files, ensure paths between files are complete and don’t become broken as files are moved around, otherwise your web page may lose track of the CSS and JavaScript, affecting its display and functionality. If you’re using document-relative links (i.e., links relative to the current document), remember to amend paths accordingly. If you’re not sure how to work with the different types of links—absolute, relative, and root-relative—read the guide in Chapter 5, at the beginning of the “Creating and styling web page links” section. The body section The body element is used to define the body of a web page, and it contains the docu- ment’s content. No document content should ever be placed outside of the body element. Sorry for the italic type, but this is something I see on a regular basis, so I wanted to nip that one in the bud. Although the body element has a number of possible attributes that can be included in its start tag, mostly for defining link state color and backgrounds, these should be avoided. This is because such things should be dealt with using CSS, which enables you to define values on a site-wide basis, rather than having to do so for each individual page. The body element attributes include the likes of alink, link, and vlink for defining link colors; text for defining the default text color; and background and bgcolor for defining a background pattern and color. There are also a number of proprietary attributes that were intended to set padding around web page content, which aren’t worth mentioning further. In this next section, we’ll look at the contemporary way of setting content margins and padding, default font and color, and web page backgrounds. Content margins and padding in CSS Page margins and padding are easy to define using CSS. By setting these values once in an external file, you can update settings site-wide by uploading an amended style sheet rather than every single page on your site that has an amended body tag.42

WEB PAGE ESSENTIALSFurthermore, in terms of page weight, CSS is more efficient. If using old methods, to cater 2for all browsers, you set the following body attributes: <body marginwidth=\"0\" marginheight=\"0\" topmargin=\"0\" leftmargin=\"0\" ¯ bottommargin=\"0\" rightmargin=\"0\">The equivalent in CSS is the following: body { margin: 0; padding: 0; }If a CSS setting is 0, there’s no need to state a unit such as px or em. The reason both margin and padding are set to 0 is because some browsers define a default padding value. Therefore, even if you set all body margins to 0, there would still be a gap around your page content. Setting both the margin and padding to 0 in the body rule ensures that all browsers display your content with no gaps around it.Zeroing margins and padding on all elements Although the previous block of code is clean and efficient, it isn’t something I use in my websites. The reason for this is that browsers place default (and sometimes varying) margins around various elements other than the page’s body, too. Therefore, my CSS boilerplates always include the following: *{ margin: 0; padding: 0; } The selector, *, is the universal selector, and the declaration therefore applies to all ele- ments on the web page. In other words, add this rule to your CSS, and all default margins and padding for all elements are removed, enabling you to start from scratch in all browsers and define explicit values for those elements that need them.Working with CSS shorthand for boxes Both of the previous two code examples use CSS shorthand, and this is something that is useful to get to grips with, in order to create the most efficient and easy-to-update CSS. The previous example showed how to set all margins and padding values to 0, and this was done in shorthand instead of writing out every single value. How CSS shorthand works for boxes is like this: 43

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN A single value (margin: 10px;): This is applied to all edges. Two values (margin: 10px 20px;): The first setting (10px) is applied to the top and bottom edges. The second setting (20px) is applied to both the left and right edges (20px each, not in total). Three values (margin: 10px 20px 30px;): The first setting (10px) is applied to the top edge. The second setting (20px) is applied to both the left and right edges. The third setting (30px) is applied to the bottom edge. Four settings (margin: 10px 20px 30px 40px;): Settings are applied clockwise from the top (i.e., top: 10px; right: 20px; bottom: 30px; left: 40px). Shorthand’s benefits become obvious when comparing CSS shorthand with the equivalent properties and values written out in full. For instance, the following shorthand #box { margin: 0; padding: 0 100px; } looks like this when written out in full: #box { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 100px; padding-bottom: 0; padding-left: 100px; } Whether or not you use shorthand is up to you. Some designers swear by it and others because of it. Some web design applications have options to “force” shorthand or avoid it entirely. I reckon it’s a good thing: CSS documents are usually more logical and shorter because of shorthand. But if you don’t agree, feel free to keep on defining margins and padding as relevant for every edge of every element. Setting a default font and font color As mentioned earlier, the body start tag was historically used to house attributes for deal- ing with default text and background colors, link colors, and background images. In CSS, link styles are dealt with separately (see Chapter 5). We’ll look at how to apply back- grounds later in this chapter. At this point, it’s worth noting that, when working with CSS, the body selector is often used to set a default font family and color for the website. We’ll discuss working with text in more depth in the next chapter, but for now, check out the following CSS:44

WEB PAGE ESSENTIALS body { 2 font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; background-color: #ffffff; }This is straightforward. The font-family property sets a default font (in this case,Verdana) and fallback fonts in case the first choice isn’t available on the user’s system. Thelist must end with a generic family, such as sans-serif or serif, depending on your otherchoices. The fonts are separated by commas in the list, and if you’re using multiple-wordfonts, they must be quoted (\"Courier New\", not Courier New).The color property’s value defines the default color of text throughout the site. In thepreceding example, its value is #000000, which is the hexadecimal (hex) value for black(when defining colors in CSS, it’s most common to use hex values, although you can usecomma-separated RGB values if you wish). It’s also advisable where possible to add a back-ground color for accessibility; in this case, the background color is #ffffff—hex forwhite.Although it’s possible to set a default size (and other property values) fortext in the body declaration, we’ll leave that for now, and instead explorehow best to do so in the following chapter.Web page backgrounds Web page backgrounds used to be commonplace, but they became unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With text being as hard to read onscreen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic background (or worse) on the poor reader, too. But, as affordable monitors continue to increase in size and resolution, designers face a conundrum. If they’re creating a liquid design that stretches to fit the browser window, text can become unreadable, because the eye finds it hard to scan text in wide columns. And if they’re creating a fixed-width design, large areas of the screen often end up blank. It’s for the latter design style that backgrounds can be useful, both in drawing the eye to the content and providing some visual interest outside of the content area. Like most things related to design, the use and style of backgrounds is subjective, but some rules are worth bearing in mind. The most obvious is that a background should not distract from your content. If you’re using background images, keep them simple, and when you’re using color, ensure that the contrast and saturation with the page’s back- ground color is fairly low, but the contrast with the text content over the background is very high. Also, unless you’re using a subtle watermark, it’s generally bad form to put com- plex images underneath text (a soft gradient or simple geometric shape can sometimes be OK, however)—the low resolution of the Web means it’s harder to read text than the 45

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN print-based equivalent, and you don’t want to make this even tougher! Also, because back- grounds are typically ancillary content, they should not significantly increase the loading time of the page. Web page backgrounds in CSS Backgrounds are added to web page elements using a number of properties, as described in the sections that follow. background-color This property sets the background color of the element. In the following example, the page’s body background color has been set to #ffffff (which is hex for white): body { background-color: #ffffff; } background-image This property sets a background image for the relevant element: body { background-image: url(background_image.jpg); } By using this CSS, you end up with a tiled background, as shown in the following image. background-repeat The properties explored so far mimic the range offered by deprecated HTML attributes, but CSS provides you with control over the background’s tiling and positioning. The background-repeat property can take four values, the default of which is repeat, creating the tiled background just shown.46

WEB PAGE ESSENTIALSIf background-repeat is set to no-repeat, the image is shown just once, as in the follow-ing illustration. 2If this property is set to repeat-x, the image tiles horizontally only.And if the property is set to repeat-y, the image tiles vertically only.background-attachmentThis property has two possible values: scroll and fixed. The default is scroll, in whichthe background works as normal, scrolling with the rest of the page. If you set the value tofixed, the background image remains stationary while the remainder of the page scrolls. 47

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN background-position This property’s values set the origin of the background by using two values that relate to the horizontal and vertical position. The default background-position value is 0 0 (the top left of the web page). Along with keywords (center, left, and right for horizontal positioning; center, top, and bottom for vertical positioning), you can use percentages and pixel values. It’s possible to use a combination of percentages and pixel sizes, but you cannot mix keywords with either. Therefore, it’s recommended that designers stick with using percentages and pixel values—after all, keyword positioning can be emulated with numbers anyway (left top being the same as 0 0, for instance). When setting values, they should always be defined in the order horizontal-vertical. When using keywords, it’s also recommended to use the order horizontal-vertical, because both percentage- and pixel-based background positioning use this order, and it’s simpler to remember a single rule. In the following example, the background would be positioned on the left of the web page and positioned in the vertical center of the content: body { background-image: url(background_image.gif); background-repeat: no-repeat; background-position: left center; } Again, when using percentages or pixel values, the first value relates to the horizontal posi- tion and the second to the vertical. So, to create the equivalent of the keyword example, you’d use the following CSS: body { background-image: url(background_image.gif); background-repeat: no-repeat; background-position: 0 50%; } Note, however, when using background-position with the body element, that browsers disagree slightly on where the background should be positioned vertically if the page content isn’t taller than the viewing area. Internet Explorer and Safari assume the body is the full view area height when there’s no content, thereby setting an image with a background-position value of 50% 50% directly in the center of the viewing area. Firefox and Opera instead assume the body has an effective height of 0, thereby placing the back- ground vertically at the top of the view area (in fact, you only see the bottom half). For consistency across browsers in this case, you can define both background-position and background-attachment (as fixed), although this means the background will not scroll with the page content. CSS shorthand for web backgrounds As when defining margins and padding, you can use shorthand for web background values, bundling them into a single background property, although it’s worth stating that the shorthand value overrides any previous settings in a CSS file for individual background48

WEB PAGE ESSENTIALSproperties. (For instance, if you use individual settings to define the background image, 2and then subsequently use the shorthand for setting the color, the background image willmost likely not appear.)When using shorthand, you can set the values in any order. Here’s an example: body { background: #ffffff url(background_image.gif) no-repeat fixed 50% ¯ 10px; }Generally speaking, it’s best to use shorthand over separate background properties—it’squicker to type and easier to manage. You also don’t have to explicitly define every one ofthe values; if you don’t, the values revert to their defaults. Therefore, the following isacceptable: body { background: #ffffff url(background_image.gif) no-repeat; }Because the background-attachment value hasn’t been specified, this background wouldscroll with the page, and because the background-position value hasn’t been defined, thebackground would be positioned at 0%, 0%—the top left of the browser window.Web page background ideas Before finishing up this section on web page backgrounds, we’ll run through some exam- ples that show the CSS and the result, along with the background image used. The files within the basic-boilerplates folder can be used as starting points for web pages and CSS documents. The images used in each case are in the chapter 2 folder of the download files, and these should be placed in the same folder as the HTML and CSS document, unless you amend path values accordingly. Rename the files as appropriate for each example, ensuring you import the relevant CSS file via the HTML document’s @import line. For the HTML document, add several paragraphs within the existing div element that has an id value of wrapper, as in the following code block (which, for space reasons, shows only a single truncated paragraph—add more than this!): <div id=\"wrapper\"> <p>...</p> </div> In CSS, there are also some common elements to add to the boilerplate. For the #wrapper rule, add some padding to ensure the content within doesn’t hug the box’s edges, and a background rule to color the box’s background white. Also, the width value defines the width of the box’s content, while the margin settings center the box horizontally. (The method will be discussed further in other chapters, but by setting 0 auto as the margin values, vertical margins are removed and horizontal margins are set to auto, which center the box horizontally in the browser window.) 49

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN #wrapper { padding: 18px; background: #ffffff; width: 500px; margin: 0 auto; } Note that in the download files, in order to keep things modular there are two #wrapper rules in the CSS, and that’s what’s assumed in the previous code block. However, if you prefer, add the property/value pairs from the previous code block to the style sheet’s existing #wrapper rule. The same is true for many of the rules, such as the body rules in the following subsections. Files at this point, ready for the following examples, are available in the chapter 2 folder of the download files (at www.friendsofed.com/downloads.html), named backgrounds-default.html and backgrounds-default.css. Adding a background pattern The following CSS can be used to add a patterned, tiled background to your web page: body { background: #ffffff url(background-tile.gif); } The following screenshot shows a page with a diagonal cross pattern, although you could alternatively use diagonal stripes, horizontal stripes, squares, or other simple shapes.50

WEB PAGE ESSENTIALSNote that if you remove many of the paragraphs from the web page, the white back-ground color ends with the content, since in CSS a container’s size by default onlystretches to that of its content.Drop shadows 2The following image shows a page with a content area and drop shadow.This effect was achieved by creating the depicted background image and tiling it vertically.In the body rule, the position was set to 50% 0 in order to position the background cen-trally on the horizontal axis. The background color of the web page is the same as the solidbackground on the image itself, and so the image and color seamlessly blend. body { background: #878787 url(background-drop-shadow.gif) 50% 0 repeat-y; }Regarding the white area of the image, this is 536 pixels wide. This is because the wrapperdiv’s width was earlier set to 500 pixels, and its padding value was set to 18 pixels. As youwill remember from the box model information from the previous chapter, padding isadded to the dimensions of a box, and so the overall width taken up by the wrapper divis 536 pixels (18 + 500 + 18 = 536).A drop shadow that terminates with the contentIn the previous example, the white background of the content area is part of the image.Therefore, if you remove most of the paragraphs in that example, the background stays asit is, tiling vertically to the height of the viewing area. Using a different method, you caninstead have the background terminate with the content. 51

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Some additional markup is needed, due to this method requiring two background images: one for the wrapper div (because, as per the white background in the “Adding a back- ground pattern” section, you want the content area’s background to stop when the con- tent runs out) and one for a shadow for the bottom edge of the wrapper div (otherwise the shadows at the side will just stop dead, resulting in something like what’s shown in the following image). In terms of markup, add an empty div, as shown in the following code block: ? accumsa'n eu, blandit sed, blandit a, eros.</p> <div class=\"contentFooter\"><!-- x --></div> </div> </body> </html> In CSS, for the drop shadows flanking the content area to stop where the content does, they need to be assigned to the wrapper div, not the web page’s body. Therefore, you need to amend the body rule, removing the link to a background, but retaining the color setting: body { background: #878787; } The #wrapper rule needs updating in two ways. First, the new background image needs to be applied to the div—hence the new background property/value pair. However, because the drop shadows are now shown within the wrapper div, it needs to take up more hori- zontal space. Since the dimensions of the div’s content don’t need changing, this is achieved by increasing the horizontal padding value. Also, because padding at the foot of the div is no longer required (the contentFooter div effectively takes care of padding at the bottom of the content area), the bottom padding value needs to be set to 0. These padding values are done in shorthand, as per the method outlined in the “Working with CSS shorthand for boxes” section earlier in this chapter. #wrapper { padding: 18px 36px 0; background: url(background-drop-shadow-2.gif) 50% 0 repeat-y; width: 500px; margin: 0 auto; }52

WEB PAGE ESSENTIALSFinally, the contentFooter div needs styling. Its height is defined on the basis of the 2height of the background image (which is a slice of the Photoshop document shown in thefollowing image). The background is applied to the div in the same way as in previousexamples.One major change, however, is the use of negative margins. The contentFooter div isnested within the wrapper, which has 36 pixels of horizontal padding. This means that thecontentFooter div background doesn’t reach the edges of the wrapper div by default,leaving whitespace on its left and right sides. By using margins equal to the negative valueof this padding, the div can be “stretched” into place. .contentFooter { height: 20px; background: url(background-drop-shadow-2-footer.gif) 50% 0; margin: 0 -36px; }As you can see, the horizontal value for margin is -36px, the negative of the horizontalpadding value assigned to #wrapper. The addition of all these new rules results in the fol-lowing image (which also shows the Photoshop image and exported GIF that makes up thebackground).An alternate method for getting this effect would be to place the contentFooter div out-side of the wrapper and then use the same method of aligning it: .contentFooter { width: 500px; height: 20px; background: url(background-drop-shadow-2-footer.gif) 50% 0; 53

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN padding: 0 36px; margin: 0 auto; } In order to ensure the background of the wrapper joins up with the shadow on the contentFooter div, a single pixel of bottom padding needs to be applied to the #wrapper rule: #wrapper { padding: 18px 36px 1px; background: url(background-drop-shadow-2.gif) 50% 0 repeat-y; width: 500px; margin: 0 auto; } Gradients Tiled gradient images can be used to add depth and visual interest, without sapping resources (the example’s image is under 2 KB in size). The depicted example is based on the page from the “Drop shadows” section. The changes are an amendment to the back- ground pair in the #wrapper rule, tiling the gradient image horizontally on the wrapper’s background, and new padding settings, so the text doesn’t appear over the gradient. #wrapper { padding: 36px 18px 18px; background: #ffffff url(background-gradient.gif) repeat-x; width: 500px; margin: 0 auto; }54

WEB PAGE ESSENTIALSWatermarks 2Although it’s common for sites to be centered in the browser window, many designerschoose left-aligned sites that cling to the left edge of the browser window. Both designstyles are perfectly valid, but in an era of rapidly increasing monitor resolutions, you canend up with a lot of dead space to the side of a fixed-width left-aligned design. And whilesome of you might be saying, “Well, create flexible-width designs, then!” some designsaren’t suited to that, and text-heavy sites tend to work better with fairly narrow textcolumns, since most users find it hard to read very wide blocks of text.All of this brings us to the final example in this chapter, which shows how to create water-marks for a web page. In the following screenshot, the wrapper div is to the left, with abackground image to the right of this area.To achieve this effect, the margin property/value pair in the #wrapper rule has beenremoved, and the following rule has been added: body { background: #878787 url(background-watermark-large.gif) no-repeat ¯ 536px 0; } As mentioned earlier in the chapter, this assumes you’re adding a second body rule. You can, however, just add the background property/value pair to the existing body rule in the style sheet. 55

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN The image used is a transparent GIF, so the background color setting was made a medium- gray (#878787). The reasoning behind using a transparent GIF is explained in Chapter 4, but it relates to web browsers sometimes interpreting colors differently from graphics packages. Therefore, it’s often easier to make the flat background color of a graphic trans- parent and then use the web page background color in place of it. The repeat setting is set to no-repeat, because we don’t want the image to tile. Finally, the background’s position is set to 536px 0. The 0 setting means it hugs the top of the browser window, while the 536px setting means the image is placed at 536 pixels from the left. This is because the content area was earlier defined as 500 pixels wide with 18 pixels of padding, and 18 + 500 + 18 = 536. As mentioned earlier, backgrounds can be added to any web page element. For instance, you can add a watermark to the wrapper div by using the following CSS: #wrapper { padding: 18px; background: #ffffff url(background-watermark.gif) no-repeat 20px ¯ 20px; width: 500px; } This adds the background-watermark.gif image to the background of the content div, and positions it 20 pixels from the top and 20 pixels from the left. Again, no-repeat is used to stop the image from tiling. In either case for the watermark backgrounds, the images scroll with the page content. However, watermarks can also work well as fixed backgrounds—this can be achieved by adding the fixed value to the background property in the body and #wrapper rules.56

WEB PAGE ESSENTIALSCompleted examples of all of the web pages in this section are in thechapter 2 folder in the download files.Closing your document 2 Back at the start of this chapter, we examined basic HTML and XHTML documents. Regardless of the technology used, the end of the document should look like this: </body> </html> There are no variations or alternatives. A body end tag terminates the document’s content, and an html end tag terminates the document itself. No web page content should come after the body end tag, and no HTML content should come after the html end tag (white- space is fine, and it’s common practice with server-side technologies to put functions after the html end tag—just don’t put any HTML there). Also, you must only ever have one body and one head in an HTML document, as well as a single html start tag and a single html end tag. This is important stuff to bear in mind, and even if you think it’s obvious, there are millions of pages out there—particularly those that utilize server-side includes and server-side languages—that include multiple body tags and head tags, have content outside the body tag, and have HTML outside the html tag. Don’t do this in your own work.Naming your files Each designer has their own way of thinking when it comes to naming files and documents. Personally, I like to keep document names succinct, but obvious enough that I can find them rapidly via a trawl of my hard drive. Certain conventions, however, are key: all file names should avoid illegal characters (such as spaces), and it’s good to be consistent throughout your site. I find that naming files in lowercase and replacing spaces with hyphens—like-this-for-example.html—works well. Web designers have historically used underscores in place of spaces, but that causes problems with some search engines, some of which run-in keywords, effectively considering the words within the file name as one string. This doesn’t happen with hyphens. 57

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Commenting your work The rules for HTML, CSS, and JavaScript comments are simple, but the actual characters used are different in each case. HTML comments begin with <!-- and end with -->, and can run over multiple lines, as follows: <!-- this is a comment in HTML --> <!-- Multiple-line HTML comment --> In XHTML, double hyphens should not occur within the comment itself. Therefore, the fol- lowing is not valid XHTML: <!-- This is invalid -- as is the comment below --> <!---------------------------------------------------------> The multiple-hyphen comment is commonly used by designers who favor hand-coding to separate large chunks of code within a document. When working in XHTML, you can replace the hyphens with a different character: <!--oooooooooooooooooooooooooooooooooooooo--> <!--================================--> CSS comments were covered in the “Creating boilerplates” section of Chapter 1, but we’ll briefly look through them again; they’re opened with /* and closed with */ and, like HTML comments, can run over multiple lines, as shown here: /* This is a comment in CSS */ /* Multiple-line CSS comment */ Multiple-line comments in JavaScript are the same as in CSS, but single-line comments are placed after double forward slashes: // This is a single-line JavaScript comment. Don’t use comments incorrectly. CSS comments in an HTML document won’t be problem- atic from a rendering standpoint—but they will be displayed. HTML comments in CSS can actually cause a CSS file to fail entirely.58

WEB PAGE ESSENTIALSAlong with enabling you to comment your work, comments can be used to disablesections of code when testing web pages.Web page essentials checklist 2 Congratulations—you made it to the end of this chapter! I’m aware that some of this one was about as much fun as trying to work out complex quadratic equations in your head, but as mentioned at the start, you need to know this stuff. Imagine designing a site and it suddenly not working the way you thought it would. It looks fine in your web design pack- age and also in some web browsers, but it starts falling apart in others. Just removing an XML declaration might be enough to fix the site. If you take the elements of this chapter and form them into a simple checklist, you won’t have to risk displaying those wonderful “Untitled Documents” to the entire world (or inad- vertently advertising the package you used to create the page). To make your life easier, you can refer to this checklist: 1. Ensure the relevant DOCTYPE declaration and namespace is in place. 2. Remove the XML declaration if it’s lurking. 3. Add a title tag and some content within it. 4. Add a meta tag to define your character set. 5. If required, add keywords and description meta tags. 6. Attach a CSS file (or files). 7. Attach a JavaScript file (or files). 8. If your web editor adds superfluous body attributes, delete them. 9. Ensure there are no characters prior to the DOCTYPE declaration or after the html end tag. 10. Ensure no web page content appears outside the body element. 59



3 WORKING WITH TYPE

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN In this chapter: Working with semantic markup Defining font colors, families, and other styles Understanding web-safe fonts Creating drop caps and pull quotes Rapidly editing styled text Working to a grid Creating and styling lists An introduction to typography Words are important—not just what they say, but how they look. To quote Ellen Lupton, from her book Thinking with Type, “Typography is what language looks like.” Language has always been symbolic, although the origins of such symbols (of certain letterforms relating to, for example, animals) has largely been lost in written English; instead, we now have rather more abstract symbols designed for repetition on the page or screen. However, from the early calligraphy that was created by hand, through the movable type (invented in Germany by Johannes Gutenberg during the 15th century) that enabled mass- production printing via molded letterform casts, to the most advanced desktop-publishing software available today, the ultimate aim of type has been one of record and information provision. In other words, type itself is important from a design standpoint because it needs to record whatever information is being written about, and that information needs to be easily retrievable by anyone who wants to understand it. Like all aspects of design, typography has massively evolved over the years, particularly over the past couple of decades, where computers have enabled designers to more rapidly experiment with lettering. Despite this, many conventions formed much earlier still have a part to play: Myriad fonts exist, and each one has a different look, and therefore a different “feel;” you need to choose the most appropriate one for your purpose. (This is fur- ther complicated by there being only a certain number of web-safe fonts, as you’ll see later.) Headings, strap-lines/stand-firsts (the introductory line that introduces a piece of text, commonly used in editorial articles), and crossheads (short subheadings that break up areas of body copy) should stand out, and the prominence of each piece of text should be related to its level of importance (in other words, a crosshead shouldn’t be more prominent than a main heading). Footnotes often use text smaller than the main body copy text to signify their lesser significance to the main text, but nonetheless provide useful supplementary information.62

WORKING WITH TYPE Decorative elements can be used to draw the reader’s attention to 3 specific parts of the text. Drop caps and initials—large initial let- ters, flamboyant in classical typography, but typically more restrained in modern work (see right)—enable a reader to rapidly navigate to the beginning of a piece of text. Pull quotes—quotes from the main body of the text, displayed in large lettering outside of context—are often used in magazine articles to draw a reader’s attention to a particular article, highlighting particularly interesting quotes or information. Spacing is just as important as content. Kerning—the spacing between letter pairs—can be increased to add prominence to a heading. Leading—the amount of added vertical spacing between lines of text—can also be adjusted. Increasing lead- ing from its default can make text more legible. In books, a baseline grid is often employed, ensuring that text always appears in the same place on each page. This means that the text on the opposite side of the paper doesn’t appear in the gaps between the lines on the page you’re reading. Baseline grids often make for extremely pleasing vertical rhythm, and are regularly used in print publications; they’re infrequently used online, but can nonetheless be of use, making a page of text easier to read and navigate. Columns can be used to make a page easier to read. This is common in newspapers and magazines; online, the low resolution of monitors, and the (current) lack of being able to auto-flow columns of text makes de facto text columns impractical, but the reasoning behind columns is still handy to bear in mind. Generally, it’s con- sidered easier to read text that has fairly narrow columns (although not too narrow—if there are too few characters, reading and comprehension slow down)— text that, for example, spans the entire width of a 23-inch monitor rapidly becomes tiring to read. There are no hard-and-fast rules when it comes to line length, although some go by the “alphabet-and-a-half” rule (39 characters per line), some advocate the “points-times-two” rule (double the point size and use the number for the number of characters), and others recommend a dozen or so words, or about 60 characters.A few highly useful online resources for web typography can be found at the followinglocations: The Elements of Typographic Style Applied to the Web: www.webtypography.net/ Five Simple Steps to Better Typography: www.markboulton.co.uk/articles/detail/ five_simple_steps_to_better_typography/ Five Simple Steps to Designing Grid Systems: www.markboulton.co.uk/articles/ detail/five_simple_steps_to_designing_grid_systems/When it comes to web design, some conventions are used, and others are ignored. In fact,while web designers take the utmost care to get layouts right, scant few give the samethought to text, merely choosing a font and arbitrarily setting other values, if they setthem at all. Once, this could be excused, but CSS has enabled web type to come a longway, and although the same degree of control as print-based type isn’t possible, you cando a lot more than just choose your preferred font for headings and body copy. 63

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN In this chapter, we’ll take a look at the various components available when working on web-based type (including elements and CSS properties), and provide some exercises, the results from which you can use for the basis of your own sites’ type. As a final note in this introduction, it’s also worth mentioning spelling and grammar. Both of these are clearly way outside of the scope of this book, but they’re things designers tend to overlook. A site with a lot of grammatical and spelling errors, especially in larger text (such as headings and pull quotes) looks unprofessional. If in doubt when working on sites, consult (or get your client to consult) a copywriter. There are a couple of books worth digging out for more information on typography and language. A decent primer on type design is Helen Lupton’s Thinking with Type. For an entertaining (if not entirely accurate) history of the English language, read Bill Bryson’s The Mother Tongue. Styling text the old-fashioned way (or, why we hate font tags) Styling text online used to be all about font tags. When Netscape introduced the font ele- ment—complete with size and color attributes—web designers wept tears of joy. When Microsoft announced it would go further, adding a face attribute (enabling you to specify the font family), web designers were giddy with anticipation. But things didn’t go accord- ing to plan. Page sizes bloated as designers created pages filled with fonts of myriad sizes and colors. Web users looked on aghast, wondering whether giant, orange body copy was really the way to go, and whether it was worth waiting twice as long for such abominations to download. More important, it became apparent that font tags caused problems, including the fol- lowing: Inconsistent display across browsers and platforms The requirement for font tags to be applied to individual elements Difficulty ensuring fonts were consistent site-wide, because of having to style indi- vidual elements HTML geared toward presentation rather than logical structure Large HTML documents due to all the extra elements In addition, working with font tags is a time-consuming, boring process, and yet some (although, thankfully, increasingly few) web designers remain blissfully ignorant of such problems. In my opinion, if font tags weren’t HTML elements, I’d suggest they be taken out back and shot. Today, there is no reason whatsoever to stick with them. Text can be rapidly styled site-wide with CSS and, as we’ll see later in this chapter, CSS provides you with a greater degree of control than font tags ever did. More crucially, font tags encour- age badly formed documents, with designers relying on inline elements to style things like headings, when there are perfectly good HTML elements better suited to that purpose.64

WORKING WITH TYPEHTML should be reserved for content and structure, and CSS for design. Web pages shouldbe composed of appropriate elements for each piece of content. This method of working,called semantic markup, is what we’re going to discuss next.A new beginning: Semantic markup 3 Essentially, “semantic markup” means “using the appropriate tag at the relevant time,” and well-formed semantic markup is an essential aspect of any website. The following is an example of the wrong way of doing things—relying on font tags to create a heading and double line breaks (<br /><br />) for separating paragraphs: <font size=\"7\" color=\"red\" face=\"Helvetica\">Article heading</font> <br /><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet ¯ elementum erat. Integer diam mi, venenatis non, cursus a, ¯ hendrerit at, mi. <br /><br /> Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis ¯ et, venenatis at, velit. Ut sodales lacus sed eros. The likelihood of this displaying consistently across browsers and platforms is low. More important, the tags used don’t relate to the content. Therefore, if the styling is removed, there’s no indication regarding what role each element plays within the document struc- ture and hierarchy—for instance, there would be no visual clues as to the importance of the heading. Also, the use of double line breaks (<br /><br />) instead of paragraph tags means the “paragraphs” cannot be styled in CSS, because there’s nothing to inform the web browser what the content actually is. Instead, the example should be marked up like this: <h1>Article heading</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ¯ aliquet elementum erat. Integer diam mi, venenatis non, cursus ¯ a, hendrerit at, mi.</p> <p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, ¯ mattis et, venenatis at, velit. Ut sodales lacus sed eros.</p> Here, the heading is marked up with the relevant tags, and paragraph elements are used instead of double line breaks. This means the page’s structural integrity is ensured, and the markup is logical and semantic. If attached CSS styles are removed, the default formatting still makes obvious to the end user the importance of the headings, and will visually dis- play them as such. In this section, we’ll look at how to mark up paragraphs and headings, explore logical and physical styles, and discuss the importance of well-formed semantic markup. 65

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Paragraphs and headings With words making up the bulk of online content, the paragraph and heading HTML ele- ments are of paramount importance. HTML provides six levels of headings, from h1 to h6, with h1 being the top-level heading. The adjacent image shows how these headings, along with a paragraph, typically appear by default in a browser. <h1>Level one heading</h1> <h2>Level two heading</h2> <h3>Level three heading</h3> <h4>Level four heading</h4> <h5>Level five heading</h5> <h6>Level six heading</h6> <p>Default paragraph size</p> By default, browsers put margins around para- graphs and headings. This can vary from browser to browser, but it can be controlled by CSS. Therefore, there’s no excuse for using double line breaks to avoid default paragraph margins affecting web page layouts. Despite the typical default sizes, level-five and level-six headings are not intended as “tiny text,” but as a way to enable you to structure your document, which is essential, as headings help with assistive technology, enabling the visually disabled to efficiently surf the Web. In terms of general usage, it’s generally recommended to stick to just one h1 element per document, used for the page’s primary heading. The next level down—and the first level in a sidebar—would be h2, and then h3, and so on. Take care not to use too many heading levels, though—unless you’re working on complex legal documents, you really shouldn’t be getting past level four. If you are, look at restructuring your document. Logical and physical styles Once text is in place, it’s common to add inline styles, which can be achieved by way of logical and physical styles. Many designers are confused by the difference between the two, especially because equivalents (such as the logical strong and physical b) tend to be displayed the same in browsers. The difference is that logical styles describe what the con- tent is, whereas physical styles merely define what the content looks like. This subtle dif- ference is more apparent when you take into account things like screen readers. In the markup I like to <em>emphasize</em> things, a screen reader emphasizes the text surrounded by the em tags. However, replace the em tags with i tags and the screen reader won’t emphasize the word, although in a visual web browser the two pieces of markup will almost certainly look identical.66

WORKING WITH TYPEStyles for emphasis (bold and italic) 3Physical styles enable you to make text <b>bold</b> and <i>italic</i>, and these arethe most commonly used inline physical styles. However, logical styles are becoming muchmore widespread (the majority of web design applications, such as Dreamweaver,now default to logical styles rather than physical ones). Typically, <strong>strongemphasis</strong> emboldens text in a visual web browser and <em>emphasis</em> itali-cizes text.Deprecated and nonstandard physical stylesMany physical elements are considered obsolete, including the infamous blink (aNetscape “innovation” used to flash text on and off, amusingly still supported in Firefox).Some physical styles are deprecated: u (underline) and s (strikethrough; also strike) haveCSS equivalents using the text-decoration property (text-decoration: underline andtext-decoration: line-through, respectively).The big and small elementsThe big and small elements are used to increase and decrease the size of inline text (eventext defined in pixels in CSS). An example of the use of small might be in marking up textthat is semantically small print. An example of big might be to denote that a drop cap is abig character, or for when adding asterisks to required form fields. <input type=\"text\" name=\"realname\" size=\"30\" /> <big>*</big>Note, however, that the change in size depends on individual web browsers, so it’s oftenbetter to use span elements with a specific class relating to a font size defined in CSS (seethe section “Creating alternatives with classes and spans” later in the chapter), or ensurethat you define specific values in CSS for small and big elements when used in context.Teletype, subscript, and superscriptThis leaves three useful physical styles. The first, tt, renders text in a monospace font (à lateletype text). The others, sub and sup, render text as subscript and superscript text,respectively. These are useful for scientific documents, although there is a drawback: char-acters are displayed at the same size, defined by the browser. You can get around this byusing a CSS tag selector and defining a new font size for each element. The following codeshows how to do this, and the accompanying screenshot shows a default sup element (atthe top of the image) and a CSS-styled sup element (at the bottom) in use. sup { font-size: 70%; } 67

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Logical styles for programming-oriented content Several logical styles do similar jobs, are programming-oriented, and are usually displayed in a monospace font: <code>Denotes a code sample.</code> <kbd>Indicates text entered by the user.</kbd> <samp>Indicates a programming sample.</samp> The var element also relates to programming, signifying a variable. However, it is usually displayed in italics. Block quotes, quote citations, and definitions The blockquote element is used to define a lengthy quotation and must be set within a block-level element. Its cite attribute can be used to define the online location of quoted material, although the cite element is perhaps more useful for this, enabling you to place a visible citation (a reference to another document, such as an article) online; this is usu- ally displayed in italics. See the “Creating drop caps and pull quotes using CSS” section for more on using this element. Note that some web design applications—notably, early versions of Dreamweaver— used the blockquote element to indent blocks of text, and this bad habit is still used by some designers. Don’t do this—if you want to indent some text, use CSS. For shorter quotes that are inline, the q element can be used. This is also supposed to add language-specific quotes before and after the content between the element’s tags. These quotes vary by browser—Firefox adds “smart” quotes, Safari and Opera add “straight” quotes, and Internet Explorer doesn’t display anything at all. The article “Long Live the Q Tag,” by Stacey Cordoni (available at A List Apart; www.alistapart.com/articles/qtag), offers a few workarounds, although none are ideal (one advises using JavaScript; another uses CSS to hide the quotes in compliant browsers, and then says to add the quotes man- ually, outside of the element’s tags. However, another alternative is to merely ensure that the quoted content is differentiated from surrounding text, which can be done by setting font-style in CSS to italic for the q element. Finally, to indicate the defining instance of a term, you use the dfn element. This is used to draw attention to the first use of such a term and is also typically displayed in italics. Acronyms and abbreviations Two logical styles assist with accessibility, enabling you to provide users with full forms of abbreviations and acronyms by way of the title attribute: <abbr title=\"Cascading Style Sheets\">CSS</abbr> <acronym title=\"North Atlantic Treaty Organization\">NATO</acronym> This has two uses. For one, it allows users with disabilities (using screen readers) to access the full form of the words in question. But anyone using a visual web browser can access68

WORKING WITH TYPEthe information, too, because title attribute contents are usually displayed as a tooltip 3when you hover your mouse over elements they’re used on.To further draw attention to an abbreviation or acronym, style the tag inCSS (using a tag selector), thereby making all such tags consistent acrossan entire website. The following code is an example of this, the results ofwhich are shown in the example to the right (including the tooltip trig-gered by hovering over the abbr element, which has a title attribute). abbr { border-bottom: 1px dotted #000000; background-color: yellow; }You can provide an additional aid to users by setting cursor to help inCSS for abbr elements. This changes the cursor to a question markwhile hovering over the element.Elements for inserted and deleted textThe del and ins elements are used, respectively, to indicate deleted text and inserted text,typically in a manner akin to the tracking features of word processing packages, althoughthey do not include the tracking functionality. The del element usually appears in strike-through format, whereas ins usually appears underlined. Both accept cite and datetimeattributes. The former enables you to define a URL that explains why text was inserted ordeleted; the latter enables you to define the time and date that the text was amended—see the <ins> and <del> entries in Appendix A (XHTML Reference) for accepted formats.Note that these elements cannot be nested inside each other, for obvious reasons.Following is an example of their use: <p>I <del>deleted this</del> and then <ins>inserted this</ins>.</p>The default style of the ins element can prove problematic online. Because links areunderlined by default, users may attempt to click text marked up as inserted text andwonder why nothing happens. It’s a good idea to amend the tag’s visual appearance bychanging the underline color. This can be done by removing the default underline andreplacing it with a bottom border, like so: ins { text-decoration: none; border-bottom: 1px solid red; } 69

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN The bottom border resembles an underline, although it appears lower than the default underline, which further differentiates inserted text from hypertext links. The importance of well-formed markup Many logical styles are rarely used online, because they look no different from text marked up using the likes of the i element. However, as mentioned earlier, physical appearance alone misses the point of HTML. Always using the most appropriate relevant element means that you can later individually style each element in CSS, overriding the default appearance if you wish. If the likes of citations, defining instances, and variables are all marked up with i instead of cite, dfn, and var, there’s no way of distinguishing each type of content and no way of manipulating their appearance on an individual basis. Well-formed markup involves more than ensuring visual flexibility, though. Use of the cite tag, for instance, enables you to manipulate the Document Object Model (DOM) to extract a bibliography or list of quotations from a page or even a full website. The ability to style logical tags like this with CSS is likely to be of increasing rather than diminishing importance. The importance of end tags While we’re on the subject of well-formed markup, we’ll revisit the importance of end tags. As mentioned earlier, XHTML demands that all tags be closed. Most browsers let you get away with ignoring some end tags, though, such as on paragraphs. Some designers may still have bad habits from working with HTML, for which many end tags are optional. Omit many others at your peril. For instance, overlook a heading element end tag and a browser considers subsequent content to be part of the heading and displays it accordingly. As shown in the following image, two paragraphs are displayed as a heading because the ear- lier heading element lacks an end tag. A similar problem occurs when you accidentally omit end tags when using logical and physical elements. For instance, forget to close an emphasis element and the remainder of the web page may be displayed in italics. Some designers when hand-coding create both start and end tags at the same time, and then populate the element with content, ensuring end tags are not forgotten.70

WORKING WITH TYPEStyling text using CSS 3 HTML is intended as a structural markup language, but the Web’s increasing popularity meant it got “polluted” with tags designed for presentation. This made HTML more com- plex than it needed to be, and such tags soon became a headache for web designers try- ing to style page elements, such as text. In the bad ol’ days (the end of the 1990s), you’d often see source code like this: <font face=\"Helvetica\" size=\"3\" color=\"#333333\"> This markup is ¯ <font size=\"+3\"><small>really </small></font>bad, but it was sort of ¯ the norm in the 1990s.</font> WYSIWYG tools would insert new tags to override previous ones, adding to the page weight and making it tough to ensure visual consistency site-wide. By and large, CSS erad- icates these problems and enables far more control over text, as you’ll see in the following sections. This is a boon for graphic designers who used to loathe HTML’s lack of typographical con- trol. However, the level of freedom evident in print design still isn’t quite so on the Web. Restrictions imposed by browsers and the screen must be taken into account, such as it being harder to read type onscreen than in print. This is largely related to resolution. Even magazines with fairly low-quality print tend to be printed at around 200 dpi or more— more than twice the resolution of a typical monitor. This means that very small text (favored by many designers, who think such small text looks neat) becomes tricky to read onscreen, because there aren’t enough pixels to create a coherent image. I’ll note restrictions such as this at appropriate times during this section on styling text with CSS, thereby providing advice on striking a balance between the visual appearance and practicality of web-based text.Defining font colors In CSS, the color property value defines the foreground color of the relevant CSS ele- ment, which for text sets its color. This can be set using hex, keywords, or RGB. The fol- lowing examples show each method in turn, and all have the same result: setting paragraphs to black. p{ color: #000000; } p{ color: black; } p{ color: rgb(0,0,0); } 71

THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN Declaring colors using RGB is rare in web design—hex is most popular, especially because CSS supports so few keywords (see the section “Working with hex” in Chapter 4). Remember to test your choices on both Windows and Mac, because there are differences in the default color space for each platform. In general terms, the Mac default display set- tings are brighter (or Windows is darker, depending on your outlook on life); if you use subtle dark tones on the Mac, or very light tones on Windows, the result might be tricky to view on the other platform. This should cause few problems with text, but some designers insist on rendering text with very little contrast to the background color, and this ends up being even harder to read on a different platform from the one on which it was created. The main tip to keep in mind for color with regard to web-based text is simple: always provide plenty of contrast so that your text remains readable. Defining fonts The font-family property enables you to specify a list of font face values, starting with your preferred first choice, continuing with alternates (in case your choice isn’t installed on the user’s machine), and terminating in a generic font family, which causes the browser to substitute a similar font (think of it as a last resort). selector { font-family: preferred, alterate 1, alterate 2, generic; } The most common generic font family names are serif and sans-serif, although when you’re using monospace fonts (such as Courier New), you should end your list with monospace. Multiple-word font family names must be quoted (such as \"Trebuchet MS\" and \"Times New Roman\"). You can use single or double quotes—just be consistent. Single-word font family names should never be quoted. Examples of font-family in use are as follows: h1 { font-family: Arial, Helvetica, sans-serif; } p{ font-family: Georgia, \"Times New Roman\", Times, serif; } pre { font-family: Courier, \"Courier New\", Monaco, monospace; }72