USING DREAMWEAVER TO CREATE PAGE LAYOUTS WITH CASCADING STYLE SHEETS (CSS) WHAT ARE CASCADING STYLE SHEETS? Each cascading style sheet is a set of rules that provides consistent formatting or a single Web page or an entire Web site. HTML provides the structure of each page, and CSS controls the appearance of each structured ele- ment, such as colors, fonts, and layout. With CSS, the same HTML page can appear dramatically different with different style sheets. The CSS Zen Garden demonstrates this beautifully: http://www.csszengarden.com. KINDS OF STYLE SHEETS Each Web browser applies its own style sheet to the documents it displays. These are called BROWSER DE- FAULT STYLE SHEETS. Unfortunately, these differ from browser to browser, which is why the same HTML page looks different on different browsers. In most modern browsers, USER STYLE SHEETS allow users to apply their own style sheet. “User style sheets allow you to set styles on page elements so that they are easier for you to read and use, regardless of what the Web page designer intended.” http://webdesign.about.com/od/userstylesheets/a/aa010906.htm AUTHOR STYLE SHEETS are the ones you will be making in Dreamweaver for this class. CSS can be used to present different styles for different purposes, generally called RENDERING METHODS, and in Dreamweaver called STYLE REN- DERING. In this way you can change the appearance of your page for hand- held media such as smart phones, for printing (viewed on screen in print preview), for screen projection, for viewing on a color computer screen (the default), for TTY for text telephone for the hearing impaired, or for display on a low-resolution television. ADVANTAGES OF CSS-BASED LAYOUTS ■ Reduce HTML file size thereby speeding up page loading ■ Provide many more formatting options than straight HTML ■ Facilitate document consistency of appearance ■ Meet industry standards CHAllENGES OF CSS-BASED LAYOUTS ■ Formatting options can be difficult to visualize (Dreamweaver CC to the rescue) Using Dreamweaver to Create Page Layouts with CSS Page 1 THE ANATOMY OF A CSS RulE Each rule has two main parts and two subparts. h1 { font-weight: bold;} h1 is the SELECTOR, which identifies the tag the rule selects. The rest of the rule, { font-weight: bold;}, is the DECLARATION, which states what happens when the rule is applied. Each declaration has two sub-elements, the PROPERTY, such as font-weight, and the VALUE of the property, bold here, which specifies what the property is set to. A single rule can contain multiple declarations, such as p {color:red; font-size:12px; line-height:15px;}. These are enclosed by curly braces into the declaration block. Notice the lack of spaces and quotes in CSS rules, and that the declarations are separated with semicolons, even at the end. You can also group selectors, such as h1, h2, h3 { font-weight: bold;}. A comma and a space separates each selector. THE LOCATION OF CSS RulES CSS rules (styles) can appear in multiple locations. INLINE STYLES use the style attribute inside of a tag. These rules are the most specific. INTERNAL STYLES or HEADER STYLES are placed in the head of an HTML document. EXTERNAL STYLES are placed in a separate .css file, and linked in the head of the HTML document. THE CASCADE When a browser displays a Web page, it has to sort out the CSS rules coming from the browser, the user, and the various author style sheets to figure out how to display the page. Sometimes these rules conflict, mean- ing that different rules are telling the same element or property what it should look like. The CASCADE determines which rule(s) will be applied to the document. ■ Browser styles have the lowest priority, meaning that they only apply when not defined by another style. ■ User styles override browser styles. ■ Author styles have the highest priority, and override the other two. ■ Within author styles, external styles have the lowest priority, internal or heading styles are next, and finally internal styles have the very highest priority. SPECIFICITY OF SELECTORS CSS specificity (a system that gives different weight to particular kinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade where items with higher priorities override properties that have lower priorities. IDs have the highest precedence, then classes, and finally tag (type) selectors. Page 2 Jeffrey Diamond • ©2013 Selector calculations are calculated as follows: ■ Add 0, 1, 0, 0 for each ID attribute in the selector. ■ Add 0, 0, 1, 0 for each class, attribute selector, and pseudoclass. ■ Add 0, 0, 0, 1 for each HTML element or pseudo-element. ■ Add 1, 0, 0, 0 for each inline style—but you probably won’t be using inline styles. For those of you who want to know more, or to review what you already know, here is a well thought out PowerPoint slide show that I used as an outline for this topic: http://www.maxdesign.com.au/2009/06/30/css-cascade/. CREATING STYLES IN DREAMWEAVER Dreamweaver CS6 streamlines the process of style creation and modification, and in most cases writes clean, standard CSS code. You can make and edit rules in a variety of ways Dreamweaver. To begin with, let’s use the Property Inspector to examine the difference between a tag and a style, and create a simple style. CREATE A SIMplE STYLE USING THE PROPERTY INSPECTOR 1. Create a new HTML document, and set your display to split view to view both the Design and the Code. 2. Click inside the Design pane and type “I am an apple and I am red.” 3. In the HTML tab of the Property Inspector, highlight the word “red” and then click the bold button. Dreamweaver bolds the “red” in Design view, and surrounds it with the <strong> tag in Code view. 4. Highlight the word “apple,” click the CSS tab in the Property Inspec- tor, click the color box on its right side, and sample a red color. Dreamweaver automati- cally opens the New CSS Rule dialog box, and guesses contextually that you want to define a new class for use in a variety of elements. 5. Type “red” for your selector name, leave “this docu- ment only” alone and click OK. Using Dreamweaver to Create Page Layouts with CSS Page 3 The new rule is an internal style. Dreamweaver added the new CSS rule into the head of my document. Use the HTML tab of the Property Inspector to apply the rule: 1. In Design View, type a second sentence, “I am a rose and I am also red.” 2. Highlight the word “rose.” 3. In the HTML (not the CSS) tab, press the arrow to the right of the Class menu to view the classes available for this document and chose “red.” No- tice that Dreamweaver even gives a preview in the style name of the style’s appearance. 4. Here is the document in code and design view. It sure beats hand coding!! KINDS OF CSS SELECTORS This first example was a simple one. It gets more powerful but also more complicated, as Dreamweaver lets you define and edit four kinds of selectors. Type Dreamweaver calls these Tag selectors. These selectors are assigned to specific HTML tags, such as <h1>. Class Class selectors can apply to many different elements on a page; they are not associ- ated with any html tag but are instead applied on an as-need basis. Each class selector must have a unique name, beginning with a period (.). Dreamweaver will add the initial period if you forget to type it You can add a class, or change from one to another from either the Property Inspector, or by right click the tag in the Tag Selector, and choos- ing Set Class plus the class you want to apply. Either of these techniques will only let you apply a single class. The Tag Inspector panel and Code View permit you to apply multiple classes to the same element. ID Examples of ID selectors are Div or anchor tags. IDs begin with a hash mark (#). The ID selector differs from the class selector in that it can only be applied once in any given page. An ID selector carries more weight than a class selector; it is more specific. Page 4 Jeffrey Diamond • ©2013 Compound These selectors apply formatting to tags and classes when they appear in a specific or Contextual combination. Selectors Pseudo-classes (a:hover) and pseudo-elements (p:first line) style according to their positions or roles in the document. The compound part is preceded by a colon. Descendent selectors are specific, such as an <h1> tag within a specific Div. A space separates the ID and its descendent, such as #footer h1. Groups apply the same set of rules to several selectors. Groups are comma separated lists such as h1, h2, h3... USE THE CSS RulE DEFINITION DIALOG BOX The CSS tab of the Property Inspector only lets you set parameters for a few basic attributes: The Edit Rule button, which more accurately should be named the “Create/Change Rule” button, dis- plays the CSS Rule Definition dialog box, with a lot more settings. CREATE A MORE COMplEX STYLE USING THE CSS RulE DEFINITION DIALOG BOX 1. Select “I am a rose and I am also red.” but not its surrounding <p> tags, and copy and paste the sentence several times to make a multi-lined paragraph. 2. Click the <p> tag in the tag selector, and copy and paste the paragraph including its tags, to make two multi- line paragraphs as shown here.