Web Design - Use CSS And Dreamweaver To Highlight Text (4/MX)


Want to highlight a line or two of text so that viewers will quickly take note? Cascading Style Sheets (CSS) make it very easy to add this visual cue to a page. To do so in Dreamweaver, open a document that contains text you want to highlight and then:


  • Choose Window > CSS Styles to display the Design panel
  • In that panel
  • Select CSS Style (if it's not already selected)
  • Choose New CSS Style from the Design panel's pop-up menu

Name the new style .highlighter and keep the other default options by:


  • Clicking the OK button
  • Now, in the CSS Style Definition dialog box
  • Choose Background from the Category list
  • Choose a yellow color from the Background Color swatch pop-up (or you can choose a color that goes better with your color scheme)
  • Then, just click the OK button
  • With the style created, all you need to do to add the effect is
  • Select the text with the mouse pointer
  • Choose Highlighter from the CSS menu
  • When you do, the text looks just like someone's highlighted it with a highlighter marker

Go back