ONLINEPDFPROOFING.COM

photo shopping cart - www.onlinepdfproofing.com

Menu


particularly useful when working with client-side scripting languages such as JavaScript because they help us uniquely identify an HTML


element for use with JavaScript and apply a CSS style at the same time. Attaching a Style Sheet Rest assured the time will come when you'll work on a site that contains numerous files edited using traditional HTML instead of CSS. The files might exist in a project folder that already contains an external style sheet file. In this scenario, you'll want to remove HTML formatting from all the pages and attach an existing, prewritten CSS style sheet to each page in the project folder. You attach an existing style sheet file to a web page using the Edit Style Sheet dialog. To demonstrate the process, follow these steps: 1. Open the companydirectory.htm file from the list in the Files panel. As you can see, the page contains no formatting. 2. Select the Attach Style Sheet option from the Style menu in the Properties Inspector. The Attach External Style Sheet dialog appears (see Figure 7.29). Figure 7.29. The Attach External Style Sheet dialog allows you to browse to and select an existing style sheet to link into a web page. 3. With the Add As Link radio button selected, browse to the styles.css file located in the root of your project folder. Select nothing from the Media menu and click OK. 4. The page reformats. You'll still need to add the link style to each of the links in the navigation bar. In any case, you've just successfully attached a style sheet file to an existing web page. You probably noticed other options in the Attach External Style Sheet dialog. For the sake of completeness, let's discuss those options here: File/URL: As you have seen, you can use the Browse button to browse to and select the external style sheet file you want to attach to the existing web page. Add as: Link: Select this radio button to attach the style sheet using the <link> tag within the <head> tag of the page. For the most part, this is the option you'll select. Add as: Import: Click this option to attach the style sheet using the following code within the <head> tag of the web page: <style type="text/css"> <! @import url("styles.css"); > </style>   The only real advantage to using Import over Link is that older browsers don't recognize the Import keyword. Because this is the case, you can prevent CSS from being loaded in older browsers, thus freeing up valuable bandwidth. The downside to using Import is that Internet Explorer 6 tends to produce a momentary flash of unstyled page content before actually loading the stylized page. You can read more about this phenomenon by visiting the following URL: http://www.bluerobot.com/web/css/fouc.asp. CAUTION One of the topics we have not yet discussed is that of bandwidth usage as it relates to CSS files. It's important to understand that CSS files are separate files from the HTML file but are used by potentially all the HTML files in your site. What this means in terms of bandwidth and size is that if you had a 5KB HTML file and a 5KB CSS file, the total download size for both files is equivalent to 10 KB. Keep this in mind when you're designing CSS files. Try to avoid storing uneeded style rules in the file and maintain only those style rules you think you'll use often.