Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Change The Background Of The Area Within My Border?

In our Linda's How-Do-I Series? How Do I Use Margins, Padding, and Borders? article we showed you how to add borders to text and to pictures.

Well, let's say we want to change the background color of the area within the border - how would we do it?

Well, here's how:

To review just a little last time we added a border to the text "Linda Walsh Originals" and the HTML code was as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 1px solid ;">Linda Walsh Originals<***/span>

and that produced this:

Linda Walsh Originals

Now, let's say I want the background color between my border to be a different color than white. Let's say I want it to be yellow. Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***span style="background-color:yellow; border: 3px solid;">Linda Walsh Originals<***/span>

and that would produce this:


Linda Walsh Originals

Last time we also showed you how to make the border thicker and how to add some padding around the text. Here's the HTML coding that we used for that (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 3px solid ; padding: 15px;">Linda Walsh Originals<***/span>

and that produced this:


Linda Walsh Originals


Now let's say in that example we want to make the background color between the borders yellow and the font and border color black. Here's the HTML coding to do that (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 3px solid ; padding: 15px; background-color: yellow;color:black;" >Linda Walsh Originals<***/span>


And that would produce this:


Linda Walsh Originals


I hope this helped to show you how to change the background color around text and between the border around your text.


Posted by Linda Walsh Originals - "Doll Patterns for Grown-up Girls!"
Linda Walsh Originals E-Patterns - "Instant Download E-Patterns for Grown-up Girls!"

No comments:

Post a Comment