Text Formatting, Headings, and Lists

Fonts

If you don't specify a font for your HTML document, the browser will default to displaying Times New Roman. Most computers have this font installed, which is the reason that it is used as the default font.

The <font> tag is being phased out. Don't use it.

My examples use inline style rules so we don't have to flip back and forth between html code and an external stylesheet. But I have not abandoned external stylesheets! In fact, you can see some pages in the last section of this handout ("Sample Code"), which uses an external stylesheet to test some of the concepts that are presented in this handout.

Font Sizes

As a reminder, you can use an inline style rule as an attribute of almost any HTML tag. But if you don't already have an HTML tag that you can add the attribute to, you will most commonly use the <span> tag to apply CSS style rules to your content. The <span> tag was designed by the W3C, as a matter of fact, as the most acceptable way to apply style rules to small portions of text. (We will see the accepted way to apply style rules to large amounts of information in the section on <div> tags.)

Here is an example of how to specify the font size with such a style rule:

  <span style="font-size:large;">This is some text.</span>

The possible explicit font sizes that you can use are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

There are two relative/calculated font sizes that you can use, if you wish:

• smaller
• larger

You can also specify an exact size for the font like this:

  <span style="font-size:24pt;">This is some text.</span>

Please note that:

• If your font size is specified in points, the letters pt follow the size you want.
• There is no space between the number and pt.

As another variation on the theme, you can specifiy the pixel size of the font like this:

  <span style="font-size:18px;">This is some text.</span>

  <span style="font-size:18;">This is some text.</span>

Please note that:

• If your font size is specified in pixels, the letters px follow the size you want.
• There is no space between the number and px.

Finally, you should note carefully that the W3C recommends that you not specify the exact font size, meaning that you not use pixels or points for your font size. The W3C recommends that you use relative rather than absolute units in your font-size specifications. The W3C's page for CSS Techniques for Web Content Accessibility Guidelines has some really good information in the section "Units of Measure".

A quick summary of the W3C's guidelines follows:

• Use em units to set font sizes. An em unit is (in most browsers) the height of the upper-case M in the current font face/family.
• In other situations where a length or size unit is needed, use relative units, such as percentage units. (We will see more of this concept in later classes.)

What this all boils down to is this: Use percentages or em units to specify your font sizes, like this:

  <span style="font-size:2em;">This is some text that is 2 em units in size.</span>

which looks like this:

This is some text that is 2 em units in size.

Or this:

  <span style="font-size:150%;">This is some text that is 150% of the current font size in the browser.</span>

which looks like this:

This is some text that is 150% of the current font size in the browser.

Please note that:

• If your font size is specified in em units, which the W3C definitely recommends, the letters em follow the size you want.
• There is no space between the number and em.

Points vs Pixels

For those situations where you really need to specify a font size in points or pixels (which I hope is rare), here is some information about what is the difference between points and pixels:

• Points originated in the print world and are measured in fractions of an inch.
• Pixels originated in the screen world and are measured in, appropriately, pixels, which are the spots of color/light on the monitor.
• A point is always a certain fraction of an inch. But the browser may not accurately interpret the point setting at all screen resolutions. The "official" definition of a point is:
  
  "The desk-top publishing point (DTP point) is defined as 1/72 of an inch, which is approximately 0.0138 inch or 0.3527 mm. Twelve points make up a pica, and six picas make an inch." (from en.wikipedia.org)
  
  
• A pixel is always a pixel, but its absolute size depends on the screen resolution that is set for the monitor.

Font Faces

You can tell the browser what font face to use, but if the computer that the browser is running on doesn't have the font face you're asking for, the browser will default back to Times New Roman. Please note that the term "face" in HTML is "family" in CSS.

Here is how you specify a font face/family (see the notes below regarding the two versions of this example):

  <span style="font-family: 'Courier New', Courier, monospace;">This is some text.</span>

  <span style='font-family: "Courier New", Courier, monospace;'>This is some text.</span>

Here are some points regarding the font-family specification above:

