What you are referring to is called a “block quote”, simply put it’s an HTML element that has existed for a long time now and works in every browser. By default they span the entire with of their parent container but with some careful CSS styles you can create a very dynamic and clean element to wrap your quotes/important copy in.
1.) What are your thoughts on Call-Out Boxes in general?
I personally don’t use them much as i don’t quote a lot of things but when i do i find then to be effective in making the reader more interested in what their currently reading.
2.) Can Call-Out Boxes be effectively used on the Web?
Yes, in the example link the block quote is a great example of a quick reference before the article paragraph which as i said gets the reader more interested in what they are reading.
3.) Do Call-Out Boxes look more “professional” than my sample above with the red, bold text?
Yes, they are much more professional as a reader will know they are reading a snippet of quoted copy instead of a straight paragraph.
4.) What is the best way to implement a Call-Out Box using HTML and CSS?
As i said HTML has an element called <blockquote> which is designed for this specifically, you can use it like the following exampe: