[html] Highlight or draw a box around some text

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