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 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

. 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

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

tags, and copy and paste the sentence several times to make a multi-lined paragraph. 2. Click the

tag in the tag selector, and copy and paste the paragraph including its tags, to make two multi- line paragraphs as shown here. Depending on the size of your document window, your lines may not wrap as neatly as mine. 3. Choose your selector type. a. With Targeted Rule set to , click the Edit Rule button to display the New CSS Rule dialog box. By default, Dreamweaver assumes you want to define a class. b. Click the arrow to the right of Class (can apply to any HTML element), and choose Tag (rede- fines an HTML element). 4. Choose your selector name. Since your selection is within a

tag, Dream- weaver assumes you want to redefine a

tag. Since that is correct, you don’t need to change anything here. 5. Be sure that your rule is going to the correct location. This document only, the default here, is cor- rect because you have not attached an external style sheet to the document, and since the

tag

Using Dreamweaver to Create Page Layouts with CSS Page 5 is a block level element, it cannot be inline. 6. Click OK to open the CSS Rule Defi- nition dialog box. 7. This dialog box, like so many in Dreamweaver is divided into two panes, categories on the left, and settings for the highlighted category on the right. On your own, examine the properties in each of the eight categories. Not all categories apply to every element.

Type Category The Type category groups many but not all of the properties that affect the appearance of your type. Explore them on your own, noting that you can click the Apply button to view the effects of your prop- erty settings right in the Design view of your document. Font family will override the fonts chosen in your page properties with whatever you choose here wherever your document contains a

tag, as will font size. Font size can be specified in a variety of different measurement schemes. If you click the menu in the left-most box, the preset numbers shown represent pixels, followed by some relative sizes. Because pixels do not scale well, and the relative sizes such as “small” are not very precise, it is best to avoid one of these presets. Once you type anything into the font size box, you can then set your measure- ment scheme from the menu to the right. I like to size my type in EMs because if the user wants to enlarge the type, the browser will permit it, whereas some browsers cannot resize type in pixels. If your text is set to 100.01%, as recommended, then 1 em will preserve that size. A property less than 1 em, such as .9 em, will make it slightly smaller, and a value more than 1 em, like 1.2 em will enlarge the type size. “Classically, an em (pronounced emm) is a typographer’s unit of horizontal spacing and is a sliding (relative) measure. One em is a distance equal to the text size. In 10 pixel type, an em is 10 pixels; in 18 pixel type it is 18 pixels. Thus 1em of padding is proportionately the same in any text size.” How to size text using ems: http://www.clagnut.com/blog/348 Font style can be normal, italic, or oblique. Line height determines the amount of space between each line of a paragraph. This is defi- nitely a property to experiment with. With small paragraph type, a bit of extra line space can make the type much easier to read. I also set my line height in ems. 1 em will make your lines quite close together, while 1.3 ems will increase the white space between lines. Experiment with different numbers, and click Apply with each to see its effect.

Page 6 Jeffrey Diamond • ©2013 I am not a big fan of Text decoration except in very special cases. However, I have used it to eliminate the default underlining in some link states. AVOID BLINK. Font weight applies a relative or specific amount of boldface to the font. Normal = 400; Bold = 700. Personally, I don’t see a lot of variation with the numeric font weights, and I stick with Normal or Bold. Font variant switches between Normal and Small Caps. Text-transform can be used to capitalize the first letter of each word in the style, or to set the text to all uppercase or all lowercase. (Too bad they are not all in the same menu.) Color lets you pick from the “Web safe” swatches. But, here is a nice trick. If you want your type to use a color from a graphic, you can use the eyedropper outside the swatches palette to sample colors from the Design view of your page, such as from an image your page contains.

Background Category Not only can you specify colors and images for an entire page in Page Properties, but you can also specify them for individual elements. Creative designers use this capability to make very effective pages with little graphical overhead. CSS Zen Garden has many ex- amples.

Block Category The Block category defines spacing and alignment. Word Spacing sets the spacing between words. Letter Spacing increases (positive value) or decreases (negative value) the space between letters or characters. When I specify Letter Spacing, I do it in ems, in small increments. Vertical Align specifies the vertical alignment of the applied element. Often you can’t see its effects unless you preview in a browser. Text Align sets horizontal alignment of block elements, just like the alignment buttons. Text Indent specifies how much the first line of text indents (zero if unspecified). A negative value may be used to create an outdent, but not all browsers support it. Whitespace has three options: ■■ Normal collapses white space ■■ Pre handles it as if the text were enclosed in pre tags, respecting all white space, including spaces, tabs, and returns ■■ Nowrap specifies that the text only wraps when encountering a
tag. Display specifies whether an element is displayed and if so how it is displayed. It has a lot of “advanced” options. Leave it blank unless you know what you are doing.

Using Dreamweaver to Create Page Layouts with CSS Page 7 Be careful with None, which hides the element to which it is assigned. Typically, None is used for specialized style sheets, to turn off elements you don’t want the viewer to print.