• The font-family style rule's value can be a list of font names.
• Each font name in the list is separated from the others by a comma.
• If any font name in the list has any spaces in the name, that family name must be enclosed in quotes. The two versions of the example above are different only in the type of quotes used. In the first example, the outer quotes (those containing the entire style attribute's value) are double quotes, and in the second example the outer quotes are single quotes. It doesn't matter which type of quote you use, as long as the inner quotes (those around the individual font family names) are of a different type than the outer quotes.
• The browser will try to find the first font in the list. If it cannot find the first font on the user's computer, the browser will look for the second font, and so on.
• The last font family/name in the list should be one that you are fairly sure will be found on the user's computer, as a sort of default font. Some of the standard "default" fonts are:
  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

The above "default" fonts look like this:

• This is serif.
• This is sans-serif.
• This is monospace.
• This is cursive.
• This is fantasy.

Font Colors

You set the font color like this:

  <span style="color:red">This is red text.</span>

  <span style="color:#FF0000">This is #FF0000 (also red) text.</span>

This is red text.

This is #FF0000 (also red) text.

Font Weight

The font-weight property tells the browser how thick, or dark, to make the font characters. In the old days (like, before 1996!), you would use the <b>...</b> (bold) tag to make a font "bold".

In CSS, here is a list of font-weight values that you can use:

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

But you can also use these two "toggle" values:

• normal
• bold

Please note: The "normal" value corresponds to the numeric value of 400, and the "bold" value corresponds to 700.

So, for instance, you can set your text to "bold" by using either of these two formats:

  <span style="font-weight:700;">This is bold text.</span>

  <span style="font-weight:bold;">This is also bold text.</span>

This is bold text.
This is also bold text.

Combining Font Style Rules

As with all CSS style rules, you can combine font style rules by separating multiple rules/values with semi-colons, like this:

  <span style="color:blue; font-size:xx-large;">This is 
     blue, xx-large text.</span>

This is blue, xx-large text.

Following is a sample of how to combine font style rules:

<html>
<head>
  <title>Font Properties</title>
  <link rel="stylesheet" type="text/css" href="fonts.css" />
</head>
<body>
  <span class="mainText">
  This is some text that we are going to format.
  </span>
</body>
</html>

And here is the stylesheet:

.mainText
{
  color:blue; 
  font-size:xx-large;
  font-family:'Comic Sans MS', Arial, sans-serif;
}

You can see the above code running here.

Headings

HTML headings are a nice, simple way to emphasize portions of your text content. Also, some search engines give a bit more importance to text inside heading tags. But if you put too much text in heading tags, the search engines may penalize your relevancy rating, so don't overdo it!

Headings come in six sizes. The smaller the number in the heading tag, the larger is the heading. So heading 1 is the largest, and heading 6 is the smallest.

Here is how you code HTML headings:

  <h1>This is heading 1.</h1>
  <h2>This is heading 2.</h2>
  <h3>This is heading 3.</h3>
  <h4>This is heading 4.</h4>
  <h5>This is heading 5.</h5>
  <h6>This is heading 6.</h6>

And the above samples look like this:

This is heading 1.

This is heading 2.

This is heading 3.

This is heading 4.

This is heading 5.

This is heading 6.

Please note that headings automatically add a line of space above and below the heading. In this sense, they behave very similarly to paragraph tags (<p>...</p>). And in fact, headings are block display elements, just like paragraphs (and divs).

Also, please note that HTML headings are content. This may sound like an obvious thing to say, but since the browser automatically applies different formatting to the six different headings, it is easy to start thinking of headings as formatting rules. They are not. They are content.

In fact, you can apply almost any CSS formatting rule to headings. Following is some sample code that demonstrates some more of the power of CSS rules regarding headings.

<html>
<head>
  <title>Formatting Headings</title>
  <link rel="stylesheet" type="text/css" href="headings.css" />
</head>
<body>
<div class="div1">
  <h1>This is heading 1 in div 1.</h1>
  <h2>This is heading 2 in div 1.</h2>
  <h3>This is heading 3 in div 1.</h3>
  <h4>This is heading 4 in div 1.</h4>
  <h5>This is heading 5 in div 1.</h5>
  <h6>This is heading 6 in div 1.</h6>
</div>
<div class="div2">
  <h1>This is another heading 1 in div 2.</h1>
  <h2>This is another heading 2 in div 2.</h2>
  <h3>This is another heading 3 in div 2.</h3>
  <h4>This is another heading 4 in div 2.</h4>
  <h5>This is another heading 5 in div 2.</h5>
  <h6>This is another heading 6 in div 2.</h6>
</div>
</body>
</html>

Here is the stylesheet:

body
{
  font-family:Arial,sans-serif;
}

.div2 h2
{
  color:red;
}

.div2 h4
{
  color:blue;
	font-family:'Comic Sans MS', Arial, sans-serif;
	font-size:36pt;
}

You can see the above code running here.

Please note these points about the above code:

• The h2 and h4 selectors in the stylesheet are contextual selectors. This kind of selector says to the browser, "only use this h2 rule (or h4, or whatever) in the context of class .div2".
• The elements that are not in the specified context (in this sample, the <h2> and <h4> tags that are not in .div2) do not get the rules applied to them. This fact means that the <h2> and <h4> tags in .div1 have normal (default) formatting applied to them by the browser.

Other Formatting Tags

There are several other font formatting tags available in HTML. They are described below.

But please note that the tags described below are in the old HTML tradition of applying formatting directly to the page's content. It would be much better to use CSS rules to apply these types of formatting. I list these tags mainly so you will be aware of them when you see them in pages that someone else created.

Italicized Text

You can use the <i> tag to italicize text, like this:

  <i>This text is italicized.</i>

This text is italicized.

(Oh, and my style sheet for the <i> tag changes the text to red. But you can still see how the text is italicized.)

You can also use the <em> tag to emphasize text. Most browsers will display "emphasized" text as italic text, just like the <i> tag. Here is a sample of the <em> tag:

  <em>This text is emphasized.</em>

This text is emphasized.

The CSS rule that accomplishes what the <i>...</i> and <em>...</em> tags do, looks like this:

  <span style="font-style:italic;">This text is italicized.</span>

This text is italicized.

Bold Text

The <b> (bold) tag makes text look like this:

This is bold text.

You can also use the <strong> tag to bold your text. Most browsers will display "strong" text as bold text, just like the <b> tag. Here is a sample of the <strong> tag:

  <strong>This text is strong.</strong>

This text is strong.

The CSS rule that accomplishes what the <b>...</b> and <strong>...</strong> tags do, looks like this:

  <span style="font-weight:bold;">This text is bold.</span>

This text is bold.

Typewriter (monospaced) Text

You can use the <tt> (typewriter) tag like this:

  <tt>This is "typewriter" text.</tt>

This is "typewriter" text.

The CSS rule that accomplishes what the <tt>...</tt> tag does, looks like this:

  <span style="font-family:monospace;">This text is monospace.</span>

This text is monospace.

Big Text

The <big> tag makes text look like this:

This is "big" text.

The CSS rule that accomplishes what the <big>...</big> tag does, looks like this:

  <span style="font-size:larger;">This text is larger.</span>

This text is larger.

Small Text

The <small> tag makes text look like this:

This is "small" text.

The CSS rule that accomplishes what the <small>...</small> tag does, looks like this:

  <span style="font-size:x-small;">This text is x-small.</span>

This text is x-small.

Subscript Text

The <sub> tag makes text look like this:

_{This is subscript text} with normal text next to it.

The CSS rule that accomplishes what the _... tag does, looks like this:

  This is normal text.
  <span style="vertical-align:sub; font-size:smaller;">This is subscript text.</span>

This is normal text. This is subscript text.

Please note that you need to use two CSS properties: vertical-align and font-size to do what the _... tag does. But even this minor inconvenience is outweighed by the power that CSS gives you over the formatting of your content.

One interesting thing about style rules is that you can apply them to almost any HTML tag, including the <sub> tag! I don't necessarily recommend this approach, but if you ever need to do it, here is a sample:

  Here is some text.
  <sub style="color:red; font-size:xx-small;">This is some subscript</sub>

Here is some text. _{This is some subscript}

Superscript Text

The <sup> tag makes text look like this:

^{This is superscript text} with normal text next to it.

The CSS rule that accomplishes what the ^... tag does, looks like this:

  This is normal text.
  <span style="vertical-align:super; font-size:smaller;">This is superscript text.</span>

This is normal text. This is superscript text.

Please note that you need to use two CSS properties: vertical-align and font-size to do what the ^... tag does. But even this minor inconvenience is outweighed by the power that CSS gives you over the formatting of your content.

One interesting thing about style rules is that you can apply them to almost any HTML tag, including the <sup> tag! I don't necessarily recommend this approach, but if you ever need to do it, here is a sample:

  Here is some text.
  <sup style="color:red; font-size:xx-small;">This is some superscript</sup>

Here is some text. ^{This is some superscript}

Strikethrough Text

The <strike> tag makes text look like this:

This is strikethrough text.

The CSS rule that accomplishes what the <strike>...</strike> tag does, looks like this:

  <span style="text-decoration:line-through;">This text has strikethrough.</span>

This text has strikethrough.

Blinking Text

The <blink> tag makes text blink (but not in Internet Explorer):

This is blinking text in some browsers.

The CSS rule that accomplishes what the <blink>...</blink> tag does, looks like this:

  <span style="text-decoration:blink;">This text blinks in some browsers.</span>

This text blinks in some browsers.

Disclaimer: Blinking text is considered dangerous and to be avoided. It is even possible for blinking text to trigger a seizure in some people.

Lists

There are three types of lists in HTML:

1. Ordered
2. Unordered
3. Definition

Please note that line breaks and indents are automatically applied to lists in HTML.

Ordered Lists

The above list of list types is, in fact, an ordered HTML list. The actual code looks like this:

<ol>
  <li>Ordered</li>
  <li>Unordered</li>
  <li>Definition</li>
</ol>

If you ever want to continue an ordered list later in your text, you can use the start attribute in the <ol> tag, like this:

  <ol start="7">
    <li>This item should be number 7.</li>
    <li>This item should be number 8.</li>
  </ol>

7. This item should be number 7.
8. This item should be number 8.

You can even change the type of the ordered list, with the list-style-type CSS property or with the type HTML attribute, like this:

  <ol style="list-style-type: lower-alpha">
    <li>This item should be number a.</li>
    <li>This item should be number b.</li>
  </ol>

or

  <ol type="a">
    <li>This item should be number a.</li>
    <li>This item should be number b.</li>
  </ol>

1. This item should be number a.
2. This item should be number b.

And, of course, you can combine these attributes, like this:

  <ol style="list-style-type: lower-alpha" start="3">
    <li>This item should be number c.</li>
    <li>This item should be number d.</li>
  </ol>

3. This item should be number c.
4. This item should be number d.

Please note that the start attribute has a numeric value even if you are using one of the alphabetic types.

The available list-style-type values are:

• decimal
• upper-alpha
• lower-alpha
• upper-roman
• lower-roman

The available type attribute values are:

• "1"
• "A"
• "a"
• "I" (this is an uppercase i)
• "i"

The "upper-roman" list-style-type value gives a list like this:

1. This item should be number I.
2. This item should be number II.

Unordered Lists

The unordered list HTML tag is <ul>. You use it like this:

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

• First item
• Second item
• Third item

You can change the type of "bullet" that the unordered list uses, with a list-style-type CSS property or with a type HTML attribute.

The available list-style-type values are:

• disc (default)
• square
• circle

The possible values of the type attribute are these:

• disc (default)
• square
• circle

Here are samples of the square and the circle bullet types:

  <ul type="square">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

• First item
• Second item
• Third item

  <ul type="circle">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

• First item
• Second item
• Third item

Definition Lists

The definition list tag is <dl>. Each term to be defined is marked by a <dt> tag, and each definition is marked by a <dd> tag.

Such a list's code looks like this:

  <dl>
    <dt>Aardvark</dt>
    <dd>A weird animal</dd>
    <dt>Antinomy</dt>
    <dd>A seeming paradox that is true</dd>
  </dl>

Aardvark

A weird animal

Antinomy

A seeming paradox that is true

Nested Lists

You can nest lists within lists. The browser will usually change the bullet and number type for nested lists, but you can use the type attribute for the lists if you want to control the bullets and numbers.

Nested list code will look something like this:

  <ul>
    <li>The first item</li>
    <li>The second item
      <ul>
        <li>A sub-item under the second item</li>
        <li>Another sub-item</li>
      </ul>
    </li>
    <li>The third item</li>
  </ul>

• The first item
• The second item
  • A sub-item under the second item
  • Another sub-item
• The third item

Please note that a nested list is contained by one of the list items (<li>...</li> tags) in the outer/containing list.

Also please note that it is possible to nest a list inside a definition list. The nested list is normally contained by a <dd>...</dd> tag.

CSS and Lists

The question sometimes comes up about whether we can apply style rules to individual list items. Below is some code that shows that we can, indeed, do that:

<div style="text-align:left">
  <ol type="I" style="color:green;">
    <li>This item should be number I.</li>
    <li>This item should be number II.</li>
    <li>This is another item.</li>
    <li style="font-weight:bold; color:red;">This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
    <li>This is another item.</li>
  </ol>
</div>

Paragraphs, Breaks, and Preformatted Text

The <p>...</p> tag causes the browser to insert two line breaks (above the opening <p> tag). (And remember that XHTML requires you to close all tags, so be sure to use the </p> tag, too.) The primary, and correct, usage of the <p>...</p> tag, though, is to "contain" a small portion of text, and to (optionally, with CSS rules) apply some formatting rules to the contained text.

The <br /> tag causes the browser to insert one line break.

The <pre>...</pre> tag (preformatted text) causes the text contained by it to be formatted pretty much as you type it into the .html file.

You will see a lot of older HTML code that uses a single <p> tag to insert a blank line in the browser's display. The main problem with this approach is that it will cause an error when it is sent to your browser by an XHTML server, since the <p> tag is not closed in this kind of usage.

If you want to insert a blank line in the browser's display, it is better to use a <br /> tag. Here is a sample:

This is a line of text.<br /><br />This is another line of text, with a blank line
above it.

This is a line of text.

This is another line of text, with a blank line above it.

Here is a sample of preformatted text:

<pre>
This is a sample of how the text
displayed by the browser will look
pretty much

like


you



type it into the .html file.
</pre>

This is a sample of how the text
displayed by the browser will look
pretty much

like


you



type it into the .html file.

The question sometimes comes up about whether or not we could change the default font inside a <pre> tag. Below is some code that shows that we can, indeed, do that:

<div style="text-align:left">
  <pre style="font-family:'Times New Roman'; font-weight:bold;">
This is a sample of how the text
displayed by the browser will look
pretty much

like


you



type it into the .html file.
  </pre>
</div>

This is a sample of how the text
displayed by the browser will look
pretty much

like


you



type it into the .html file.
  

The text-align Property

The text-align property is used to align text in the way that you want. The default text alignment is at the left side of the text's container element.

The (other) text-align values that you can use are:

• left
• center
• right
• justify

Here are some examples of how to use text-align:

First,

  <div style="text-align:center;">
    This is some text.
  </div>

displays the text like this:

Second,

  <div style="text-align:right;">
    This is some text.
  </div>

displays the text like this:

And third,

  <div style="text-align:justify;">
    This is some text to demonstrate how the text-align property "justify" 
    works so we need to put in a bunch of words so the sentence stretches across 
    to the right margin and wraps back to the left margin.
    This is some text to demonstrate how the text-align property "justify" 
    works so we need to put in a bunch of words so the sentence stretches across 
    to the right margin and wraps back to the left margin.
    This is some text to demonstrate how the text-align property "justify" 
    works so we need to put in a bunch of words so the sentence stretches across 
    to the right margin and wraps back to the left margin.
  </div>

displays the text like this:

Notice that the left and right margins are straight and even.

Sample Code

Below is a sample html page and its related external stylesheet. This sample code uses many of the concepts that are presented in the previous sections of this handout.

Here is the html page, sometext.html:

<html>
<head>
  <title>Some Text</title>
  <link rel="stylesheet" type="text/css" href="myStyles.css" />
</head>
<body>

<h1 id="anotherColor">A Super Example</h1>

<div class="theColor">
  <span class="emphasis">This is some text.</span>
</div>

This is normal text.
<span class="sub">This is subscript text.</span>

<div class="listStuff">
  <ol>
    <li>The first item</li>
    <li>The second item
      <ol type="a">
        <li>A sub-item under the second item</li>
        <li>Another sub-item</li>
      </ol>
    </li>
    <li>The third item</li>
  </ol>
</div>

<div class="left">
This is some text.<div>This is some text inside a <div> tag.  Note that the
browser automatically adds a linefeed (return) character both before and
after the div.</div>Here is some more text, outside the div.<span>Here is some
text inside a <span> tag.  Note that the browser does not add any linefeeds
or spaces around a span tag.</span>Here is the last text, outside the span tag.
</div>

</body>
</html>

body
{
  font-family:Arial,sans-serif;
  font-size:1.3em;
  text-align:center;
  color:#0000FF;
}

.sub
{
  vertical-align:sub;
  font-size:0.6em;
}

#anotherColor
{
  color:purple;
}

.emphasis
{
  font-weight:bold;
}

.theColor
{
  color:red;
}

.listStuff
{
  text-align:left;
}

.left
{
  text-align:left;
}

Sample Code 2

Below is another sample html page and its related external stylesheet. This is some code that we did in class, which illustrates some basic stylesheet properties.

Here is the HTML page, classExercise2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>Class Exercise</title>
  <link rel="stylesheet" type="text/css" media="screen" href="classExercise2.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5" />
</head>

<body>
<h1 class="headingStyle">Lorem ipsum dolor sit amet</h1>
<p class="textStyle">
Proin orci. Nunc sed ligula. Sed odio augue, elementum quis, imperdiet eget, consequat ac, dui. Integer nisi. Nunc molestie quam ut odio. Duis lobortis porta quam. Integer molestie ipsum ac tortor. Nulla dui. Ut ut elit. Suspendisse sit amet mi vitae ligula egestas blandit. Quisque molestie dolor vitae tellus. Aliquam. 
</p>
<h2 class="headingStyle">Praesent volutpat</h2>
<div class="textStyle">
  <ul>
    <li>
      Maecenas dictum, eros sed placerat dictum, elit dui iaculis mi, id facilisis justo nibh id est. Sed varius commodo nulla. Praesent ut nibh ac leo imperdiet lobortis. Morbi ullamcorper, ante id facilisis fermentum, dolor lectus sodales nisi, id imperdiet eros pede
    </li>
    <li>
      eget justo. Nam tempor pretium libero. Suspendisse convallis. Aenean tristique mattis dolor. Duis turpis. Sed non lorem sagittis pede molestie malesuada. Donec condimentum. Phasellus ultrices tempus dui. Duis ullamcorper odio lobortis eros. Integer id ante. 
    </li>
    <li>
      Vestibulum bibendum, nulla sed varius accumsan, mauris nisi eleifend arcu, eget iaculis ipsum orci id ante. Morbi arcu pede, pulvinar id, consequat vel, dictum eu, nulla. Morbi sed elit. Phasellus suscipit ultricies urna. Class aptent taciti sociosqu ad litora
    </li>
    <li>
       torquent per conubia nostra, per inceptos hymenaeos. Fusce ac magna. Maecenas a odio in erat tristique molestie. Aliquam erat volutpat. Donec et sem. Suspendisse potenti. Donec sem mi, hendrerit id, tincidunt feugiat, pharetra ut, dolor. 
    </li>
  </ul>
</div>
</body>
</html>

Here is the stylesheet, classExercise2.css:

/* Class Exercise 2 Style Sheet */

body
{
  background-color: #CCCCFF;
  padding: 50px;
}


.headingStyle
{
  font-family: Arial, sans-serif;
  color: #660000;
}

.textStyle
{
  font-family: Arial, sans-serif;
  color: #666666;
  font-size: 1.4em;
  text-align: justify;
  line-height: 1.5;
  border: 3px ridge #AAAAAA;
  padding: 20px;
}

ul
{
  list-style-type: circle;
}

The page looks like this in the browser.