すごく基本的なことなのですが、これが判っていないとそもそもWEBページ、そしてCSSで組めないと思ったのできちんと書いておこうと思います。

簡単に言うと、箱か箱じゃないかという事だと私は理解しています。
厳密には違うのかもしれないんですけど、WEBページをきちんと組むにはそれで十分だと思います。
じゃあ具体的には？？っていうと

例えばブロックレベル要素でよく使うタグには<div>、<p>、<h1>、<h2>、<table＞があります。
ブロックレベル要素は箱なので、普通は親の要素の一杯一杯に広がって四角く配置されます。
でも幅とか高さの大きさを指定することが出来るし、マージンとかpaddingを指定することも出来ます。
だからそれを使ってレイアウトをしていったりするわけです^^

逆に例えば<span>、<a>、<strong>はインライン要素なので、箱ではありません。
判りやすく言うと文章の中の特定の箇所に書式を設定したり、何か意味を付けるようなタグです。
テキストレベル要素っていう言い方もあるみたいですね。こっちの方が判りやすいですね^^
これらのタグに幅とか高さを設定することは出来ません。
でも、CSSで　display:block;　を指定することで表示上はブロックレベル要素のように箱にする事は出来ます。

※これはあくまで表示上の事であって、インライン要素がブロックレベル要素になるわけではないですよ。

それとすごく大事なことですが、インライン要素の中にブロックレベル要素を配置することは出来ません。例えば<span>タグの中に<h1>タグだったり、<div>タグを入れることは出来ません。
これはすごく当然な事なのですが、きちんとHTMLでは決まり事として定義されています。

一応ブロックレベル要素と、インライン要素を一覧にしてみましたので、確認しておきましょう^^
このタグ何かなぁ・・っていうタグもありますけど＞＜

【ブロックレベル要素】
p、div、table、dl、ul、ol、form、address、blockquote、h1～h6、fieldset、hr、pre

【インライン要素】
a、abbr、acronym、b、bdo、big、cite、code、dfn、em、i、kbd、label、q、samp、small、span、strong、sub、sup、tt、var


CSSでレイアウトしていく場合は主に<div>とかで箱を組んでレイアウトして、必要に応じて<a>とかにディスプレイブロックを使っていく感じですかね^^
すごく大事なことなので、私も再確認のために色々調べてみました。

■外部リンク
Web標準普及プロジェクト　～ブロックレベル要素とインライン要素

もうスタイルシートの普及から随分時間が経ち、今では一般的になってきましたが何でわざわざCSSに？って思ってる人も居るのかなと思ったりします。
 
そもそもHTMLって文章をHTMLタグでマークアップして意味づけして、文書間で相互に行き来出来るハイパーテキストを作るための物です。
普通のテキストのデータにマークアップをする事で文章に意味を付けることが出来ます。表やリストも使えます。一応見た目の体裁を整えるタグもあったりはしますが、それはそもそもの意図に反する物です。
何でって、HTMLはテキストに構造としての意味を与える物であって、見た目のデザインを整える物ではないからです。
昔はテーブルを使ってレイアウトを整えたりという事が普通でしたが・・・・（確かに初めてテーブルでレイアウトするテクニックを知ったときは目から鱗でした）そもそもテーブルって表を作るための物でレイアウトをするための物じゃないんですよね、テーブルでレイアウトしてセルに透過gifとかでスペーサー使ったりしてマージンを設定したり・・・・
これはHTML本来の使い道から外れていくわけで、ソースコードを見てもちっとも意味がわからない物になってしまうわけです。
だって表なんですもん・・・表でコンテンツのレイアウトを行うことは表本来の使い道じゃないですからね。

そこで、CSSという物が出来ました。HTMLには文書構造のみを記述して、デザイン要素はCSSで設定してHTMLからは完全に分離させる訳です。すごく理にかなってますよね^^
ソースコードもすごくシンプルになるので判りやすいですし、制作者以外の人が後から手を加える場合もどうなっているのか判りやすくて楽です^^
今でもテーブルの汚いソースコードを触ることがありますが・・・正直構造が判りにくかったり、すごく意味不明な組み方を見ると結構いらってしたりしますｗ

そうはいってもテーブルの良いところはブラウザが違ってもほぼ同じような表示をする事が出来ることですね。CSSでもきちんと書けば良いのですが、きちんと書かないとブラウザによって表示が異なったりしてしまって大変だったりします。つまり色々知ってないときちんと組めなかったりする訳です。

今でこそ一般的になっていますが、やっぱし敷居は高いのかな・・・と思ったりします。
でもきちんと覚えてCSSで綺麗にデザインをすれば良いことばかりなので、頑張りましょう^^

1. ソースコードがシンプルになるので判りやすい
2. きちんと文章に意味づけがなされているので検索にも良い
3. CSSを編集することでデザインを変えれるので全体的に何かを変える場合も楽
   

昔に比べて今はドリームウィーバーのCSSの機能も充実しているので結構楽にコーディング出来たりしますし、テンプレート機能を活用すればSSIみたいなことも出来ますからね^^

具体的な話はまた次回から^^

CSSのショートハンドは主に2つ覚えてれば良いと思います。
マージンとかパディングの一括指定と、ボーダーの色、太さ、スタイルの一括指定です。
他にもフォントに関してもショートハンド記法がありますがややこしいので使わなくてもいいような気がします。

padding:10px 0px 0px 5px;

border:#333 solid 1px;

この2つかな＾＾
他にもバックグラウンド関係の一括指定とか、フォントの一括もあるけど、
バックグラウンドは色と背景とかなんで微妙に使わないかな。
フォントもなんかややこしいし。

まず余白とかの1括指定は数字を4つ書いた場合は上から順に時計回りで、
上、右、下、左の順の数値です。
2つ書いた場合は上下と左右、3つ書いた場合は上と左右と下です。
それとボーダーに関しては見ての通りで、色、スタイル、太さを順番に書くだけです。

これらを上手く使ってCSSファイルをコンパクトにしましょう。
とはいってもむやみやたらに使って逆に判りにくくなることが無いように。

◆参考ページ
http://www.stylish-style.com/csstec/base/write.html