Using Dreamweaver to Create Page Layouts with CSS Page 1

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)

Page 2 Jeffrey Diamond • ©2013

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.

Using Dreamweaver to Create Page Layouts with CSS Page 3

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, andset your display to split view to viewboth 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 PropertyInspector, highlight the word “red” and then click the bold button.

Dreamweaver bolds the “red” in Design view, andsurrounds it with the <strong> tag in Code view.

4. Highlight the word“apple,” click the CSS tabin the Property Inspec-tor, click the color boxon its right side, andsample a red color.

Dreamweaver automati-cally opens the NewCSS Rule dialog box, and guesses contextually thatyou want to define a new class for use in a varietyof elements.

5. Type “red” for your selector name, leave “this docu-ment only” alone and click OK.

Page 4

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 Classmenu 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’sappearance.

4. Here is the document in code and designview. 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.

Jeffrey Diamond • ©2013

Using Dreamweaver to Create Page Layouts with CSS Page 5

Compound or Contextual Selectors

These selectors apply formatting to tags and classes when they appear in a specific combination.

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, andcopy and paste the sentence severaltimes to make a multi-lined paragraph.

2. Click the <p> tag in the tag selector, and copy and paste theparagraph including its tags, to make two multi-line paragraphs as shown here. Depending on thesize of your document window, your lines may notwrap as neatly as mine.

3. Choose your selector type.

a. With Targeted Rule set to <New CSS Rule>,click the Edit Rule button to display the NewCSS Rule dialog box.

By default, Dreamweaver assumes you want todefine a class.

b. Click the arrow to the right of Class (can applyto any HTML element), and choose Tag (rede-fines an HTML element).

4. Choose your selector name.

Since your selection is within a <p> tag, Dream-weaver assumes you want to redefine a <p> 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 <p> tag

Page 6

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 inDreamweaver is divided into twopanes, categories on the left, andsettings for the highlighted categoryon 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 <p> 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 <body> 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.

Jeffrey Diamond • ©2013

Using Dreamweaver to Create Page Layouts with CSS Page 7

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

Page 8

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.

Jeffrey Diamond • ©2013

Using Dreamweaver to Create Page Layouts with CSS Page 9

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

■ <div> elements create the page structure (in boxes)

■ CSS rules define the dimensions and format of key page elements to make the page both functional and attractive

Page 10

xhtmL Containers

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

<span> 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 differenceIDs 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 differenceIDs 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.

Jeffrey Diamond • ©2013

Using Dreamweaver to Create Page Layouts with CSS Page 11

■ 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 <style> tag. You cannot edit inline styles in ALL mode. All is good for CSS newbies.

In All mode, when you click on a given style, its properties show up in the Properties tab beneath the All Rules tab. All is not document-selection dependent.

Current shows just the rules that apply to the current selection. In Current mode, the top Summary for Selection tab shows all the defined properties that apply to that selection.

The About/Rules tab can either show the cascade, or it can display information. Use the two buttons on the right to switch between the two tabs.

In Cascade view, if you hover over the rule, its information will appear along with numeric specificity, to determine which rule takes precedence.

Properties with lines through them are not defined in the chosen rule. CURRENT mode is more power-ful and more complex. You can edit in line styles in CURRENT mode, and you can see information for a selected property, as well as the cascade for the selected tag.

Current mode also shows all CSS rules but for the page and also shows the different impact of the cas-cade on the area that has been selected. By select a specific property, you can view its information and where it is used. By hovering over a rule, you can view its specificity. These details make Current mode

Page 12

the more complex mode. Its ability to select any of properties or any selector and view the relevant style information makes it the more powerful mode.

The Middle or Rules TabThis tab alternates between showing the cascade for the currently selected region of the document, and providing more information about that rule.

The Properties TabHere you can view and edit Rules. If a rule has a line through it, that means that the property is not an inheritable property.

A PROPERTY IS NOT THE SAME AS A RULE. A style sheet is made up of a number of rules, each of which contains a number of properties, each of which has its own value. When in All mode, the CSS Styles panel displayed the rules present in the applied style sheets. When in Current mode, the panel displays the properties present on the selected piece of content only.

The bottom of the Properties Tab has three buttons that set how the proper-ties are displayed.

According to Dreamweaver Help:

Category View divides the Dream-weaver-supported CSS properties into eight categories: font, background, block, border, box, list, positioning, and extensions. Each category’s properties are contained in a list that you expand or collapse by clicking the Plus (+) button next to the category name. Set properties appear (in blue) at the top of the list.

List View displays all of the Dreamweaver-supported CSS properties in alphabetical order. Set properties appear (in blue) at the top of the list.

Set Properties view displays only those properties that have been set. Set Properties view is the default view.

The bottom of the CSS Styles panel also contains these buttons:

Attach Style Sheet opens a dialog box to choose and link an existing external style sheet to the currently active document. You can also use this dialog box to import embedded styles from another HTML document to your active document.

New CSS Rule opens that dialog box, which you already accessed from the CSS tag of the Properties Inspector.

Edit Style opens the CSS Rule Definition for the active style. Be careful here. Dreamweaver opens the style that it thinks is active, but

Jeffrey Diamond • ©2013

Using Dreamweaver to Create Page Layouts with CSS Page 13

it may not be what you want. It is a good idea to select the desired element in the Tag Selector, when editing a tag. To edit a non-tag selector, set the Styles panel to Show All, highlight the desired style, and then click the Edit Style button.

The Delete button will either delete a rule or a property, depending on what is highlighted in the Styles panel.

the CoDe navigator

The Code Navigator is useful for viewing the CSS of a given element, and then jumping right to it in the code, but its indicator is most annoying. The indica-tor seems to appear in the previous place selected, with a delay, and you can’t move it around when it covers up things. You can disable the indicator by clicking its indicator to reveal the Code Navigator window, and then clicking Disable in its lower right corner.

Unfortunately, the Code Navigator cannot be re-sized, but it is useful.

1. Command + Option + Click or Ctrl + Alt Clickon something to reveal the Code Navigator.(Command Option N for Navigator does thesame thing.)

2. Click on one of the styles to see its properties.

3. Click a property to navigate right to it in code—wherever its style lives. If in Design view, your viewwill change to Split view.

externaL styLe sheets

You can use File > New to make a new, blank .css document. Typically, that is not how I work. Instead, I start out by designing an individual page, with my styles kept internally in the head of my document. Then, when I am ready to make a second page in my site using the same styles, I move my internal styles to their own external style sheet. (See page 119-121 of our textbook for specifics.)

Once I do that, I typically edit my styles or define new ones ONLY in the external style sheet, and avoid internal styles unless I define a style that is specific to only the current page, and not to the site as a whole. It is critical to work this way to avoid style confusion, such as unintentionally having an <h1> style defined both externally and internally.