Box Category The Box category is used to control the placement of block level elements on the page. I find I spend more time in this category than any of the others, as I move elements around to locations I like. Width and Height determine the width and height of the element. If you make a container div (more on div’s coming up), setting its width to a set number of pixels as shown here and then setting the right and left margins to auto will center the container horizon- tally on your page, which many people find attractive. Float specifies how other elements, such as text, AP Divs, tables and so on, will float around the element: Left, Right, or None (the default). A floated element moves to the left or right side of the containing ele- ment. You can Clear Left, Right, Both, or None. When you Clear Both, using the box model, it makes the chosen element appear below any floated elements above it. For example, you would clear the footer, not the sidebar above it, to make the footer appear beneath the main content and the sidebar it con- tains. Padding sets the amount of space between the content of an element and its border (or margin if there is no border). Uncheck Same For All to set the padding for individual sides of the element, as shown above. Margin sets the amount of space between the border of an element (or the padding if there is no bor- der) and another element. Here is a quick explanation of the difference between Padding and Margin settings:http://lkamal.blogspot. com/2006/12/margin-vs-padding-css-properties.html While we are on the subject of padding and margins, let’s take a quick detour to the Page Properties dialog box. Each browser sets margins in its Browser Style Sheet, and sometimes these margins can interfere with those you define. So, if you are going to customize the padding and/or margins of any of your styles, it is a good idea to zero out any browser-defined margins in Page Properties. However, once you do this, you will need to specify at least margins in your block elements assuming you want space between them.

Page 8 Jeffrey Diamond • ©2013 Border Category The Border category lets you place variously for- matted borders on the top, right, bottom, and left sides of selectors. Uncheck the default Same for all to style each side differently. Watch this quick video, recorded in CS3 but still relevant, that shows how to define a class that used the Border category to make picture frames around a series of images: http://www.5min.com/Video/Adobe-Dreamweav- er-CS3---How-to-Add-Borders-with-CSS-86626590

List Category List-style-type lets you specify the bullet symbol (disc, circle, or square) you want to use for unor- dered lists, or the numbering system (lower-roman, upper-roman, lower-alpha, or upper-alpha) for ordered lists. Unordered lists with none specified are often used to style navigation bars. List-style-image lets you use your own graphic in place of one of the simple bullets. StyleGala has a collection of 200 bullets you can download and use, or you can design your own: http://www.stylegala.com/features/bulletmadness. List-style-position provides two options, inside above, and outside below.

Positioning Category Typically used with

tags to control page layout, the Positioning properties are both power- ful and complicated. This will be covered in future classes.

Extensions and Transitions Category These categories will be covered in future classes.

Components of CSS Layouts ■■

elements create the page structure (in boxes) ■■ CSS rules define the dimensions and ormatf of key page elements to make the page both functional and attractive

Using Dreamweaver to Create Page Layouts with CSS Page 9 XHTML Containers

tags are block elements. Block tags provide visual structure and stack on top of each other on the page. The end of a block tag moves the next tab below the current one. tags are inline Inline tags do not interrupt the flow of text; they do not force a new line. Inline tags cannot contain block level tags. Neither tag affects the document appearance or presentation until they are styled.

DIVs vs. IDs and Classes IDs and classes are CSS rules, while DIVs are HTML tags. You put the IDs and classes inside the DIVs to format these page divisions. div id vs div class source: http://creativebits.org/webdev/div_id_vs_div_class

First difference IDs are to be used only once in your html layout. Classes can be used multiple times. Generally IDs are used for the main elements of the page, such as header, main content, sidebar, footer, etc. Classes are used for elements that will appear several times on your page, but can not be covered by stan- dard html elements. For example menus. The easy way to remember which one of the two should be used only once to think of how many people are out there with your id card number.

Second difference IDs have priority over classes. So, if an element has both an ID and a class, the ID will take over. Another way of saying this is that ID selectors have more SPECIFICITY than plain tags or classes.

The CSS Styles Panel “The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page ele- ment (Current mode), or all of the rules and properties that are available to the document (All mode). A toggle button at the top of panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and Current mode.” (Dreamweaver Help) To view the CSS Styles panel, do one of the following: ■■ Choose Window > CSS Styles. ■■ Choose one of the built in workspaces that includes the CSS Styles panel. ■■ Double click the CSS Styles tab in Classic or Designer mode.

Page 10 Jeffrey Diamond • ©2013 ■■ In Designer Com- pact, click the CSS icon. It toggles to hide and reveal. ■■ Windows only, the keyboard shortcut is Shift+F11.

CSS Panel Tabs The top tab switches between Current and All modes. The CSS Styles panel in All mode lists all rules from the applied style sheets of whatever page you have open and pro- vides an easy way to view and edit each of their properties in the lower half of the panel. All lists all the rules, regardless of what is selected in the docu- ment window. You can click on any one of them to view its properties. Embedded styles are displayed with a