1. Lesson 4: Styling Your Pages with CSS Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

2. Overview © 2013 John Wiley & Sons, Inc. 2

3. 2.1 Website Design: Best Practices The “rules” for how to use a language such as HTML or CSS are contained in a master document called a specification. There is no single specification for CSS, instead it has been broken down into three levels: CSS1. The specification for how to use CSS was first released in 1996 with this version. Although many fundamentals of the language are the same, most people consider CSS 1.0 to be obsolete. CSS2 builds on CSS1 and with few exceptions all valid CSS1 style sheets are valid in CSS2. CSS3 is the latest version and includes many completely new features or improved CSS2 features. © 2013 John Wiley & Sons, Inc. 3

4. 2.1 Website Design: Best Practices Before CSS came along, you styled text using the tag in HTML; you could wrap this tag around any paragraph, phrase, or tidbit of text to apply color, or to set the font size and typeface. CSS introduces a new level of control and flexibility far beyond the tag. A significant benefit of CSS is the ability to apply consistent formatting of elements across one or all pages in a website. © 2013 John Wiley & Sons, Inc. 4

5. 2.1 Website Design: Best Practices You can use Dreamweaver’s CSS Styles panel to create new rules and/or style sheets that you can place directly within one or more pages in your site. You can easily modify rules directly from the CSS Styles panel. You can also apply rules from several places, including the Style or Class menu on the Property Inspector, or the tag selector at the bottom of the document window. © 2013 John Wiley & Sons, Inc. 5

6. 5.2 Organize Web Pages with CSS Styles Follow these steps to create a style in the CSS Styles panel Step-by-Step 1.At the top of the CSS Styles panel in the upper-right corner of your screen, make sure the All tab is active, and locate underneath. 2.Click the New CSS Rule icon at the bottom of the CSS Styles panel. 3.From the Choose or enter a name for your selector drop-down menu, select body. Press OK. The CSS Rule definition dialog box appears. © 2013 John Wiley & Sons, Inc. 6

7. 5.2 Organize Web Pages with CSS Styles 4.In the left Category column, select Background. In the Background-color field, type the hexadecimal number: #E0F0E4. The background color does not apply automatically. Press the Apply button in the bottom right corner to preview the new color. 5.Press OK to confirm the background color. © 2013 John Wiley & Sons, Inc. 7

