7.1. Styles: An IntroductionA 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 StylesOnce 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 stylesStyles can be applied at three basic levels:
7.1.2. Style SelectorsInline 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 selectorsYou 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 selectorsYou may need to define a style for an individual element on a page, like a particular image or (as you'll learn in Chapter 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 chapter in the "Applying a Class Style" section on Section 7.4.2). |