"example code"

To keep things clear, i am only showing one property for each example.
In real pages you can:

Use many properties for one element.

Use any property that would make sense for that element.

"default"

The value that the web browser will use if you don't specify anything for this property.
("n/a" means there will be no default value.)

<p style="font-family: Times, serif;">
Here is a paragraph in Times font.
</p>
<p style="font-family: 'Times roman', serif;">
If you use a font name that has more than one word,
use quotes.
</p>

<p>
We will learn some 
<span style="font-style: italic;">very useful</span>
css coding.
</p>

<p>
We will learn some 
<span style="font-weight: bold">very useful</span>
css coding.
</p>

<p style="font-size: 80%;">
We usually use some kind of relative size
for our font size.
Then our reader can make the size bigger and
smaller in the browser if they want to, 
to be more useful to their needs.
</p>

<p style="color: #669966;">
It is better to use color codes (like #669966)
rather than color names (like green)
because browsers will understand 
the codes better, and everyone will see 
the color you want.
</p>

(See the CSS faq page, section on class and id for how to use the "class" below.)

p.spacer {
  line-height: 1.3;
}
p.more-spacer {
  line-height: 1.9;
}

<p>
The "normal" or default line-height 
is about 120% (1.2), depending on the browser.
</p>
<p class="spacer">
The line-height property
sets the distance between the baselines
of the lines of text. (This is called 
"leading" in paper publishing.)
</p>
<p class="more-spacer">
Just as on paper, having some spacing
between the lines makes it easier to read.
</p>

<h3>
Here is a normal h3.
</h3>
<h3 style="word-spacing: .5em;">
Here is h3 with some extra space 
between the words.
</h3>

<p>
Here-is-a-long-much-too-long-word-that-goes-on-and-on-with-no-word-wrap
</p>
<p style="word-wrap: break-word;">
Here-is-a-long-much-too-long-word-that-goes-on-and-on-but-wraps-with-word-wrap
</p>

<p>
Here is a normal paragraph.
</p>
<p style="letter-spacing: .2em;">
Here is a paragraph with some extra space 
between the letters.
</p>

(See the CSS faq page, section on class and id for how to use the "class" below.)

p.one {
  white-space: pre;
}
p.two {
  white-space: nowrap;
}

<p>
The <code>pre</code> value is 
like the     &lt;pre&gt;     tag in html. 
It makes the browser display all 
    white space.
</p>
<p class="one">
However, the html 
    &lt;pre&gt;     tag displays in a
        monospace font, and the 
            <code>pre</code> value does not. 
</p>
<p class="two">
The <code>nowrap</code> value 
    ignores white space
        and line breaks, and will not    wrap     the lines.
</p>

p {
  text-indent: 3em;
}

<p>
This will make some indentation to appear in the 
first line of text. ...
</p>

p {
  text-align: center;
}

<p>
This property is used only to align things <i>inside</i> 
a block (paragraph, header, table cell, etc.).
We will learn other ways to align the block itself.
</p>

p {
  vertical-align: bottom;
}

<p>
This property is used only for content of block tags.
</p>

p {
  border: 1px solid #cc0000;
  padding: 4px 8px 4px 8px;
}

<p>
We can do lots of nice things with borders.
</p>

table {
  border: 4px groove #cc6633;
}

<table>
<tr valign="top">
<td>
<img src="images/bullit1.gif" />
</td>
<td>
With css we can easily make a border around a table,
but no borders for the cells.
</td>
</tr>
</table>

p {
  border-left: 4px double #cc0000;
  padding: 4px 8px 4px 8px;
}

<p>
We can do lots of nice things with borders.
</p>

(See the CSS faq page, section on class and id for how to use the "class" below.)

p.one {
  width: 70%;
}
p.two {
  width: 10em;
}
p.three {
  width: 150px;
}

<p class="one">
This paragraph should be 70% of the 
containing block. ...
</p>
<p class="two">
An "em" is the width of a letter "m" in that font".
This paragraph should be 10 "ems" wide.  ...
</p>
<p class="three">
This paragraph should be 150 pixels wide. ...
</p>

(See the CSS faq page, section on class and id for how to use the "class" below.)

p.one {
  height: 20%;
}
p.two {
  height: 8ex;
}
p.three {
  height: 100px;
}

<p class="one">
The height of this paragraph should be 20% 
of the height of the containing block. ...
</p>
<p class="two">
An "ex" is the height of a letter "x" in that font.
This paragraph should be 8 "ex" high. ...
</p>
<p class="three">
This paragraph should be 100 pixels high. ...
</p>

(See the CSS faq page, section on class and id for how to use the "class" below.)

p.under-image {
  clear: both;
}

<img src="images/dalai_lama.jpg" 
   alt="The Dalai Lama" />
<p class="under-image">
The image is set to "float: right".
Normally, the paragraph text will float to the 
side of the image.
So we use "clear" to make it go at the bottom. 
</p>

Remember that all boxes (html tags) are either block or inline.
With the display property we can make
block elements (such as <p>) display inline (side by side).
Or we can make inline elements (such as <a>) display
vertically (like blocks).

a {
  display: block;
  border-bottom: 1px solid #cccccc;
  background-color: #ffccff;
}

<a href="how_to_learn_css.html">How to learn css</a>
<a href="css_tutorial.html">CSS Tutorial</a>
<a href="how_to_fix_css_problems.html">How to fix css problems</a>
<a href="4-css_faq.html">CSS FAQ</a>

ul {
  list-style-type: square;
}

<ul>
<li>
something
</li>
<li>
another thing
</li>
</ul>

ul {
   list-style-image: url(bullit1.gif);
}

<ul>
<li>
something
</li>
<li>
another thing
</li>
</ul>