8. 5.2 Organize Web Pages with CSS Styles 6.In the list of rules in the CSS Styles panel, double-click the.copyright class as (right) to edit these properties. 7.In the CSS Rule definition dialog box that appears, click the Background Category, click on the Background-color swatch, and choose white (#FFF) from the list. Press OK. © 2013 John Wiley & Sons, Inc. 8

9. 5.3 Modify Text and Text Properties CSS allows you to create styles targeting specific HTML elements. Understanding these techniques is crucial to gain control over the appearance of your page. Dreamweaver actually refers to contextual selectors, the official CSS term for them, as compound selectors. Despite the terminology, they are very powerful and important to understand. Contextual selectors apply formatting to tags and classes when they appear in a specific combination. For instance, you often have separate rules for the (paragraph) and (bold) tag. Contextual selectors allow you to make a separate rule for tags that are used inside tags. © 2013 John Wiley & Sons, Inc. 9

10. 5.3 Modify Text and Text Properties Follow these steps to create a selector Step-by-Step 1.In the first line of the Spring Events list, select the word Free. Click the HTML button in the Property Inspector, then press the Bold button. 2.Press the CSS button in the Property Inspector; then click the menu for Targeted Rule and choose. You must do this; otherwise, when you choose a color, you will target the whole list, which is not what you want. 3.Click the color swatch in the Property Inspector and choose the dark green swatch in the top row, #030. The New CSS Rule dialog box appears. © 2013 John Wiley & Sons, Inc. 10

11. 5.3 Modify Text and Text Properties 4.From the Choose a contextual selector type for your CSS rule drop-down menu, choose Compound. In the Selector Name field, the text body ul li strong appears (right). This text is logical if you read it from left to right. The body tag is the ancestor, or parent, of the ul tag. The strong tag is referred to as a descendent selector. In other words, your style will only apply to strong tags, which are nested in a list item (which is nested in the unordered list, and so on). © 2013 John Wiley & Sons, Inc. 11

12. 5.3 Modify Text and Text Properties 5.Below the Selector Name section, click the Less Specific button, and the list of rules is shortened to ul li strong. This has no effect on the behavior of the rule. Press OK. The word Free is now bold and dark green. Deselect the text to see the final result. 6.Press the HTML button in the Property Inspector. Select the word Free in the fourth line and then press the Bold button in the Property Inspector. The word takes on the same appearance. © 2013 John Wiley & Sons, Inc. 12

13. 5.8 Use CSS to Implement a Reusable Design Follow these steps to style a hyperlink 1.Click the products link in the first paragraph, and then choose New from the CSS Styles panel menu to create a new rule. The New CSS Rule dialog box appears. © 2013 John Wiley & Sons, Inc. 13

14. 5.8 Use CSS to Implement a Reusable Design 1.From the Choose a contextual selector type for your CSS rule drop-down menu, choose Compound. In the Selector Name section, click to open the drop-down menu to the right of the selector field. Different selectors will appear at the top of your menu because Dreamweaver is attempting to create a compound rule. You are only interested in the last four options, which are a:link, a:visited, a:hover, and a:active. Choose a:link, which affects the appearance of a hyperlink when it hasn’t yet been visited. Press OK. © 2013 John Wiley & Sons, Inc. 14

15. 5.8 Use CSS to Implement a Reusable Design 3.The CSS Rule definition dialog box appears. Under the Type category, click the color swatch next to Color and choose the green shade (#030). Press OK, and the products link in the first paragraph as well as the two links at the bottom of the page are now green instead of blue. 4.Make sure that the products link in the first paragraph is selected and once again, choose New from the CSS Styles panel menu and the New CSS Rule dialog box opens. Change the state for a:hover, which defines the color of a hyperlink when users place their cursor over it. 5.From the Choose a contextual selector type for your CSS rule drop-down menu, choose Compound. In the Selector Name section, choose a:hover from the drop- down menu, then press OK. © 2013 John Wiley & Sons, Inc. 15

16. 5.8 Use CSS to Implement a Reusable Design 6.From the Type category, click the color swatch next to Color and select the bright orange approximately in the center of the Swatches panel (#C60). In the Text-decoration section, mark the last checkbox labeled none as shown above. This removes the underline from the hyperlink for the hover state only. Press OK. © 2013 John Wiley & Sons, Inc. 16

17. 5.8 Use CSS to Implement a Reusable Design 7.Choose File > Save; then choose File > Preview in Browser and choose a browser from the list to launch it. Place your cursor over the products link, but don’t click it. This is the hover link. Click the products link to bring you to the products page, and then click back to the events page by clicking the Events link at the bottom of the page. The products link is now purple because the browser understands you have visited it. © 2013 John Wiley & Sons, Inc. 17

18. 5.2 Organize Web Pages with CSS Styles Follow these steps to create a div tag: 1.Click and drag to select all the text from the line, Occasionally we gather…, down to the bottom of the page. 2.Click once to open the Insert panel immediately above the CSS Styles panel. If the drop-down menu is not set to Common, select it from the menu. In the Common section, press the Insert Div Tag ( ) button, and the Insert Div Tag dialog box opens as shown above. In the Insert section, the default choice is Wrap around selection; this is exactly what you want, so leave this as is. © 2013 John Wiley & Sons, Inc. 18

19. 5.2 Organize Web Pages with CSS Styles 3.In the field labeled ID, type footer. 4.Click the New CSS Rule button. You don’t need to change anything here; just confirm that you are creating an ID with the name footer. The footer name is preceded by the pound sign (#). This is the main difference between ID names and class names. If this were a class named footer, it would be named.footer. Press OK, and the CSS Rule definition dialog box appears. © 2013 John Wiley & Sons, Inc. 19

20. 5.2 Organize Web Pages with CSS Styles 5.Select the Background category, then click the Background-color swatch. Choose the pure white swatch (#FFF) and press OK. Press OK again to close the Insert Div Tag dialog box. In Dreamweaver’s Design view, a box has appeared around the text and there is now a white background unifying the footer text (below). © 2013 John Wiley & Sons, Inc. 20

21. 5.8 Use CSS to Implement a Reusable Design The true power of style sheets is in an external style sheet that pages on your site can share. When you change an external style, pages linked to that style sheet are updated. This is especially handy when for sites containing many pages and sections. You can create external style sheets in the following ways: Move rules from an internal style sheet into a new CSS file. Define styles in a page in a new document using the New CSS Rule panel. Create a new CSS document from the Start page or File menu. © 2013 John Wiley & Sons, Inc. 21

22. 5.8 Use CSS to Implement a Reusable Design Follow these steps to create a new.css file: 1. In the Files panel, double- click on the event1.html file. 2. From the CSS Styles panel menu, choose New; the New CSS Rule dialog box appears. 3. Set the Selector Type as Tag, and choose body from the Tag drop-down menu. At the bottom of the screen, click the Rule Definition menu and choose (New Style Sheet File) as shown above; then press OK. © 2013 John Wiley & Sons, Inc. 22

23. 5.8 Use CSS to Implement a Reusable Design 4.You are prompted to name and save the new.css file. Name it morestyles.css and save it in the root folder of your site. 5.When the CSS Rule definition dialog box appears, choose the Background category. Set the background color to light yellow, #FFC. Press OK to create the rule. Your page’s background color should be yellow, and the CSS Styles panel reflects that the style was created in a new external style sheet. Now you can attach this style sheet to any other page in your site. 6.Choose File > Save All. © 2013 John Wiley & Sons, Inc. 23

24. Overview © 2013 John Wiley & Sons, Inc. 24

25. Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.