To highlight a paragraph we are going to follow almost the same steps like in highlighting specific words (previous page).

Step 1: Go to your text editor and find the paragraph that you wish to highlight.

Step 2: We are going to embed the paragraph in p tags, that looks like this : <p>..........</p>


Note: Your paragraph may already be inside of p tags. In that case you can skip this step


Step 3: Inside of our p tag we willadd the exact same code like in the previous page:
style="background-color: #ff8080;"

So, our code will now look like this:



This code will give this result:

Well it's not quite what you were imaging, was it?

This doesn't look so good because the border of the color is exactly where the border of the text is.

To fix that, we are going to add some padding.

Step 4: The code for adding some padding is this: padding: 10px;


So, our code will now look like this:


Click on visual:



By changing the number 10 you can determine how big the padding will be.


And we're done !!


Click on Next page to see how to do rounded corners and a border-line.




Join the Discussion
Write something…
Recent messages
Chrissies Premium
Many thanks for this Athanasia :)
Reply
Athanasia Premium
You're welcome Chrissie :)
Reply
SadieChan Premium
Thanks, Great training.
Reply
Athanasia Premium
My pleasure Sadie :)
Reply
GautamWorld Premium
Useful information. Thank you, Athanasia!
Reply
Athanasia Premium
You're welcome Gautam :)
Reply
reanna1 Premium
Thank you so much, Athanasia!
Reply
Athanasia Premium
You're very welcome Reanna :)
Reply
jvranjes Premium
This is very useful. I use these color blocks a lot. Have problems with tables but it works somehow. No idea if this is well accepted by readers or not. Do you know more?
Reply
Athanasia Premium
Thank you Jovo :)

If it's well accepted by readers?
Well it depends on how you use it. Everything matters; the colors, where you will place it, if the content inside of the box needs to be highlighted etc.
A website can have a bad or good user experience and that depends on many things.
Here is an interesting article about user experience
https://www.usertesting.com/blog/2015/09/16/what-is-ux-design-15-user-experience-experts-weigh-in/
Reply
jvranjes Premium
Obviously very hard to find an answer.
Reply
Athanasia Premium
yes lol
Reply
Top