Cascading Style Sheets

Cascading Style Sheets - Margins, Padding, Lists

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
         Type and possibilities
         Background
         Text, Dimension
         Font
         Border
         Padding, list
         Classification
         Positioning
         Hyperlinks
         Misc.
         Multiple CSS
         You try it
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

In this lesson, you will learn how to change the margins of your paragraphs, the padding in tables, and most noticeably, lists. Hope you find this useful.

Paragraph Margins
Suppose you'd like to have a large left margin on a paragraph. Once you had to put it in a table to format it, but css is easier. Here's the code:

<STYLE TYPE="text/css">
p.margin {margin-left: 2cm}
</STYLE>

Then you use this tag for your paragraph tag:
<p class="margin">Blah blah blah</p> And that code will make this paragraph:

This paragraph has been indented on the left side only. It is long enough so that you can see that every line will be indented and it makes the paragraph off-set. I hope this is long enough now.

Margins may be specified as right, left, top and bottom. If you'd like to put all four into one tag, you's specify top, right, bottom, left, and the tag would look like this:

<STYLE TYPE="text/css">
p.allmargins {margin: 1cm 4cm 3cm 2cm}
</STYLE>

Table Cell Padding
Similarly to paragraph spaces, you can use style sheets to change the padding on the cell of a table. You can change left, right, top and bottom padding. Here's an example:

And with that you get this:

This is the first cell. It is pretty good for a boring cell.

This is the second cell. Yeay for the second cell.

By modifying the command slightly, you can make the padding different sizes on different sides. Here's one with small padding on top and bottom and large padding on the sides:

So you type in this:
<table border=1><tr>
<td class="two">This is the first table and cell. It is pretty good for a boring cell.</td></tr></table>
<table border=1><tr>
<td class="three">This is the second table and cell. Yeay for the second cell.</td></tr></table>
And with that you get this:

This is the first cell. It is pretty good for a boring cell.

This is the second cell. Yeay for the second cell.

This page is getting way too long. If you want to see lists, you need to follow this magic link.

This page relied heavily on W3schools.com