Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal Cascading Style Sheets (CSS) styles using the Property inspector or the CSS Styles panel and use the CSS Styles panel to apply and edit styles.

Cascading Style Sheets give you a great amount of flexibility in designing Web pages and sites, enabling you to create styles that you can use again and again throughout your site or in a variety of projects

Exercise 9 - Terms Cascading Style Sheets (CSS) – A collection of saved design style properties that you can apply easily to elements in your Web site. CSS is an HTML 4.0 specification that is supported by current browsers. CSS selector type – The type assigned to a CSS style that determines to which elements the style will be used. Choose among Class, ID, tag, or compound selector types.

Style – A rule that specifies how to format an HTML element such as text, an image, or a specific tag. Style sheet – A collection of styles created for a page or website.

Styles and Style Sheets A style is a rule that contains instructions on how to format an HTML element. A style may be applied to text (like styles in a word processing program such as Word) or to other HTML elements such as images, AP divs, or frames. You can also create styles that apply to specific HTML tags such as the horizontal rule tag or a heading tag. A collection of styles created for a page or a Web site is called a style sheet. Using a style sheet, you can format a number of HTML elements quickly and easily. Dreamweaver supports Cascading Style Sheets (CSS), style sheets developed specifically for use in Web design. Creating a new style involves choosing the CSS selector type (class, ID, tag, or compound); naming the style, and choosing where the rule will be used. There are several advantages to creating and using styles and style sheets: Working with styles is efficient: You can create style rules once and use them many times on a page or throughout a Web site. If you need to edit a style, you can change it in one location and the change is made throughout the site. Styles give you more formatting options than HTML: Using styles, you can easily apply borders to any side of a paragraph, position images or blocks of content absolutely, specify space between lines of text, and apply other options that cannot be achieved with standard HTML coding. Styles are not as code-intensive as HTML: Styles take up less room in a document’s code than HTML, which means the page’s file size is smaller and it will often load more quickly. This is especially true for tags such as <font>, which require a number of attributes and values each time a designer wants to adjust text appearance on a page. Copyright © 2010 Pearson Education, Inc. Publishing as Prentice Hall Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 9

Styles and Style Sheets Define formats for new style The CSS Styles panel displays style properties You will use the options in the Type category most often when creating new text formats. You can select the desired font, size, style, weight, and color, as well as “decorations” such as underlines or a blink feature. Note that you can also specify line height to add space between lines that can give text a less crowded look. Use the Background category to set a background color or image for the style. If you select a background image, you can tile it on the page using the Repeat option in the Repeat list. Use the Block category to set vertical and horizontal alignment options. You can also create indents in this category. The Box, Border, List, Positioning, and Extensions categories offer additional settings to fine-tune the style: create box shapes for content, add borders to any or all sides of the style object, create custom list settings (such as bullet characters you specify), position an object absolutely, or apply extensions that insert page breaks or change the look of the cursor. After you have finished selecting options for the new style rule, the style name displays in the CSS Styles panel. Information about an internal style is stored in the Head area of the document. Internal styles stored in the Head section of the page Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 9 Copyright © 2010 Pearson Education, Inc. Publishing as Prentice Hall

About Styles and Style Sheets A style may be applied to text or to other HTML elements such as images, AP divs, or frames. Using a style sheet, you can format a number of HTML elements quickly and easily. There are several advantages to creating and using styles and style sheets. Working with styles is efficient. Styles gives you more formatting options than HTML. Styles are not as code-intensive as HTML.

About Styles and Style Sheets You have several options for creating one or more styles in Dreamweaver: Create Internal (embedded) CSS styles that are stored in the Head section of a page and can be applied only to text on that page. Create an external CSS containing one or more styles that can be linked to all pages in a Web site. Create inline styles within specific tags in an HTML document.

Using the Property Inspector to Create Internal CSS Styles By default, when you click CSS in the Property Inspector and begin to apply formatting to selected text. Dreamweaver prompts you to create a new CSS style (See illustration Page 54). Creating a new style involves choosing the CSS selector type (class, ID, tag, or compound); naming the style, and choosing where the rule will be used.

REREAD PAGES 54 – 59 READ THROUGH THE PROCEDURES

ASSIGNMENT PAGES 59 – 60 GARDENSCAPE PAGE 60 YARDART