`ELEMENT STYLES`

HTML elements are classified by their DISPLAY TYPE.
1.	BLOCK: Places a line break above and immediately below the element.
2.	INLINE: Suppresses line breaks immediately before and after the tag.
3.	LIST-ITEM: Places a list item marker on the first line of text.
4.	TABLE: (or other table properties). Enables you to turn any tag into a part of a data table. This does not work in the current IE for windows, so you might to leave this one for later.
5.	INHERIT: Displays the value set for the element’s parent.
6.	NONE: causes the element not to display in CSS browsers. It will appear as if the content does not exist on the page.

Element Styles are “hard-wired” to specific HTML tags. When you apply an Element Style to a tag every instance of the tag in the document will be reflected in the web page. If there is no CSS support in the browser then the page renders according to the basic Element Tags leaving the document readable in the viewer browser.

Elements simply refer to the parts of an HTML document that are offset by HTML containers tags.

Example,

<p> this is an element.<p>.

Elements can be made up of single tags or “Nested Tags.” Nested tags are referred to as “children” of the tags within which they are nested. Those tags in turn are referred to as the “parent” properties.

<div><p><b>this is a nested element.</div></p><b>.

Let’s look at the four primary Display Types and see samples of each.

BLOCK ELEMENT

INLINE ELEMENT

LIST ITEM ELEMENT

TABLE ELEMENT

Block Level Element:

Example Block Element Style Rule:

p { color: #f00; font-size: 14px; font-family: Arial; font-weight: bold }

Any text the is in <p> </p> tags would refect this command. The result would look like this: Here is the result.

Block Elements Place Table
<address>	<dt>	<object>
<applet>	<fieldset>	<ol>
<blockquote>	<form>	<optgroup>
<body>*	<frame>	<pre>
<br>	<frameset>	<p>
<center>	<Hn>	<ul>
<dd>	<hr>	<div>
<dir>	<iframe>	<dl>
<div>	<noframes>

ID Style Selectors are best used when you need to give an element or property a unique name and identity. This is not as critical in basic CSS as it is when you get into page layouts with CSS.

For basic CSS declarations that are unique to a particular element of the page, most designers to stick with CLASS styles because they tend to be more flexible.

**(All body tags are block-level elements, and cannot be contained within an inline element.)

Inline Level Element:

Inline elements occur within a block element. For example the inline element <b> </b> would occur in the <p> </p> block element.

Inline Element Sample:

h1{font-family: Arial; font-size: 24px; font-weight: bold}

The Result would be:

The new header would look like this.

Inline Elements Place Table
<abbr>	<code>	<i>	<strong>
<abbrev>	<col>	<kbd>	<sub>
<blockquote>	<colgroup>	<lang>	<sup>
<acronym>	<del>	<noembed>	<tbody>
<A>	<dfn>	<nosmartquotes>	<tfoot>
<bdo>	<em>	<q>	<th>
<bgsound>	<font>	<samp>	<thead>
<big>	<iframe>	<small>	<tr>
<B>	<img>	<span>	<tt>
<button>	<input>	<s>	<u>
<cite>	<ins>	<strike>	<var>

List Item elements:

To create an ordered list or un-ordered list rule the code would look like this:

ol { color: #36c; font-size: 14px; font-family: Arial; list-style-type: decimal; margin: 1em 0 1em 40px }

LIst item line 1.
LIst item line 2.
List item line 3.

List Items Elements Place Table
<table>	<caption>	<tfoot>
<td>	<thead>	<col>
<th>	<tbody>	<colgroup>

Table Item Element:

Table elements can manipulate the borders, size of the table, or cells, and the spacing and padding of the table cells. For example, if you wanted to set the border of a table you would create a CSS table element:

Here is the table result.

Table Elements Place Table
<abbr>	<code>	<i>	<strong>
<abbrev>	<col>	<kbd>	<sub>
<blockquote>	<colgroup>	<lang>	<sup>
<acronym>	<del>	<noembed>	<tbody>
<A>	<dfn>	<nosmartquotes>	<tfoot>
<bdo>	<em>	<q>	<th>
<bgsound>	<font>	<samp>	<thead>
<big>	<iframe>	<small>	<tr>
<B>	<img>	<span>	<tt>
<button>	<input>	<s>	<u>
<cite>	<ins>	<strike>	<var>