Highlight A Quote Using CSS

Posted by Neville on July 11, 2012 under How To | 2 Comments to Read

Using CSS Directly In A Post.

In this example I have used CSS directly in the post to setup a box that can be used to highlight a portion of the text.

Styling can be done one post at a time, but it is much more efficient to use an external stylesheet.

Since the style coding is only on this post, the styling will only be achieved here. If I want to make it available to other posts it will have to be added to the Stylesheet that forms the core of this theme. But for this test, the code is added to the HTML editing box when creating this post.

The styling has been applied to a specific paragraph in the text. This was done by attaching a class that is defined in the CSS code.

If this test example provides a great way to highlight some text or to single out a quote, and it is likely to be used again, it will be added to the theme’s CSS stylesheet. From there it will be possible to use it onĀ  any post or page by simply using the class with the paragraphs that are to be highlighted. That will also provide a consistent method for highlighting parts of the text.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
  • Philippe Moisan said,

    Hello Nev,

    This is indeed very nice, it makes the page look very professional. I will try it with business pages.

    Thanks!

    Philippe

  • Neville said,

    Hi Phil,
    Yes, this technique could be used anywhere that accepts CSS style code. It is indeed useful for emphasizing a quote or an important point.