• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 12. Using Find and Replace > Using Find and Replace to Apply a Custom St...

Using Find and Replace to Apply a Custom Style

Now that you have removed the local color and bold formatting from the text, you can apply a custom CSS style to it. In this lesson, you will use Find and Replace to locate the text in the HTML source window and apply the HTML tags for the custom style. You can do this even if you are not familiar with HTML.

In the welcome.htm document, link to the external style sheet search_style.css, located in the Files_to_Style folder, by clicking the Attach Style Sheet button on the CSS Styles panel.

If the CSS Styles panel is not visible, choose Window > CSS Styles.

This style sheet has three custom styles already created. You need to attach a style sheet first before you can apply any of the custom styles.

Select the first occurrence of the phrase “Compass Adventure Travel” in the body text. Click the boldcolor custom style from the CSS Styles panel to apply it to the selected text.

The text changes to reflect the bold and red attributes that are defined by the custom style.

Choose Edit > Find and Replace, change the Search For drop-down menu to Source Code, and type Compass Adventure Travel in the text box.

The dialog box that appears will change to reflect the Source Code search method.

Leaving the Find and Replace dialog box open, click Show Code View on the toolbar.

Look at the HTML for the custom style you just applied. You should see: <span class="boldcolor">Compass Adventure Travel</span>.

Copy all the HTML in the code view beginning with <span class="boldcolor"> and ending with </span>.

You must be in code view to copy the HTML along with the text; otherwise, you get just the text and no HTML. You should now have <span class="boldcolor">Compass Adventure Travel</span> selected.


You could choose Edit >Copy HTML to copy the HTML as well as the text without being in code view.

Return to the Find and Replace dialog box. Paste into the Replace With text box the HTML code you copied in step 5. Uncheck the three additional options.

Dreamweaver will replace all occurrences in the text with this code.

Click Find Next to select the next occurrence of the words “Compass Adventure Travel.” Click Replace to change the text and add the HTML. Verify that the change is correct and click Replace All to change all occurrences in your document. Click OK to close the message box that reports the numbers of changes made.

All Compass Adventure Travel text is now formatted with the boldcolor CSS style. Using Find and Replace to apply styles in this way can save you a lot of time.

Close the Find and Replace dialog box, and then click Show Design View to return to the design window. Save this document.

Look back to the first occurrence of “Compass Adventure Travel” where you manually applied the custom style. You should see that now you have two <span> tags applied to this text because Find and Replace added the extra tag. Although the phrase appears to display properly in Dreamweaver, you need to remove the extra tag. Choose Commands > Cleanup HTML. Make sure Redundant Nested Tags is selected in the Cleanup HTML dialog box and click OK. Dreamweaver removes the extra <span> tag.

You can close this file.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint