Cascading Style Sheet Sample Page 1

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.
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.
Notice that the "div" tag forced the enclosed text to become a new paragraph and the ending of the text also became a new paragraph.

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.

text overlay

 

 

 

 

 

 

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.

  1. item
  2. item
    1. item
    2. item
      1. item
      2. item
        1. item
        2. item
          1. item
          2. item
        3. item
      3. item
    3. item
  3. item