206 LESSON 8: Using CSS to Style a Site I explain how to alter the link colors shortly One of the main advantages of taking this approach, aside from the fact that it’s how the standard says you should things, is that then you can put the style into a linked style sheet and set the background color for your whole site on one page Many layouts require that elements be flush with the edge of the browser In these cases, you need to set the margin to for your tag Some browsers enabled you to this with proprietary attributes of the tag, but they’re not reliable To turn off margins, just use this rule: body { margin: 0px; } Links You already know how to adjust the colors of elements on a page, but links are a bit different They’re more complicated than other types of elements because they can exist in multiple states: an unvisited link, a visited link, an active link, and a link that the user currently has the pointer over As you can see, there’s one more state here than has been traditionally reflected in the tag Using CSS, you can change the color of a link when the user mouses over it (referred to as the hover state) as opposed to when he’s currently clicking it (the active state) Another advantage of CSS is that you can change the color schemes for links on the same page, rather than being forced to use one scheme throughout Finally, you can turn off link underlining if you want For example, here’s a style sheet that turns off link underlining for navigation links, renders them in boldface, and keeps the same color for visited and unvisited links: a:link { color: blue; } a:active { color: red; } a:visited { color: purple; } a:hover { color: red; } a.nav { font-weight: bold; text-decoration: none; } a.nav:hover, a.nav: active { background-color: yellow; color: red; } a.nav:link, a.nav:visited { color: green; } From the style sheet, you can see that for all tags in the class nav, the text-decoraproperty is set to none, which turns off underlining, and font-weight is set to bold For tags on the rest of the page, the underlining remains on, but I’ve set it up so that when the mouse is over the links, they turn red For navigation links, when the mouse is over the links, the background of the element turns yellow and the text turns red tion Download from www.wowebook.com Workshop CAUTION You can use pretty much any property you like with the pseudoselectors for links, and browsers that support them will dynamically reflow the page to accommodate the change However, changes that affect the size of the element (such as boldfacing the text dynamically or increasing the font size) can be jarring to users, so use them cautiously 207 Summary In the preceding lessons, I’ve given you a taste of how to use CSS You didn’t get the full flavor because I used them only within the context of the style attribute of tags In this lesson, I discussed how you can create style sheets either as part of a page or as a standalone file that can be included by any page I also moved beyond properties that discuss text formatting to explain how to use CSS to lay out an entire page By understanding how browsers render pages and how you can affect that process using CSS, you can achieve the effects you want without writing loads of markup that’s difficult to understand and maintain You’ll continue to be introduced to new CSS properties in the lessons that follow In Lesson 9, I explain how to use CSS to change colors on the page, and provide all the details on using CSS to define the backgrounds of pages and specific elements Lesson 13 takes a deeper look at CSS selectors and explains how to create entire page layouts using CSS Workshop In this lesson, you learned about Cascading Style Sheets, the wonderful supplement to HTML that makes formatting your pages less painful Throughout the rest of this book, I use CSS where appropriate, so please review this workshop material before continuing Q&A Q My CSS isn’t working like I’d expect What should I do? A CSS probably doesn’t seem that clear in the first place, and things can only get messier when you actually start applying styles to your pages You should be sure to test your pages in every browser you can find, and don’t be afraid to experiment Just because something seems like it should work doesn’t mean it will The W3C also provides a CSS Validator (http://jigsaw.w3.org/css-validator/) that you can use to make sure that your CSS syntax is correct You should probably use it all the time, but even if you don’t, it can still help out if you get stuck Download from www.wowebook.com 208 LESSON 8: Using CSS to Style a Site Q Are there naming rules for classes and IDs? A Yes, there are A name must start with a letter, and can contain only letters, numbers, or dashes (-) Some browsers may not enforce these rules, but to be safe, you should adhere to them Q What are the relevant CSS standards? A There are three CSS recommendations from the W3C: CSS1, CSS2, and CSS3 Most modern browsers support a large part of CSS1 and CSS2, as well as parts of CSS3 You can find out more at http://www.w3.org/Style/CSS/ If you’re curious about how well your browser supports CSS or the effect that properties have in real browsers, you can check out the CSS test suites at http://www.w3.org/Style/CSS/Test/ CSS2 and CSS3 include a number of additional selectors They are discussed in Lesson 13 Quiz Why can’t absolute units be used reliably in CSS? True or false: Including style sheets on your page requires features provided by a web server How the absolute and relative positioning schemes differ? Is the margin or padding of an element inside the border? How you lay out your page so that elements positioned statically appear above elements that are positioned absolutely? Quiz Answers Absolute units have problems in CSS because there’s no way to know exactly what sort of display medium the user has An inch on one monitor might be completely different than an inch on another The answer is false; you can use the tag to load external style sheets with- out involving the web server in any way The relative positioning scheme places elements relative to the previous element on the page, whereas the absolute positioning scheme places the element exactly where you tell it to on the page The padding of an element is inside the border of an element, and the margin is outside Download from www.wowebook.com Workshop 209 This is a trick question You cannot put statically positioned elements above absolutely positioned elements However, if you change the statically positioned elements so that they use the relative positioning scheme, you can alter their stacking layer using the z-index property Exercises If you’ve already created some web pages, go back and try to figure out how you could apply CSS to them Examine the style sheets used by some websites that you admire Take a look at how they use classes and IDs in their markup Create a web page that includes a sidebar on the left, with text wrapped around it Create a navigation menu at the bottom that is positioned below the sidebar Download from www.wowebook.com This page intentionally left blank Download from www.wowebook.com LESSON Adding Images, Color, and Backgrounds Few things can more to make a Web page more interesting than a strategically placed image or an attractive color scheme Effective use of images and color is one of the key things that separates professionally designed sites from those designed by novices The process of selecting images, resizing them and saving them in the proper format, and integrating them into a page can be intimidating, but this lesson explains how it’s done This lesson covers the following topics: n The kinds of images you can use in web pages n How to include images on your web page, either alone or alongside text n How to use images as clickable links n How to set up and assign links to regions of images using clientside imagemaps n How to provide alternatives for browsers that can’t view images n How to change the font and background colors on your web page n How to use images for tiled page backgrounds n How and when to use images on your web pages n A few tips on image etiquette Download from www.wowebook.com 212 LESSON 9: Adding Images, Color, and Backgrounds Images on the Web Images displayed on the Web should be converted to one of the formats supported by most browsers: GIF, JPEG, or PNG GIF and JPEG are the popular standards, and every graphical browser supports them PNG is a newer image format that was created in response to some patent issues with the GIF format and is widely used, too Many other image formats are supported by some browsers and not others You should avoid them Let’s assume that you already have an image you want to put on your web page How you get it into GIF or JPEG format so it can be viewed on your page? Most image editing programs, such as Adobe Photoshop (http://www.adobe.com/), iPhoto (http://apple.com/), Picasa (http://picasa.google.com/) and GIMP (http://gimp.org/), convert images to most of the popular formats You might have to look under the option for Save As or Export to find the conversion option There are also freeware and shareware programs for most platforms that nothing but convert between image formats Many shareware and demo versions of image-editing programs are available at http://www.download.com/ Look under Image Editing Software in the Digital Photo Software section There are also online photo editors available at http://pixlr.com and http://picnik.com TIP If you’re a Windows user, you can download IrfanView, which enables you to view images and convert them to various formats, at http://www.infanview.com/ It also provides a number of other image-manipulation features that are useful for working with images for the Web Best of all, it’s free for noncommercial use Remember how your HTML files need an html or htm extension to work properly? Image files have extensions, too For PNG files, the extension is png For GIF files, the extension is gif For JPEG files, the extensions are jpg and jpeg CAUTION Some image editors try to save files with extensions in all caps (.GIF or JPEG) Although they’re the correct extensions, image names are case-sensitive, so GIF isn’t the same extension as gif The case of the extension might not be important when you’re testing on your local system, but it can be when you move your files to the server So, use lowercase if you can Download from www.wowebook.com Image Formats 213 Image Formats As I just mentioned, three image formats are supported by every major web browser: GIF, JPEG, and PNG JPEG and GIF are the old standbys, each useful for different purposes PNG was designed as a replacement for the GIF format, which was necessary after Unisys invoked its patent rights on the GIF format (The patent has since expired.) To design web pages, you must understand and apply both image formats and decide which is appropriate to use in each case GIF Graphics Interchange Format, also known as GIF or CompuServe GIF, was once the most widely used image format It was developed by CompuServe to fill the need for a cross-platform image format NOTE GIF is pronounced jiff, like the peanut butter, not with a hard G as in gift Really—the early documentation of GIF tools says so The GIF format is actually two similar image formats: GIF87, the original format, and GIF89a, which has enhancements for transparency, interlacing, and multiframe GIF images that you can use for simple animations The GIF format is okay for logos, icons, line art, and other simple images It doesn’t work as well for highly detailed images because it’s limited to only 256 colors For example, photographs in GIF format tend to look grainy and blotchy The problem is that with the limited color palette, it’s hard to create smooth color transitions JPEG JPEG, which stands for Joint Photographic Experts Group (the group that developed it), is the other popular format for images on the Web JPEG (pronounced jay-peg) is actually a compression type that other file formats can use The file format for which it’s known is also commonly called JPEG JPEG was designed for the storage of photographic images Unlike GIF images, JPEG images can include any number of colors The style of compression that JPEG uses (the compression algorithm) works especially well for photographs, so files compressed using the JPEG algorithm are considerably smaller than those compressed using GIF JPEG uses a lossy compression algorithm, which means that some of the data used in the image Download from www.wowebook.com 214 LESSON 9: Adding Images, Color, and Backgrounds is discarded to make the file smaller Lossy compression works extremely well for photographic data but makes JPEG unsuitable for images that contain elements with sharp edges, such as logos, line art, and type JPEG files are supported by all major web browsers If you’re working with photos to display on the web, you should save them in the JPEG format PNG PNG, pronounced “ping,” was originally designed as a replacement for GIFs It stands for Portable Network Graphics Only the oldest browsers don’t support PNG natively Current browsers all support PNG, and it has some important advantages over GIF (and to a lesser extent over JPEG) Like GIF, it is a nonlossy image format No information about the image is lost when it is compressed It has better support for transparency than GIF and supports palette-based images (like GIF) and true-color and grayscale images (like JPEG) In other words, you don’t have to worry about color usage with PNG, although limiting color usage can result in smaller files More and more sites use the PNG format for images, but due mainly to inertia, GIF and JPEG are still the most common formats The good news is that nearly all graphics tools these days support PNG If you’re creating new images that aren’t photographs, PNG is the format to use Inline Images in HTML: The Tag After you have an image ready to go, you can include it on your web page Inline images are placed in HTML documents using the tag This tag, like the and tags, has no closing tag in HTML For XHTML and HTML5, you must add an extra space and forward slash to the end of the tag to indicate that it has no closing tag The tag has many attributes that enable you to control how the image is presented on the page Some attributes have been deprecated in favor of Cascading Style Sheets (CSS) NOTE To use the tag in an XHTML-compliant fashion, you need to close it, like this: Download from www.wowebook.com Inline Images in HTML: The Tag 215 The most important attribute of the tag is src, which is the URL of the image you want to include Paths to images are specified in the same way as the paths in the href attribute of links So, to point to a GIF file named image.gif in the same directory as the HTML document, you can use the following XHTML tag: For an image file one directory up from the current directory, use this XHTML tag: And so on, using the same rules as for page names in the href part of the tag You can also point to images on remote servers from the src attribute of an tag, just as you can from the href attribute of a link If you want to include the image example.gif from www.example.com on your web page, you could use the following tag: CAUTION Just because you can use images stored on other servers for your own web pages doesn’t mean that you should A lot of legal, ethical, and technical issues are involved with using images on other sites I discuss them later in this lesson Adding Alternative Text to Images Images can turn a simple text-only web page into a glorious visual feast But what happens if someone is reading your web page using a text-only browser? What if she has image loading turned off so that all your carefully crafted graphics appear as generic icons? All of a sudden, that visual feast doesn’t look quite as glorious There’s a simple solution to this problem By using the alt attribute of the tag, you can substitute something meaningful in place of the image on browsers that cannot display it In text-only browsers, such as Lynx, graphics that are specified using the tag in the original file usually are displayed as the word IMAGE with square brackets around it, like this: [IMAGE] If the image itself is a link to something else, that link is preserved The alt attribute in the tag provides a more meaningful text alternative to the blank [IMAGE] for your visitors who are using text-only web browsers or who have graphics turned off on their browsers The alt attribute contains a string with the text you want to substitute for the graphic: Download from www.wowebook.com ... the relevant CSS standards? A There are three CSS recommendations from the W3C: CSS1 , CSS2 , and CSS3 Most modern browsers support a large part of CSS1 and CSS2 , as well as parts of CSS3 You can... http://www.w3.org/Style /CSS/ If you’re curious about how well your browser supports CSS or the effect that properties have in real browsers, you can check out the CSS test suites at http://www.w3.org/Style /CSS/ Test/... http://www.w3.org/Style /CSS/ Test/ CSS2 and CSS3 include a number of additional selectors They are discussed in Lesson 13 Quiz Why can’t absolute units be used reliably in CSS? True or false: Including