CSS Highlight Effect for HTML Text Paragraph DIV

To increase text readability, we need to decorate text in many ways. Using CSS, highlighting text is also a one of the most popular way. Here in this article I will describe how to apply CSS highlight effect in your text. You can apply this CSS style in Div’s, Paragraphs, Sections, Headers means in all HTML tag that contain your text. Also you can apply this highlighting effect as a whole or partially in your HTML elements. It’s very easy like other CSS properties. So what is the property we are going to use? Wait! just keep reading.

 

You may consider below reasons for highlighting text:

  • To grab user attention
  • To make different color for different meaning like priority, severity etc.
  • For text beautification
  • To style paragraph headers
  • To isolate/differentiate text portions
  • To accommodate significant text block back color dynamically
  • To create marker

Required CSS Property:

The background-color CSS property will help you to highlight text background color. Below is the CSS class where I use this property to achieve highlight effects on text.

.highlight {
    background-color: #FFFF00;
}

Now I will show how to apply the above CSS class in your HTML page to get CSS Highlight Effect.

CSS Highlight Div Text:

If you want to highlight whole text of a DIV then use the CSS class like below:


<div class="highlight">
	How to highlight text using css in HTML page
</div>

Note: Background color applied on whole DIV.

CSS Text Highlight:

If you want to highlight some words of a text line only then follow the below technique:

How to <span class="highlight">highlight text</span> using CSS in HTML page

Note: CSS applied only on “highlight text”.

CSS Paragraph Text Highlighter:

To highlight full paragraph text use the below CSS code sample:

<p class="highlight">
	How to highlight text using css in HTML page
</p>

Note: CSS applied on whole paragraph text.

Complete Code Sample of CSS Highlight Effect:

<head>
<style>
.highlight {
    background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="highlight">
	How to highlight text using css in HTML page
</div>
<br/>
How to <span class="highlight">highlight text</span> using css in HTML page
<br/>
<p class="highlight">
	How to highlight text using css in HTML page
</p>
</body>

Output Screenshot:

css highlight effectSome Importatnt CSS Tips:

  • Use background-image to achieve CSS3 gradient effect
  • Choose proper color combination for background color and text color for easy reading
  • Background of an element is equal to the total size of the element including padding, border except margin

Hope all confusions resolved now. If you have any different opinion or experience on CSS Highlight Effect please write a comment. Don’t hesitate to share with us.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code