"Hey, I know what to do," Claude said, taking back control from Anita. "You just use the toolbar buttons to change fonts and colors, just like in a word processor." Claude showed us what he meant by selecting a heading and clicking buttons on the toolbar to make the text larger and center it on the page.
"You're right, Claude," I said, "that's the simplest way to do things. But it's not the best way."
"Because you're not letting the browser do the work for you," I explained. "Why change the font size and color for each and every heading? The browser knows it's a heading, so tell the browser how you want the headings displayed and let it worry about the details."
"Huh," he said, "I guess that makes sense. Makes it easier to change your mind, too, right?"
"Exactly!" I answered, glad he understood it. "You tell the browser once how to display all the page elements used by your site. If you don't like something, you just change it in one placethere's no need to edit every single page."
"Those are the styles you mentioned before," Stef said. "Like Word's styles."
"Very much like those," I agreed, "except that Word styles define structure and presentation rules. In a Web page, the two concepts are separate: The page elementsthe tagsdefine the structure, and the styles define how to present that structure. Let me show you what I mean."
Defining Your Own Styles
"As you might already guess," I said as I took control of the computer again, "your browser comes with a set of predefined styles for displaying page elements. You can usually change these styles to suit your own needs, such as making the default fonts larger or using different colors for links. As a Web page designer, however, you can define new styles to control how your pages look in the browser. In most cases, your styles take precedence."
"But visitors can always force the browser to use their preferences, right?" Anita asked.
CSS Ideas
The site http://cssvault.com/ showcases many Web sites that make creative use of cascading style sheets. It's a good place to check for design ideas.
"Right," I said. "You're not in total control. If visitors can't read your site because the fonts are too small, they're not going to care how much work you put into the design. They'll make the text bigger so they can read it. That's only fair. But only a very small percentage of your visitors will do that. Most will use the styles you define and see the site the way you meant it to be seen."
"Hey!" Stef said, "can you use the styles to control how a page is printed?"
"Yes, you can," I answered. "Why do you ask?"
"Because sometimes when I print a Web page it doesn't look at all like what it does on the screen," she explained.
"That's the other advantage to using styles," I said. "You can define different rules for displaying the page versus printing the page." Turning to the monitor, I opened Nvu's Tools menu and selected the CSS Editor menu item. "Since styles are different from page elements, you use a different editor to create them. This editor is called a CSS editor. CSS stands for cascading style sheets, which is the geek term for a set of Web-page styles." There was a new window on the screen titled "CSS Stylesheets" (Figure 6.16). "This editor makes it all pretty simple, so don't get caught up with the terminology."
Figure 6.16. Nvu's style editor.
"The first thing you want to do," I continued, "is uncheck the Expert Mode checkbox at the bottom left-hand corner…there. Now you click the Rule button to create a new style rule." I did, and the editor prompted me for some details about the rule (Figure 6.17). "Let's change the way headings are displayed by creating a style that applies to all the Heading 1 page elements. You need the tag name for this, which you can get from either the HTML Tags view or the Source view of the HTML page. The tag for Heading 1 is 'h1.' Now I click the Create Style rule button to create an empty rule for h1 tags. OK, Claude, why don't you take over from here?" I shifted seats with Claude.
Figure 6.17. Creating a new style rule.
"What do I do now?" he asked.
"Look through the tabs on the right-hand side and change some of the properties," I answered.
"OK," he said as he clicked the Text tab, "I want the heading to be a nice green. Can I type the name of a color here?" Claude pointed to the input field labeled "Color."
"Try it," I said.
Safe Colors
Not all colors look the same in every browser. For an explanation of "browser-safe colors," examples of color charts, and more info on Web color, see www.websitetips.com/color/.
Claude typed "green" into the field. "Hey! It worked! Look at the heading!" He moved the editor window aside so we could see that the heading had indeed changed to green.
"Click the button next to the color field," I suggested. He did, and a color picker popped up (Figure 6.18). "If you can't name the color you want, just pick it here to create a special code for it."
Figure 6.18. The color picker.
"I'm OK with just green for now," Claude said, dismissing the color picker. "But the typeface needs to be altered." Pausing, he looked closely at the options that were available. "What's a predefined font family? Is that what I want?"
"Probably," I answered. "A font family is a font or typeface name. Actually, it's a list of font names. Since not every font is available on all computers, you supply a list of fonts, and the visitor's browser goes through the list, looking for a match. The last name on the list is usually a generic one, like serif, sans-serif, or monospace, that the browser can always match to an existing font on the system." Claude was playing with the drop-down list of predefined font values as I said this (Figure 6.19).
Figure 6.19. Setting text-related properties.
Free Fonts
Need free fonts? There are many places on the Web to look. For starters, try www.fontfreak.com/ or www.fontfile.com/.
"All right," he said, "I'll choose one of the predefined values. Looks good. How do I put a line underneath it?" I told him there were two choices: He could underline just the words in the heading or else draw a line from one side of the browser window to the other. He wanted the latter, so he clicked the Borders tab and added a solid bottom border one pixel high. "Great! I think that's enough for the heading, but the subheading also needs to change. So I add a new rule for it, right?" I nodded. "All right…I'll add a rule for h2…change the font…set the color to black for variety…there!"
"You're almost done, I think," I said.
"I'd like a border around the whole page, though."
"OK, you need two rules for that," I said. "The first rule is for the body tag. Set the background color and the font." He set the color to light blue and the font to the same as the headings. "Now click the Rule button, but this time, instead of a page element style, you're going to add a named style called 'content.'" (see Figure 6.20).
Figure 6.20. Creating a named style.
"Now set its background color to white and then move to the Box page. This page is pretty complicated, but basically you're just here to set some margins. Set the margin values to 10px each'px' is the abbreviation for pixel. Set the top and bottom padding values to 2px and the left and right padding to 10px. Then close the CSS editor."
"Nothing's different," he said.
"First you have to add a couple of lines in the Source view," I said. "Here, let me show you." After switching to the Source view, I added a div taga division markerat the start of the body and the matching end tag at the end of the body (Figure 6.21). Then I switched back to the Normal view.
Figure 6.21. Adding a div tag to the page body.
"Hey!" Stef said. "That looks a lot better! What did you do?"
"A named style defines properties that you can apply to all different kinds of tags," I explained, "and the div tag basically just encloses whatever is inside it. By applying the content style to the div tag, we put a white box around and behind all the tags and text contained by the div tag. Now let's save and publish the page." After doing this, I reloaded the www.voip-at-home.com home page in a browser window (Figure 6.22).
Figure 6.22. The ning my head. "We've only fixed one page. The about page is still the same."
"Looks like we're done!" said Claude.
Sharing Styles across Pages
"Not quite," I said, shaking my head. "We've only fixed one page. The about page is still the same."
"So you need to copy the styles to it as well," Anita said.
"Yes, but there's an easier way to do it. Right now the styles we added to the home page are actually commands in the Web page. This is called an embedded or internal style sheet. We need to move them to a separate file, an external style sheet. Then multiple pages can link to it and share the style definitions."
"So the pages will all look the same," Stef concluded.
"Right," I agreed, "and if you want to change things across all pages, there's only one place to go." Turning back to the screen, I brought up the CSS editor again. "Luckily, Nvu makes it really easy to switch from an internal style sheet to an external style sheet. On the left-hand side of the window, click the internal stylesheet button, then click the button on the right-hand side called 'Export stylesheet and switch to exported version.'" The button was rather lengthy and hard to miss (Figure 6.23). "Nvu asks you for a file name, so enter 'styles.css' or something similar, as long as it ends with .cssthat's how the system knows it's a style sheet. And be sure to save the file in the same folder as your HTML pages."
Figure 6.23. Switching to an external style sheet.
"So now you're done?" Claude asked.
"Not yet," I answered, "because the style sheet isn't being referenced properly. Right now it's being loaded as a local file on your hard drive, which won't work after you publish it to the Web site. So we close the CSS editor again and switch to the Source view. Do you see the new link tag? You just need to change the href value in the tag to 'styles.css' by itself." (See Figure 6.24.)
Figure 6.24. Changing the link tag.
"So do you just copy the link tag to the about page?" Stef asked.
"Yes," I said, "but don't forget to add the div tag there too." I made the changes to the about page and then saved both pages. "There. Now we publish the pages. See how the style sheet is being copied up now?" (See Figure 6.25.)
Figure 6.25. The style sheet is published with the page.
Moving back to the browser window, I reloaded the about page at www.voip-at-home.com/about.html (Figure 6.26). "There," I said, "now we're done."
Figure 6.26. The style sheet applied to the about page.
No comments:
Post a Comment