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

Lesson 14. 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 italic and color formatting from the text, you can apply a custom CSS style to the document. In this exercise, you will use find and replace to locate the text in the HTML Source window and apply the HTML tags for the custom style.

In the women.html document, link to the external style sheet light_style.css located in the Lesson_14_Find folder by clicking the Attach Style Sheet icon on the CSS Styles panel.

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

This style sheet has two custom styles already created. You need to attach the style sheet first before you can apply the custom styles.

Select the first occurrence of the word “keepers” 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 brown 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 keepers in the text field.

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

Leaving the Find and Replace dialog box open, look at the HTML for the custom style you just applied in step 2.

You should see <span class="boldcolor">keepers</span>.

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

You must have the Code View pane visible or 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">keepers</span> selected.

Return to the Find and Replace dialog box. Paste the HTML code you copied in step 5 into the Replace With text field. 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 word “keepers.” Click Replace to change the text and add the HTML. Verify that the change is correct. Click Replace All to change all occurrences in your document. Click OK to close the message box that reports the numbers of changes made.

The Property inspector will let you know that changes have been made to the code. Once you click OK the document refreshes and the changes are visible.

All instances of the “keepers” are now formatted with the boldcolor CSS style. Using find and replace to apply styles in this way can save you a lot of time.

The Find and Replace dialog box closes automatically.


When using this method, you will need to be certain that there no occurrences of the word that you are replacing (in this case it is “keepers”) in the code anywhere but in the text. If any images were named “keepers,” or if “keepers” was part of a pathname, you would have problems with your code. When in doubt, use the Replace button rather than the Replace All button so you can double-check the item to be replaced.

Save this document. If a list of results appears in the Results Window, click the context menu in the upper right corner of the Results window and choose Clear Results; then close the Results window.

Look back to the first occurrence of “keepers” 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 word appears to display properly in Dreamweaver, you need to remove the extra tag. You can manually remove the custom style by selecting the text in Design View, choosing None from the CSS Styles panel and then reapplying the style, or you can choose Commands > Cleanup HTML. Make sure Redundant Nested Tags is selected in the Cleanup HTML dialog box and click OK. Dreamweaver will remove the extra <span> tags.

You can close the women.html file.



Not a subscriber?

Start A Free Trial

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