You are currently viewing highlight Text in a Paragraph Using HTML & CSS

highlight Text in a Paragraph Using HTML & CSS

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Highlighting Paragraph Using HTML & CSS.

An Certain paragraph is getting highlighted with the help of CSS which is to mark important ones. So this is what the project is.

highlight Text in a Paragraph Using HTML & CSS

So Now We are going to create this project and for that we were adding the HTML code first.

HTML CODE For Highlighting Paragraph

<blockquote>
  <p>
    “<span class="highlight">Focused, hard work is the real key to success. Keep your eyes on the goal, and just keep taking the next step towards completing it. If you aren't sure which way to do something, do it both ways and see which works better.</span>”
  </p>
  <cite>-John Carmack</cite>
</blockquote>

<blockquote>
  <p>
    “<span class="highlight">Focus is a matter of deciding what things you're not going to do.</span>”
  </p>
  <cite>-John Carmack</cite>
</blockquote>

<blockquote>
  <p>
    “<span class="highlight">Low-level programming is good for the programmer's soul.</span>”
  </p>
  <cite>-John Carmack</cite>
</blockquote>

<blockquote>
  <p>
    “<span class="highlight">A strong team can take any crazy vision and turn it into reality.</span>”
  </p>
  <cite>-John Carmack</cite>
</blockquote>

 

First we are adding an blockquote tag and inside of it we started adding paragraphs. Now The paragraph tag is created and the contents for paragraph is added by using span tag with separate class names.

The Author name’s were added and that is left constant ,but only the paragraphs might get highlighted.

The cite tag is used for adding the name’s of specific author related to quotes.

Portfolio Website Using HTML ,CSS and Javascript Source Code

So that’s of for HTML , Now We move for CSS to make highlights.

 

CSS CODE For Highlighting Paragraph

body {
  font-size: 20px;
  line-height: 1.5;
  max-width: 64rem;
}

.highlight {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(255, 224, 0, 0.3),
    rgba(255, 224, 0, 0.7) 95%,
    rgba(255, 224, 0, 0.1)
  );
}

 

Here first we adding the properties inside Body tag , the properties were font-size , line-height and max-width. The line height is used for adding spaces between the paragraphs and the size for paragraph for the screen is fixed with max width property.

Now By calling the span class with names and adding the radius and BG color with the help of gradient properties. So the highlight would appear on the given paragraphs.

So for now we have completed our project by adding the source codes. We would make use of output section given below for the preview of our project.

 

FINAL OUTPUT Of Highlighting Paragraph


Now We have Successfully created our Highlighting Paragraph Using HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Jonathan

WRITTEN BY – Ragunathan S

Leave a Reply