IT tutorials
 
Graphics
 

Adobe Dreamweaver CS5 : Creating and Applying Styles (part 3) - Applying, changing, and removing a style

4/16/2013 3:03:23 AM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

4. Applying, changing, and removing a style

As noted, any HTML tags redefined as CSS styles in an attached style sheet are automatically applied to your document. However, any custom CSS style must be applied on a case-by-case basis. Most Web designers use a combination of HTML and custom CSS styles. Only custom CSS styles appear in the CSS Styles panel in Apply Styles mode or in the Class list in the HTML tab of the Property inspector.

In Dreamweaver, you can apply a style in four main ways: from the Property inspector, the menus, the Tag Selector, or the CSS Styles panel.

To apply an existing custom style using the Property inspector, follow these steps:

  1. To apply the style to a section of the page enclosed by an HTML tag, and select the tag from the Tag Selector; if you're applying the style to text, you can also just place your cursor in the text without selecting the containing tag.

    To apply the style to a section that is not enclosed by a single HTML tag, use your mouse to highlight that section in the Document window.

  2. Select the custom style from the Class list in the HTML tab of the Property inspector for class styles or from the ID list for ID selectors, if available. Dreamweaver applies the custom style either by setting the class or id attribute of the selected tag to the custom style. If you select only text and not an enclosing tag, Dreamweaver wraps a <span> tag around the selection.

The second approach is to use the menus to apply a style to your pages. Follow these steps:

  1. Highlight the text to which you're applying the style, either by using the Tag Selector or by using the mouse.

  2. Choose Format => CSS Styles => Your Style. The same dynamic CSS Class list is maintained in the Set Class entry of the context menu, accessible through a right-click (Control+click) on the selected text, as shown in Figure 6.

Figure 6. Dreamweaver collects all the classes available to the current document, whether from embedded styles or from external style sheets, and displays them alphabetically — and graphically — in the Tag Selector's Set Class list.

The third approach is to use the Tag Selector exclusively. Right-click (Control+click) the selected tag name in the Tag Selector and choose the style from either the Class or ID submenus.

Finally, you can use the CSS Styles panel itself to apply a style:

  1. Select the tag or text to which you want to apply your style.

  2. In the CSS Styles panel, right-click (Control+click) the style and choose Apply from the context menu.

NOTE

Dreamweaver supports multiple classes for rendering purposes, but there is no method except hand-coding to apply more than one class to a tag.

4.1. Changing styles

Changing from one applied custom style to another is extremely straightforward in Dreamweaver. Just place your cursor anywhere within the styled text and select a different custom style from the Class list on the Property inspector. Dreamweaver changes the old style to the new instantly. You get the same results if you switch styles from the Tag Selector or use the menus.

But what if you want to apply a new style to a text range within an existing <span> tag? Dreamweaver, by design, avoids nested <span> tags. Here's how it works. Suppose that you're working with the following code:

<span class="bodyCopy">Developing strategies to survive requires industry
insight and forward thinking in this competitive marketplace.</span>

If you apply a custom style called hype to the phrases industry insight and forward thinking by first selecting those phrases and then choosing hype from the Class list, the code looks like this:

<span class="bodyCopy">Developing strategies to survive
requires </span><span class="hype">industry insight</span>
<span class="bodyCopy"> and </span><span class="hype">forward
thinking</span><span class="bodyCopy"> in this competitive marketplace.</span>

					  

Dreamweaver wraps each phrase in a distinct <span> tag so that nesting is entirely avoided. This behavior enables the style of each phrase to be altered more easily.

Although the use of the <span> tag is unavoidable under some circumstances, be careful not to overuse it. It's far better to apply a logical tag that makes sense in the context, such as <em> (emphasis) or <cite>, and then to create a CSS style that formats those tags for the look you want.


4.2. Removing applied styles

Getting rid of an applied style is just as easy as changing it. Now, just position your cursor anywhere in the stylized text and select None from the Class list. Dreamweaver also removes the no-longer–needed class attribute for all but the <span> tag. If you remove the class from a selection marked by <span> tags, Dreamweaver deletes the surrounding <span> tags.

NOTE

Be sure your cursor is positioned within the styled text and not selecting any of the text. Selecting None from the Class list on the Property inspector when just text — not tags — is highlighted forces Dreamweaver to remove the style from the tag and apply it to <span> tags on either side of the now unstyled text.

Styles can also be removed through the Tag Selector — just right-click (Control+click) any styled tag on the Tag Selector and choose Set Class None.

Applying External Style Sheet Styles

In this Technique, you attach an existing style sheet to a page and assign styles to various page elements.

  1. In the Technique site, expand the 06_css folder and open css_start.htm.

  2. If necessary, choose Window => CSS Styles to expose the CSS Styles panel.

  3. At the bottom of the CSS Styles panel, click Attach Style Sheet.

  4. When the Attach External Style Sheet dialog box opens, click the Browse button.

  5. In the Select Style Sheet dialog, browse to the styles folder in the root of the site and select primary.css.

  6. From the Media list of the Attach External Style Sheet dialog box, choose All; click OK when you're ready.



You'll notice that certain parts of the page, like the headings and paragraphs, are automatically styled because the style sheet includes rules for those tags. Now, let's apply some styles to specific page elements.

  1. Place your cursor in the first heading, Coming attractions.

  2. From the Tag Selector, choose the <div> tag to the left of the <h1> tag.

  3. In the Property inspector, select middle from the Div ID list.

The #middle style adds an outside border and increases the padding. Now, add a class to differentiate the first paragraph under each heading.

  1. Place your cursor in the first paragraph beneath the initial heading.

  2. Right-click the <p> tag in the Tag Selector and choose Set Class => firstParagraph.

  3. Repeat the preceding Steps 1 and 2 for each of the remaining paragraphs under the different headings.

Finally, apply classes to the images to help the page flow.

  1. Select the first image on the page.

  2. From the Property inspector's Class list, choose .imageLeft.

  3. Repeat the preceding Steps 1 and 2 for the remaining images, alternating between the .imageLeft and .imageRight classes.

  4. When you're done, save your page.



The two image-related styles align the image differently and add additional padding to complete the effect.

 
Others
 
- Adobe Dreamweaver CS5 : Creating and Applying Styles (part 2) - Applying styles through the Property inspector, Attaching an external style sheet
- Adobe Dreamweaver CS5 : Creating and Applying Styles (part 1) - Generating new styles
- Adobe Illustrator CS5 : Working with Objects - Using the Shape Builder Tool
- Adobe Illustrator CS5 : Working with Objects - Creating Grids
- Adobe Photoshop CS5 : Additional Selection Commands
- Adobe Photoshop CS5 : Basic Selection Tools
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 3) - Three-slice technique for content containers
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 2) - Round-trip editing
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 1) - Copying and pasting to Dreamweaver
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Organizing Layers
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS