Special Messages

Do you have an important message you'd like to display on your homepage? Why not bring attention to it with some CSS styling!

STEP ONE

I'd like to use a paragraph of text with an icon and have the text align to the right of the icon. Since it will only appear once on the page, let's make it an id and call it message. The HTML for that would be as follows:

<p id="message">Place your special message here.</p>

STEP TWO

Now to style the message. Let's use the following CSS:

#message {
width: 500px;
color: #000000;
border: 3px solid #e6db55;
background: #fffbcc url(images/flag.gif) no-repeat 15px 5px;
padding: 5px 5px 10px 50px;
}

This is what you should get:

Place your special message here.

I use this on Search For Soccer when I need to announce things.

CSS Description

Let's understand what the CSS styling does.

The width defines how wide the box will be. If you want the box to go as wide as it's parent div, then remove this line.

The color defines the color of the text.

The border defines the border that goes around the paragraph. 3px is the weight of the border, solid is the style of the border, and #e6db55 is the color of the border.

The background defines the icon and background color of the paragraph. #fffbcc is the background color of the paragraph, url is the path to the icon, no-repeat means that the image should not be repeated it should only show once, 15px is the horizontal position and 5px is the vertical position of the icon.

The padding defines the space between the text and the border. It goes top right bottom left. So 5 pixels for top and right, 10 pixels for bottom and 50 pixels for left.

More CSS Tutorials