The following couple of paragraphs will be used as a test bed for our DIV styles.
This text has no explicit fonts, or styles attached. The text is plain for all to see. The background is plain white and the text is whatever your browser defaults to. We shall use this as a base for our document, and apply different styles etc, using a <DIV> tag. Notice now. that I have specifically coloured that last bit blue. This will not be affected by the colours etc that I apply using a local style sheet & the <DIV> tag. (Oops, I did it again !)
This is another paragraph of text. It is here simply so that I have some additional paragraphs of text so that you can see the differences between different areas of the document when I start adding different stuff to the <DIV> tag. (Notice I didn't colour that one blue !)
OK, so there we have two plain old paragraphs with a couple of bits of blue thrown in for good measure. Now Select the first paragraph and surround it with DIV tags - the code looks like this :
<DIV>
This text has no explicit fonts, or styles attached. The text is plain for all to see. The background is plain white and the text is whatever your browser defaults to. We shall use this as a base for our document, and apply different styles etc, using a <DIV> tag. Notice now. that I have specifically coloured that last bit blue. This will not be affected by the colours etc that I apply using a local style sheet & the <DIV> tag. (Oops, I did it again !)
</DIV>This is another paragraph of text. It is here simply so that I have some additional paragraphs of text so that you can see the differences between different areas of the document when I start adding different stuff to the <DIV> tag. (Notice I didn't colour that one blue !)
You will notice that I have not included the second paragraph in my DIV area. Next we add some style details, first the font colour is amended to become green by changing the DIV tag to look like <DIV STYLE="color: green">. Notice too that the second paragraph is not affected and that the original explicitly coloured text (in blue) is still shown in blue.
This text has no explicit fonts, or styles attached. The text is plain for all to see. The background is plain white and the text is whatever your browser defaults to. We shall use this as a base for our document, and apply different styles etc, using a <DIV> tag. Notice now. that I have specifically coloured that last bit blue. This will not be affected by the colours etc that I apply using a local style sheet & the <DIV> tag. (Oops, I did it again !)
This is another paragraph of text. It is here simply so that I have some additional paragraphs of text so that you can see the differences between different areas of the document when I start adding different stuff to the <DIV> tag. (Notice I didn't colour that one blue !)
So there we have a green paragraph. It could equally well have included the second paragraph, or even the whole document, or whatever you decide. Everything inside the DIV tags will be affected, everything outside will not. I can put a red border around the paragraph by setting the DIV tag to <DIV STYLE="color: green; border: thin solid red"> Notice that you need to specify the size, style and colour of the border in the border attribute, if not, the border doesn't show up (in IE anyway !)
This text has no explicit fonts, or styles attached. The text is plain for all to see. The background is plain white and the text is whatever your browser defaults to. We shall use this as a base for our document, and apply different styles etc, using a <DIV> tag. Notice now. that I have specifically coloured that last bit blue. This will not be affected by the colours etc that I apply using a local style sheet & the <DIV> tag. (Oops, I did it again !)
This is another paragraph of text. It is here simply so that I have some additional paragraphs of text so that you can see the differences between different areas of the document when I start adding different stuff to the <DIV> tag. (Notice I didn't colour that one blue !)
Finally, add in a background colour of Ivory (or "#FFFFF0" as it is better known, by changing the DIV tag again, to <DIV STYLE="color: green; border: thin solid red; background: #FFFFF0">
This text has no explicit fonts, or styles attached. The text is plain for all to see. The background is plain white and the text is whatever your browser defaults to. We shall use this as a base for our document, and apply different styles etc, using a <DIV> tag. Notice now. that I have specifically coloured that last bit blue. This will not be affected by the colours etc that I apply using a local style sheet & the <DIV> tag. (Oops, I did it again !)
This is another paragraph of text. It is here simply so that I have some additional paragraphs of text so that you can see the differences between different areas of the document when I start adding different stuff to the <DIV> tag. (Notice I didn't colour that one blue !)
And that is all there is to it. Easy or what ?