Embedded Text Boxes

A basic text box with a background colour is very easy to create in html

This code makes the basic text box above.

<div style="background-color:rgb(255,204,204);padding: 1.0em;width: 45.0em;margin: 1.0em 0;border: solid 1.0px rgb(255,204,204);">

<h2>H2 Heading</h2>

<p>First paragraph.</p>

<p>Second paragraph.</p>

</div>

It is easy to change and adapt this basic html to make more complicated text boxes.

Coloured text boxes with borders

Copy the code below

<script language="JavaScript">document.write('<div style="width: 80%; margin: 10px auto 10px 30px; border: 5px ridge #ffcc00; padding: 10px; background-color: #00cccc;">')</script>Put text in here<script language="JavaScript">document.write('</div>')

</script>

You can change the border colour and style, and change the font to the font family you want, change the size bigger or smaller, and change the colour. e.g.

<p style="font-family:verdana;font-size:100%;color:gold">

Border styles

solid

double

groove

dotted

dashed

inset

outset

ridge

hidden

You can also use ordinary html font tags - bold <b>, italics <i>, underline <u>, centre <center>, etc.

You can make content boxes like the one above, to make parts of the text stand out. All parts of these boxes are customisable.

This code makes the box.

<div style="background-color: #CCCCFF; -khtml-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius:

15px; border: 2px solid #000; padding: 10px;">

<center>

<h2>If you want a heading it goes here</h2>

</center>

<br />

The text for your content box goes here. The text for your content box goes here.

<br>The text for your content box goes here. The text for your content box goes here</div>

Change the colour of your box and border by selecting the hexadecimal number of the colour you want and replacing it in the code.

I centred the heading but you can remove the centring (or remove the whole heading if you don't want it). Also you can change the heading size by changing the h number (1 is the biggest and 6 is the smallest).

You can change the appearance of your box by making a few changes to the code.

My corners in the example above are 15 px. You can make this bigger or smaller. Increasing them can round the edges of your text box.

e.g. here I have made the corners 100px.