Two Beautiful CSS Boxes

• Open two browser windows (this makes copying and pasting easier)


• Leave this page open in one browser window and open the page that you want to edit in another browser window.


• Highlight the line of code. Start highlighting after the words 'first line of code:' Then right click and copy.


• Switch to your page that you are editing and paste the line at the point you want the box to appear.


• Write the text that you want to appear in the box. Write your text after your pasted line of code.


• After your text either copy and paste from this page the code after the words, 'second line of code:' or simply type </p> after your text that you want to appear in the box.

Bold and brash, yet calm and gentle. I present to you the little blue number.

I have used this to catch the eye and to draw attention to places on my lens that I have links to products.

To see it in action, take a look here - it is midway down the page.

Here is how to get a lovely little blue box of your own:

First line of code:

<p style="background: #E1E8F2; padding: 15px; margin: 0;border: solid 05px #069;">

Second Line of code:

</p>

As simple as that.

Zesty and vibrant, no little blue number would be complete without the Orange Accessory.

I have used this in exactly the same way as the blue box. I like it a lot.

Again, to see it in shaking its stuff, click here It is below the blue box.

Here is how to get a gorgeous orange box that will give you and your readers pleasure time and again:

First line of code:

<p style="border: solid 05px #ff6600; padding: 10px;background: #FCF8C0;">

Second line of code:

</p>

And there you have it.

So for example to create a thicker border change the value after border to something higher than '05'. This is '30'.

This is a border done at '05'. It is also 'outset' rather than 'solid'. The background colour is 'ff6600'. Giving us a s multicoloured box that looks like it is coming out of the page.

Dotted

Dashed

Double

Groove

Ridge

Inset