Test: vertical bars at left

This is an attempt to put vertical bars to the left of things in html5. This can be very useful if you want to set something off from its surroundings. The text is rather longwinded and rambling to make it long enough that it should overflow in most windows, at any legible font size.
This text should be drawn with a blue vertical bar on its left. A second block of text is included that should be indented a bit more:
To complicate matters, I've added this nested chunk of text inside the first block, and it should also have a somewhat thinner green vertical bar on its left. The "width" attribute is used to change the right margin of this text block, to contrast better with the outer paragraph.
How do these indented paragraphs of text look look in your current window? The vertical bars are supposed to extend only partially through the blank spaces between the blocks of text, controlled by the "margin" and "padding" attributes. What does all this do if you (can) resize the window?
This sentence is after the text that should have the vertical bar at left. If the above doubly-nested test blocks don't work on your screen, you might send me a message describing the problem, and also say what browser you're using, and which kind of computer system you have.

If this is too complex, I also have simpler test page that has only one level of indentation.

You're welcome to copy this test document and play around with it, to learn how to control this stuff with CSS.