Cascading Style Sheets, or CSS, have advanced the cause of Web design enormously. With CSS, an author gains greater control over what each page looks like. Style sheets contain specific typographic and color controls to improve your site's appearance, and most of these CSS tools surpass regular HTML formatting capabilities. But styles go beyond controlling text and color. You can also use styles to do things like precisely position images and add margin and alignment settings to page elements. Best of all, you can apply style sheets to many pages at once. By implementing site-wide changes on the style sheet only, you won't need to edit each and every page. If you frequently need to update the look of your site, CSS can save you loads of time.
As you learn to implement styles in this sophisticated manner, you'll be amazed at the power Cascading Style Sheets bring to your bag of tricks. This tutorial will introduce you to styles and teach you to create, modify, and apply them across a page or an entire Web site.
When HTML receives its lifetime achievement award from the World Wide Web Academy, it surely won't be for the gorgeous documents it helped produce. As you learned in Tutorial 2, HTML's layout capabilities are pretty limited. So now that you understand basic HTML formatting, you're probably wondering how some Web sites manage to look so sleek.
Cascading Style Sheets, or CSS, have advanced the cause of Web design enormously. With CSS, an author gains greater control over what each page looks like. Style sheets contain specific typographic and color controls to improve your site's appearance, and most of these CSS tools surpass regular HTML formatting capabilities. But styles go beyond controlling text and color. You can also use styles to do things like precisely position images and add margin and alignment settings to page elements. Best of all, you can apply style sheets to many pages at once. By implementing site-wide changes on the style sheet only, you won't need to edit each and every page. If you frequently need to update the look of your site, CSS can save you loads of time.
As you learn to implement styles in this sophisticated manner, you'll be amazed at the power Cascading Style Sheets bring to your bag of tricks. This tutorial will introduce you to styles and teach you to create, modify, and apply them across a page or an entire Web site.
A style is a group of formatting specifications identified by a name. You can create a style and then apply it to characters, paragraphs, images, tables, or HTML tags.
For example, you can create a style for a paragraph that specifies maroon 10-pt Verdana font on a yellow background. And you can keep on goingby setting spacing before and after the paragraph, making it right aligned, and even giving it a border. Once you're done creating your style, you pick a name for itMaroon-VerdanaGrafs, for exampleand then you can apply it to any paragraph with a click.
If you've worked with programs like Microsoft Word or Adobe FrameMaker, you may be familiar with this method of applying a style to specific elements. Similarly, in FrontPage, styles help you centralize the formatting of your Web pages. For instance, if you want all your Heading 1 paragraphs to be blue, you could apply blue color style to the <H1> tag using an external style sheet (more on the particular types of style sheets in a moment). After doing this only once in the style sheet, you'd then be able to change all the Heading 1 paragraphs throughout your site. Any paragraph with an <H1> tag anywhere in your site would then be blue.
Styles are that powerful, but the technology behind them isn't very complicated. A style is just a rule (or group of rules) for formatting some HTML. Rules are written in simple text, as in this example, which specifies that all Heading 1 paragraphs should be blue:
H1 {color: blue}
Note: Some older browsers don't support CSS. Both Netscape Navigator and Internet Explorer supported CSS as of their 4.0 releases. In earlier versions of these browsers, your pages display fine, just without the styles.
7.1.1. The Scope of Your Styles
Once you create a style, you might wonder whether its rules extend to every page throughout your site. That depends on where you create a style rule. These snippets of text can live within the HTML on an individual page, or within a separate style sheet. As you'll see, location is everything.
7.1.1.1 Inline, embedded, and external styles
Styles can be applied at three basic levels:
Inline styles apply directly to one specific HTML tag on a page and affect whatever text the tag contains. Inline styles control only one element at a time. The style rule lives within the element's HTML tag.
Embedded styles (sometimes called internal styles) apply to an entire page. You'll use an embedded style to control elements across a whole page. These kinds of style rules live between the page's <head> tags (Section 3.3).
External styles apply to multiple pages. These types of style rules live within a separate file called a style sheet. A style sheet is a simple text file (whose file extension is .css) composed of nothing but rules. Any Web pages that you link to a style sheet adopt the formatting rules contained within the style sheet. You can use external styles to control elements across multiple pages or even your entire site.
| UP TO SPEED Creating an Inline Style |
You've actually already created an inline style. You often do so when you apply formatting to an HTML tag. To see this for yourself, create a hyperlink Section 3.2.1). Right-click the link, select Hyperlink Properties, and then click Style. Click Format <a style="color: #FF0000" href="info.htm"> Click here</a> But FrontPage doesn't always create an inline style when you apply formatting. For instance, when you select some text and pick a font or color, FrontPage applies a <font> tag containing your formatting. The <font> tag adds extraneous decorative information that's considered outside the bounds of HTML, so it's losing favor on the Web (mostly because authors are always looking for ways to trim code out of their pages so they'll download as quickly as possible). Inline styles aren't much better than the <font> tag, as they still clutter your document with presentation details. But once you implement page- and site-level styles, you'll use inline styles only to override these other settings. |
7.1.2. Style Selectors
Inline style rules are stored inside an element's tag, so a browser knows immediately what element they affect. When you work with embedded and external styles, on the other hand, you need to specify which elements the styles will control. To do so, you'll use a selector. Selectors are just different methods for telling FrontPage where to apply a style. There are a few different types of selectors.
7.1.2.1 Tag selectors
You can apply a style to any HTML tag, such as <H1>, <H2>, <p>, <table>, <a>, <li>, and even the <body> tag.
Look again at this sample style rule, which you might put in either an embedded or an external style sheet:
H1 {color: blue}
The style actually begins with the selector information, which is the <H1> tag. This is an example of a tag selector. In other words, this style rule is saying: Hey, browser. Wherever you find an <H1> tag (on this page, if you're using embedded styles; or throughout a collection of pages, if you're using an external style sheet), make it blue.
7.1.2.2 Class selectors (user-defined styles)
The ability to apply styles to tags gives you a lot of formatting power, but it doesn't cover all bases. You may also have your own unique text elements that don't have tags associated with them but which require their own distinctive style. For example, say you created a page to display a collection of t-shirts and you want to give all the shirt descriptions a uniform, special style all their own.
In this case, you'll have to create your own custom style, name it, and then go into your pages and manually apply the style name to each shirt description. Web professionals call these tags class selectors. FrontPage sometimes calls class selectors user-defined styles.
7.1.2.3 ID selectors
You may need to define a style for an individual element on a page, like a particular image or (as you'll learn in Tutorial 8) a layer. This type of selector uses an element's ID (located within its HTML tag) to apply a style to it. Unlike the other style selectors, FrontPage doesn't make it easy to create an ID selector even though the program supports applying styles to IDs. You might never need to use this selector. But if you do, and the ID is missing, you'll have to create it manually (which you'll learn how to do later in this tutorial in the "Applying a Class Style" section on Section 7.4.2).
When you create a style, you're really just creating style rules. If you want, you can type rules directly into a style sheet or into an HTML file. But, once again, there's no need tax your keyboardFrontPage walks you through the rules-creation process with its Style dialog box. You'll use the Style dialog box to create a style, set formatting, and even preview the effects.
7.3.1. Creating a Style
Whether you're creating an embedded (page-level) or external (site-level) style, the process is the same. Begin by opening the HTML page or style sheet and selecting Format 
Style. The Style dialog box displays (Figure 7-2), which you'll use to set the characteristics of a style and to name it.
|
To create a new style:
Choose a style selector so that FrontPage knows what element this style will modify.
If you're applying a style to an HTML tag, select the tag from the list and click Modify.
If you're creating a class (user-defined) style (Section 7.1.2), click New.
Confirm or name the selector.
If you selected Modify in step 1, confirm that the tag you want to modify appears in the Selector Name field.
If you selected New in step 1, type in a name for your class selector (don't use any spaces in the name). Class selector names always need to be preceded by a period, but FrontPage inserts this for you automatically. Use the drop-down listbox on the right to specify whether the style will apply to paragraphs or characters.
Define the style.
Click Format to display a list of style properties (see Figure 7-3). Each of these selections opens a dialog box, which lets you set specific formatting. For details on all your formatting options, see "Setting Style Properties" on Section 7.3.2.1.
Figure 7-3. Click Format to display the Style Properties menu, which lets you control a style's settings for things like position, border and shading, and font style.
Save the style.
To confirm that you've created a new style, you can click the List drop-down menu below the Styles pane and select User-Defined Styles. Your new style should appear in the Styles pane. (Switch between the tags and styles lists at any time, using the List drop-down menu.) Click OK to save and close the dialog box.
| BEHIND THE SCENES Embedded Styles in HTML |
Embedded style rules are stored inside the <head> tags of a Web page (Section 3.3). To see what an embedded style looks like, switch to Split or Code view and locate the <head> tags. Nested within the <head> tags are <style> tags. For instance, if you created an embedded style to make hyperlinks red, you'd see this: <style>
<!--
a { color: #FF0000 }
-->
</style>
As you can see here, FrontPage does you the favor of placing embedded style rules within comment tags (<!-- and -->) as a safety measure. Why? Browsers never display tex-within comment tags, so coders use this trick to hide style rules from browsers that can't display CSS. Otherwise, the rules might appear as text within older browsers. Embedded styles work only for the pages in which they're stored. If you want to copy an embedded style to another page, just copy the HTML code. To do so, select the <style> tags and their contents, copy, and then paste the selection into the <head> section of another Web page. If you find yourself frequently copying styles between pages in that way, you're probably better off using an external style sheet. |
7.3.2. Setting Style Properties
Cascading Style Sheets provide many more formatting options than plain old HTML. Click Format within the Style dialog box (Section 7.3) to launch the style properties dialog boxes that are described next.
7.3.2.1 Fonts
The Font dialog box (see Figure 7-4) is pretty similar to the one you get by selecting Format Font. Some optionslike Strong, Emphasis, and othersare missing here, because those are HTML-specific tags, whereas the ones in this dialog box show all the options CSS gives you.
Tip: To remove underline formatting from all your hyperlinks, modify an <a> tag style font by turning on the No Text Decoration checkbox.
|
While CSS gives you a few new font formatting options, the basic rules that govern how text displays within a browser still apply. If you select a font that's not loaded on a viewer's system, the browser replaces it with a similar font (or what it thinks is a similar font). Again, stick to the common fonts you learned about back on Section 2.3.
| WORKAROUND WORKSHOP Adding Font Families |
A font won't display in a browser, unless a viewer has that font on his system. A lot of Web designers get around this problem by specifying a family, or group of similar fonts, from which a browser can choose. That way, if a viewer doesn't have the first font in the list, the browser loads the second, or third font, and so on. While this is a common practice, FrontPage doesn't give you an easy way to include these font families. Your only option is to type alternative fonts in your style sheet yourself. The program does give you a small head start, though. When you add a font to a style sheet, it appears like this: h1 { font-family: Verdana }
What you need to do is type additional fonts after your first font and separate them with commas. (If the family name includes a space, be sure to enclose it in quotation marks.) You'll end up with something like this: h1 { font-family: Verdana, Arial,
Helvetica, sans-serif; }
h2 { font-family: "Book Antiqua", "Times
New Roman", serif; }
How do you know which font family to use? An old-school, ink-stained finger designer would probably tell you the following: Serif fonts, like Times New Roman, feature small flourishes at the ends of each letter to help lead a reader's eye to the next letter. This makes these Serif fonts easier, especially when it comes to long paragraphs. Sans-serif fonts don't have these flourishes, or serifs, and are more often used as headings due to their bold, blocky appearance. Those guidelines were gospel back in the days of print-only typesetting. But Web authoring has changed the rules of font selection. Reading on a pixilated screenthat is, one made up of thousands (or millions) of tiny dotsdiffers from reading print on paper. Because a screen pixilates (renders in little squares) serifs, they're actually harder to read on a computer screen. Most Web designers therefore now use a sans-serif font, like Verdana, for large passages of text. |
7.3.2.2 Paragraph
FrontPage's CSS paragraph settings are identical to those you saw on FrontPage's regular paragraph format dialog box (Section 2.4.2). In fact, when you're editing a Web page and select Format Paragraph, you actually create an inline style. Setting paragraph spacing and alignment works the same on a style sheet, except that you get to apply it across your entire site, of course.
7.3.2.3 Border
You can set borders for any page element, including the entire body of a page, text, pictures, tables, rows, and cells. Speaking of cellsyou can also use the Border dialog box to set cell padding by creating a style for the <td> tag (Section 5.2) and editing the Padding fields. (As you learned in Tutorial 5, padding is the space between a border and its content.) Setting cell padding on a style sheet instead of on every table in your site can save you tons of time.
Want to set the background of a particular element? Just click the Shading tab. The Background Color field sets the color behind any elements you've specified. This might be the background of a cell, list, paragraph, or an entire pagedepending on the tag or selector you've chosen. Foreground Color sets the color of the element itself, like text.
The Shading tab also gives you more control than HTML property settings if you want to use background images. For example, if you don't want your picture to tile (appear multiple times when it's not big enough to fill the space), select No Repeat from the Repeat drop-down menu. You can also have the background picture scroll along with content by selecting Scroll within the Attachment drop-down menu. Neither of these settings is possible if you're just using HTML.
Note: Netscape Navigator 4.0 doesn't support most border background settings.
7.3.2.4 Numbering
Because you can control more than just numbering, a better title for this style properties dialog box might be Lists. You already know that numbered and bulleted lists work in pretty much the same way (Section 2.5.1). Use this styles dialog box to format both. As with the standard List Properties box, you can control the appearance of numbered or bulleted lists, and include picture bullets if you want.
7.3.2.5 Position
While you'll want to use HTML tables (Tutorial 5) for complex layout, CSS is better for controlling the positioning of individual elements.
CSS gives you two types of position control options:
Relative positioning places objects according to the position of elements that precede and follow them on the page (see Figure 7-5). HTML automatically arranges items relatively, sounless you've "absolutely positioned" an element (see below)everything on your pages should already be positioned relatively. But you can make adjustments here. For example, you can set wrapping (Section 4.3.3.2) and width options for relatively positioned objects.
Absolute positioning lets you set an exact location on your page's x-y axis for the placement of an object. For example, to position an image, click the Absolute button in the Position dialog box and set Top = 20 and Left = 40. This sets the location of the top-left corner of the image at 20 pixels from the top of the page and 40 pixels from the left side of the page. Be careful with absolute positioning. Text won't flow around an absolutely positioned item, but will appear behind or, if you specify, in front of it (see Figure 7-5).
|
You can position elements like paragraphs, images, and tables. Web developers use absolute positioning most often when they're working with layers. For detailed information on positioning layers and using other controls in the Position dialog box, see Tutorial 8.
Tip: Many developers are using CSS positioning to lay out pages instead of using tables. This is the next big wave in page design. Advantages include quicker page load times and easier access for handheld browsers like cellphones, which often can't read tables. While you can attempt this kind of layout in FrontPage 2003 using layers and CSS, many hope that the next FrontPage release will include features to make this method a lot easier.
The whole point of styles is to enhance your pages. Now that you've created a few styles, the last step is actually applying them to page elements. How you do so depends upon what kinds of styles you created.
Inline and embedded styles with tag selectors show up immediately without any further action on your part. FrontPage automatically applies the proper formatting to the specified tags. Steps for getting your external and user-defined styles onto your pages follow.
7.4.1. Linking to an External Style Sheet
If you want your pages to adopt external styles (Section 7.1.1), you've got to link your HTML pages to the style sheet that you've created. The fastest way to do this is to open a Web page in Design view, locate the .css file in your folder list, and drag it into the document window.
However, you probably want to link multiple Web pages to a particular sheet. To do so, first pop over to Folder view (Section 3.3). Select the page(s) that you want to follow the external style rules, and then select Format Style Sheet Links. A Link Style Sheet dialog box opens (Figure 7-6).
If you want to link all the pages in your Web site to the style sheet, click the "All pages" radio button.
To link just those you've selected, click "Selected page(s)."
Then click Add and browse to the style sheet file. Select it and click OK. You can add as many style sheets to your site as you want.
|
If a Web page you've linked to the style sheet is currently open in Design view, you'll immediately see it take on the new styles.
Note: If you're linking multiple pages, some may already have links to style sheets. If they're all linked to the same style sheet(s), no problem. But if separate pages have different style sheet links, FrontPage can't handle the confusion. The program displays a confirmation prompt, asking if you want to overwrite existing links. The prompt gives you an option to cancel, continue, or examine a links report to see what links are in place. If you choose to continue, FrontPage overwrites links for all pages with the new style sheets you choose.
If you don't like the effect, or chose the wrong style sheet, unlink it. Return to the Link Style Sheet dialog box, select the style sheet, and then click Remove.
7.4.2. Applying a Class Style
FrontPage automatically applies any styles you associate with a tag, but when you create a user-defined style (Section 7.1.2), you must manually apply it to elements on your Web page. To do this, it helps to have the Style toolbar active (View Toolbars Style).
You can apply styles in various ways. It all depends upon the target element.
To apply style to textfor example, say you want to apply a rule to every snippet of text that describes one of your productsselect the characters or paragraph that compose a description, and then do one of the following:
Select the style from the Style drop-down list on the Formatting toolbar.
Select the style from the Style toolbar's Class drop-down list.
Note: You can apply the style to only one selection at a time. In other words, if other types of text separate each product description, you won't be able to select all your product descriptions at once and apply the style. You'd have to select one chunk of text, apply the style, and repeat.
If the element is a picture, table, or layer, applying a style can be trickier. Try the method above, but if it doesn't work, you've got a couple other options:
Right-click and select the Properties option for the item, such as Picture Properties. Click the Style button in the Properties dialog box and make your selection from the Class drop-down list.
With the Style toolbar displayed, select the item. If an ID for the item appears in the toolbar's ID field (as in Figure 7-7), select it. Then select the style from the class drop-down list on the left.
Note: An ID is a unique label for an item that lives inside its HTML tag. FrontPage often creates IDs automatically. If the item has no ID, you can assign one. For details on creating an ID, see the box "ID Your Elements" on Section 9.4.5 in Tutorial 9.
|
7.4.3. Removing a Class Style
Perhaps you've grown bored with the pink boldface you've applied to the text throughout your site? The steps you need to take for removing a class style depend upon the element affected by the rule.
To remove a class style from text, select the text and select Format Remove Formatting.
Note: You must select all the text in order for this to work, even for a paragraph style. You can't just click inside a paragraph to remove a style (though that's all you need to do to apply one). You must select all the text the paragraph comprises.
To remove a class style from an image or table, right-click the object and then select the Properties option for the item, such as Picture Properties. Click the Style button in the Properties dialog box and delete the style from the Class drop-down list. Click OK to close and save settings in both dialog boxes. If that doesn't work, select the item, and then select Normal from the Style drop-down list.
So you've created an external style sheet and linked your HTML files to it, but you also have some embedded and inline styles on your Web pages. How do they all interact? Who's the chief stylist? To answer that question, first you have to get your head around the two basic tenets of style: inheritance and cascading.
7.5.1. Inheritance
Style inheritance, like human inheritance, passes from parent to child. In other words, style attributes of HTML elements pass styles onto smaller elements that they contain.
For example, say you've got a <p> paragraph style that calls for blue Verdana font. Within a paragraph that uses that style, there's a word you've italicized (using <i> italic tags). The italicized word, according to rules of inheritance, also gets the blue Verdana font.
As you design your site styles, keep this behavior in mind. Inheritance can save you a lot of work. For instance, if you want all the text on your site to appear as Tahoma font, don't set this attribute for each and every tag like <H1>, <H2>, <p>, and so on. Apply the style to your <body> tag and let the law of inheritance take over and do the work for you.
7.5.2. Cascading
Inheritance is easy enough to understand when you're thinking about parent-child style relationships (at least HTML ones). But what if you have conflicting style settings for the same element? Imagine that you've created an external style sheet and formatted <H2> as green, 12-point Verdana font. On one of your site's pages, you've embedded an <H2> style as red Times New Roman font. When a browser displays this page, it sees two different style settings for the very same tag. What's a browser to do? Simple. The browser displays the embedded, or page-level, style. The heading on that page shows up as red Times New Roman.
Style power structure dictates that the style closest to the element takes priority. Therefore, an inline style overrides an embedded or page-level setting, and a pagelevel setting overrides a site-wide or external style.
However, it gets a little more complicated than that. In the example above, not all properties conflicted with one another. Font size is specified on the external style sheet as 12 pt, but the embedded style specifies nothing. So, though the heading on that particular page follows the page-level rule, appearing in red Times New Roman, it takes the directive from the external style sheet to size the text at 12 point.
When you link multiple style sheets to the same Web page, cascading behaviors also apply. Within the Link Style Sheet dialog box, you can specify the order in which style sheets will be applied (see Figure 7-6). The style sheet on the top overrides those below it, just as an embedded style sheet overrides an external one. Style rules on the additional sheets can fill in the blanks as in the scenario above. Often, site developers create additional style sheets to hold style rules designated for a few specific pages in a site. These supplemental CSS files can work in harmony with a master style sheet.
Take advantage of the cascading behaviors: create general rules to control your site's overall appearance, and at the same time, use embedded or inline styles to customize individual pages.
discuss this topic to forum
