ptg 9 9 What You’ll Do Introduce Cascading Style Sheets Create a Web Page with a CSS Layout Create CSS Styles Apply Internal CSS Styles Apply and Modify External CSS Styles Remove Internal Styles Use the CSS Styles Panel Edit CSS in the Properties Panel Set CSS Properties Work with CSS Rules Disable or Enable CSS Rules Inspect CSS Use the Relevant CSS Tab Work with ID Selectors Create and Apply an ID Selector Check for CSS Browser Compatibility Format CSS Code Set CSS Styles Preferences Use Design-Time Style Sheets Optimize Web Pages 207 Working with Cascading Style Sheets Introduction Cascading Style Sheets are one of the greatest things to come along since the creation of the World Wide Web. A hard definition of CSS might go something like this: Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of the content in a Web page. Using CSS styles to format a page separates content from presentation. This gives you greater flexibility and control over the exact appearance of your Web pages. With CSS you can control text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color, link color and underlining. With CSS controlling fonts, it ensures a more consistent treatment of your page layout and appearance in multiple browsers. In this chapter you'll get an introduction to Cascading Style Sheets: what they are, and how to use them efficiently to create great Web content. You'll also learn how CSS func- tions, and how it's used to control multiple Web pages. With Dreamweaver and Cascading Style Sheets we're get- ting closer and closer to the goal of What You See Is What You Get, and I can't wait. From the Library of Wow! eBook ptg 208 Chapter 9 Cascading Style Sheets (CSS) are a revolution in the world of web design. Some of the ben- efits include: ◆ The layout of many documents from one single style sheet ◆ Precise control of layouts ◆ Application of different layout to different media-types (screen, print, etc.) ◆ Many advanced and sophisticated techniques Many of the CSS properties are similar to those of HTML. Therefore, if you are comfort- able designing Web pages using HTML code, you will most likely recognize many of the codes. CSS Versus HTML If you wanted to change the color of the back- ground of a Web page, the HTML code would look like this: <body bgcolor="#0000FF"> To wr ite the sam e th ing using CSS , wo uld look like this: body {background-color: #0000FF;} Incidentally, the code, in both cases, is instructing the browser to paint the back- ground in pure blue. CSS Breakdown Cascading Style Sheets are broken down into three sections: a selector, a property, and a value. In our example, body is the selector, background-color is the property, and #0000FF is the value. Create CSS Styles There are three ways you can apply CSS to an HTML document: Attributes, Tags, and External Style Sheets. Attribute Styles One way to apply CSS to HTML is by using the HTML attribute style. CSS used in this way is coded directly into the HTML docu- ment. For example, you can create your own named tags, and use them throughout the active document. Building on the above example, it can be applied like this: <html> <head> <title>Attribute Style Example<title> </head> <body style="background-color: #0000FF;"> <p>This page has a blue background</p> </body> </html> NOTE Attribute styles are a one-shot deal. That is, they are applied to single areas of an HTML document such as a background color, or a specific portion of text. Tag Styles A second way to include CSS into an HTML document is to use the Tag Style method. In this method you control the formatting of standard HTML tags. For example, you could redefine the <H1> heading tag to always use a specific font, size and justification or, in this example, use the <body> tag to paint the background blue. <html> <head> <title>Tag Style Example<title> <style type="text/css"> body {background-color: #0000FF;} </style> </head> Introducing Cascading Style Sheets From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 209 <body> <p>This page has a blue background</p> </body> </html> NOTE A Tag style changes all instances of an HTML tag throughout the active document, but will not impact other Web documents. External Styles This is the recommended way to create styles. Using this method you create a text document (called a style sheet). This docu- ment contains all of the formatting informa- tion necessary to drive your Web page. This document is then attached to one or more Web pages, and when the page loads, it gets its formatting information from the external style sheet. The line of code must be inserted in the header section of the HTML code between the <head> and </head> tags. Like this: <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <p>This page has a blue background</p> </body> </html> In the example, an external style sheet (basi- cally, a text document) called style.css is used to format the active Web document. Back to Basics With all this talk of selectors, attributes, and values, you might assume that we're about to leave the Design mode of Dreamweaver and go back to the basics of straight HTML cod- ing. Well, you can do that, if you choose; how- ever, as you're about to find out, creating Cascading Styles Sheets is not difficult at all. As a matter of fact, Dreamweaver does most of the work for you. Now, isn't that nice of Adobe to provide us with so much help. Style Types There are four types of styles, and as you might guess, each one performs a specific function when using Cascading Style Sheets. The four types of Styles are as follows: ◆ Class. Creates a custom style that can be applied as a class attribute to a range or block of text. NOTE Class names must begin with a period and can contain any combination of letters and numbers. If you don't enter a beginning period, Dreamweaver will enter it for you. ◆ ID. Creates a style and attaches it to a current HTML tag that contains a specific ID attribute. NOTE ID names must begin with a pound (#) sign and can contain any combination of letters and numbers. If you don't enter a beginning period, Dreamweaver will enter it for you. ◆ Tag. Redefines a current style and attaches it to a current HTML tag. For example, changing the <body> tag so that each time it's applied the text is red. ◆ Compound. Defines specific formatting for a particular combination of tags or for all tags that contain a specific ID attribute. The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited. From the Library of Wow! eBook ptg 210 Chapter 9 If you’re not sure where to start, you can create a Web page that already contains a CSS Layout. Dreamweaver includes over 30 different CSS layouts. The CSS layouts are divided into 4 categories based on the page’s column width: Fixed, Elastic, Liquid, or Hybrid. Each of the built-in CSS layouts includes extensive comments that explain the lay- out, so beginning and intermediate designers can learn quickly. After you select a CSS layout, you need to select the location (add to HTML head, create new file, or link to existing file) for the layout’s CSS style sheet. A CSS layout can also be a starting point to create your own cus- tom template, which you can add to the list of layouts in the New Document dialog box. Creating a Web Page with a CSS Layout Create a Web Page with a CSS Layout Click the File menu, and then click New. The New Document dialog box opens. Click the Blank Page category. Select the Page Type you want. Select from the following CSS Layouts: ◆ Fixed. Column width is fixed (in pixels) and remains the same in a browser. ◆ Elastic. Column width is set relative to the size of the text in a browser (in ems). ◆ Liquid. Column width is set based on the percentage of the browser’s width. ◆ Hybrid. Columns are set to a combination of Fixed, Elastic, and Liquid. Click the DocType list arrow, and select the option you want. Click the Layout CSS list arrow, and select the option you want: ◆ Add To Head. Adds CSS for the layout to the head of the new page. 6 5 4 3 2 1 2 5 4 3 Using Custom Layouts to Create New Documents If you create a custom CSS layout, you can add it to the list of layouts in the New Document dialog box. When you create an HTML page with a CSS layout, the file needs to be saved with the .htm extension and the CSS for the layout needs to reside in the head of the HTML page. Move the saved HTML page to the following folder: Adobe Dreamweaver CS5\Configuration\Built-in\Layouts. On Windows the Adobe Dreamweaver CS5 folder is located in the Program Files folder and on the Macintosh, the folder is located in the Applications folder. For Your Information From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 211 ◆ Create New File. Add CSS for the layout to a new external CSS style sheet that attaches to the new page. ◆ Link To Existing File. Attaches an existing CSS file to the new page. If you selected the Link To Existing File option in the Layout CSS menu, click the Attach Style Sheet icon, select the CSS file you want in the Attach External Style Sheet dialog box, and then click OK. Click Create. If you selected the Create New File option in the Layout CSS menu, enter a name for the new external file in the Save Style Sheet File As dialog box. Create a CSS File Click the File menu, and then click New. The New Document dialog box opens. Select from the following methods: ◆ Blank. Click the Blank Page category, and then click CSS. ◆ Sample. Click the Page from Sample category, click CSS Style Sheet, and then select the sample you want. Click Create. 3 2 1 9 8 7 8 6 7 3 2 From the Library of Wow! eBook ptg 212 Chapter 9 As mentioned in the last section, CSS can be applied to an HTML docu- ment in one of three ways: Attributes, Tags, or Externally. Although we will cover all three methods in this section, it's important to understand that the external method gives you the most control over the styles, once they've been created. In the other two methods, the CSS styles created only apply to that one specific page, and changes to the styles must be performed by reopening the page. The external method is like creating a text document of how you want a page or pages to display. Any changes to the formatting are performed to the text document. When the Web page opens, any changes made to the external docu- ment are immediately reflected in the active page… now that's what I call control. Creating CSS Styles Create an Attribute or Tag Style Open the Web page you want to create a CSS style. Click the Format menu, point to CSS Styles, and then click New. Click the Selector Type list arrow and then select a CSS style type: ◆ Attribute Style. Select Class, click the Name arrow, and then select a style name, or type one in. Attribute style tags must begin with a period. ◆ Tag Style. Select Tag, click the Name arrow, and then select an HTML tag (in this example, body). Click the Define In list arrow, and then click (This Document Only). Click OK. Select a category, and then set the properties you want for the CSS style. Click OK. 7 6 5 4 3 2 1 4 5 7 6 3 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 213 Create an External Style Open the Web page you want to create an external CSS style. Click the Format menu, point to CSS Styles, and then click New. Click the Class or Tag option (in this example, tag). Click the Name arrow, and then select an HTML tag (in this example, body.) Click the Define In list arrow, and then click New Style Sheet File. Click OK. Enter the file name for the CSS style in the File Name input box. Leave the other options at their default values, and then click Save. NOTE Dreamweaver creates a folder in the active site called, CSS, and this is where all style sheets should be saved. Select a category, and then set the properties you want for the CSS style. Click OK. 10 9 8 7 6 5 4 3 2 1 6 8 7 10 9 See Also See “Setting CSS Properties” on page 222 for information on setting CSS properties for a rule. 4 5 3 From the Library of Wow! eBook . extension and the CSS for the layout needs to reside in the head of the HTML page. Move the saved HTML page to the following folder: Adobe Dreamweaver CS5 ConfigurationBuilt-inLayouts. On Windows. On Windows the Adobe Dreamweaver CS5 folder is located in the Program Files folder and on the Macintosh, the folder is located in the Applications folder. For Your Information From the Library. that contains a specific ID attribute. NOTE ID names must begin with a pound (#) sign and can contain any combination of letters and numbers. If you don't enter a beginning period, Dreamweaver