Here's an example of an inline style. I have created a STYLE wherein italics are purple, 28 point type. But in THE NEXT SENTENCE ONLY, I have forced the <i> tag to mean: italic, red and in a specific font-size (28). So this sentence is italicized, red and 36 point.
Here's some examples of one-time alignment. Notice that italicizing,
as shown in the preceding sentence, is back to my original style
definition. Notice that the aligned text is dropped below the bottom of the preceding
text for "bottom" alignment. This gets you aligned to the LINE, rather than the
font size 5
Notice that the aligned text is dropped below the bottom of the preceding text for "bottom" alignment. This gets you aligned to the LINE, rather than the TEXT.
Here I've defined a style as a class. We will use it a couple of ways. Note that in both usages, the class has NOT been tied to a specific HTML tag! That means I can use it any way I want to. Notice the period in front of the class-name.
The middle of this paragraph is in the "slick" style-class. And here it is. While the remainder is normal.
Now let's do the same thing with the "div" tag. Look carefully to see the difference:
The middle of this paragraph is in the "slick" style-class.
And here it is.While the remainder is normal.
Now we can start looking at "layers". At the top of this file, I defined 2 layers: "pic", "ov1" and "ov2". Look at them carefully. Note that "pic" uses absolute positioning, while "ov1" and "ov2" use relative positioning. This lets me specify exactly where I want the overlays to be placed. The GIF will be put in the page where it would normally appear without a layer. The next 2 layers will be placed "relative" to the preceding "absolute" layer, so the blue ball will be in front of the text.
Notice the placement of the second (lower) blue ball aligned with the edge of the 1st image.
Note how the 2nd blue ball is placed below the picture. That's because I added some empty paragraphs, to allow for the space used by the pictures (and layers) in the document. If I didn't do that, the 2nd ball would also be floating in front of the picture.
Now lets see how we can use a style to automatically define the sequencing of nested lists.