How to Create a *Special Notice* Box with CSS

Every now and then, you may need to post a short message or notice to let your website visitors know about something out of the ordinary. Actually you can use this little technique for multiple purposes! Creating a back-drop for such notices is an easy process that can truly make this message….noticable! With just a little CSS code put directly into your post, you can make these messages look almost any way you want them to. Here’s an example:

*Notice to Readers - On December 25, I’ll be spending the entire day with my family and visiting relatives, so I will not be posting this year on Christmas day. I will resume my posting immediately after the holidays. Have a Merry Christmas!

1. The first step is to create the message:

*Notice to Readers - On December 25, I’ll be spending the entire day with my family and visiting relatives, so I will not be posting this year on Christmas day. I will resume my posting immediately after the holidays. Have a Merry Christmas!

2. Next, we’ll wrap the message in a div and add some style:

The orange text is the code to be placed around the message.

This is the div to place around the statement.

3. There is no third step. That’s it!

I love that you can make this an effective part of your website, and it’s just not a difficult process to include. Even if you’re not familiar at all with CSS, you should be able to look at the code and distinguish what controls each element. Enjoy!

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Bumpzee
  • Reddit
  • StumbleUpon

One Comment ⇓

  1. […] my last post, I showed you an easy way to wrap text in a box using CSS by placing the CSS/HTML code directly in […]

Discussion Area ~ Leave a Comment