RSS

[html] Highlight or draw a box around some text

25 Oct

While blogging for this site, I often want to highlight or draw a box around a certain part of the text; e.g., I feel that it looks nicer if I put a box around a snippet of code, or put a darker background when I put something which needs to be typed in the command line.

 

Highlight some text

<blockquote><div style="background-color:#DCDCDC; color:#000000; font-style: normal; font-family: Georgia;">TEXT_HERE</div></blockquote>

 

Note:

1. For a list of HTML Hex color codes, refer to this wikipedia page.

2. If the text color is already black then color:#000000 is redundant. Similarly, if the text is already normal (i.e., not boldfaced or italicized), then font-style:normal is also redundant. However, I put them there, just to remind myself that they can be altered too!

3. You can remove the blockquotes tags if you don’t like the blockquotes!

 

Draw a box of solid/dotted lines around some text

<div style="border:1px dotted black;padding:2em;">TEXT_HERE</div>

Change dotted to solid to make the lines in the box solid.

About these ads
 
9 Comments

Posted by on October 25, 2009 in html

 

Tags: , , , , , ,

9 responses to “[html] Highlight or draw a box around some text

  1. Dave

    September 7, 2010 at 9:37 AM

    Hi,

    I don’t know if you even check this page any more – I guess not, as your last post appears to be in May….. but I just wanted to leave a quick comment saying thank you for all the help this site has given me when buiding/developing my own personal page.

    Cheers,

    Dave

     
    • kousik

      September 14, 2010 at 7:27 PM

      @Dave
      You are very welcome!
      I’m glad that this blog was of some help to you. BTW, although the last page is very old I do stop by here often in order to look up some information.

      Thanks for stopping by.

       
  2. gillian morrison

    February 16, 2011 at 1:03 AM

    love this post, simple elegant stuff thats not obvious to the html newbie….i tweak it and everything, bless you bloggers!

     
  3. Niko

    June 25, 2011 at 6:05 AM

    thanks a lot buddy… useful info…

     
  4. Pranab

    October 27, 2011 at 1:05 AM

    Excellent! Just what I have been dying to find out. Thanks a ton for the advice! :-)

     
  5. David

    July 11, 2012 at 10:12 AM

    Thanks for the article!

    One question – how would I make the text in the

    move to the centre of the box?

     
  6. Anonymous

    February 12, 2013 at 4:29 PM

    text-align:center

     
  7. merve

    April 30, 2013 at 10:53 PM

    Thank you, i was looking for this like two hours. Very helpful :))

     
  8. Anonymous

    May 13, 2013 at 11:43 AM

    This was just what I was looking for. Thank you!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 34 other followers

%d bloggers like this: