css(スタイルシート）ビルダーとは
「cssビルダー」とは、cssテキストファイルを作成する為の強力なツールです。
「cssビルダー」とはccsファイル対応ばかりではなく、インラインccsやページ単位の ccsにも対応しています。

要素やクラスｉｄの設定
cssのテキストを作成するにはまず、作成するccsが「要素」、「要素・クラス」、「クラス」 「ｉｄ」対応のうちどれかを上のラジオボタンから選択します。
「要素」および「要素・クラス」を選択した場合、その右側に要素選択リスト・ボックスが現れます。
（一番最初は「要素」が選択されている為、選択リスト・ボックスは既に表示されています。）
「要素」を選択した場合は「h1」や「div」などの要素が、「要素・クラス」を選択した場合は、 「h1.」、「div.」などが右のテキスト・ボックスに表示されます。
「クラス」を選択した場合テキスト・ボックスには「.」が入ります。
「id」を選択した場合、テキスト・ボックスには「＃」が入ります。
「要素・クラス」、「クラス」を選択した場合、「.」の次に必ずクラス名を、入力します。
クラス名は何でも構いませんが分かり易い名前が良いでしょう。
「id」を選択した場合は「＃」の右にidの名前を入れます。
セットが完了したら右上の「ok」ボタンを押します。
okボタンを押すと下のテンポラリー・テキスト・ボックスにたとえば選択した要素名が、「h1」の場合
h1｛
｝
と言う具合に、宣言の部分が空のスタイルが挿入されます。この空の宣言の部分にこれから
プロパティとバリューを書き込みます。
なお「ok」ボタンは、プロパティやバリューを設定した後、一番最後に押すことも出来ます。

項目の設定
次に何のスタイルを設定したいのかを「項目」の中から選択します。
ここでは見出しタグの<h1>のフォントの大きさを設定する場合を考えて見ましょう。
フォントの大きさは「項目」の中の「フォントの設定」で行います。

プロパティの選択
「項目」を選択すると、その下の「プロパティ」ボックスに選択した項目の設定可能なプロパティが表示されます。 今回はフォントの大きさを設定しますから、プロパティの中から「font-size」を選択します。
どのプロパティが何が設定出来るのかは、表示されているプロパティをクリックすると、下の説明ボックスに 選択されたプロパティの説明が表示されます。

バリューの設定
プロパティをクリックすると説明が表示されると同時にそのプロパティに設定可能な
バリューが右側のバリュー・リスト・ボックス表示されます、フォントサイズの場合は「large」 などのバリューが表示されます。
バリューの中に次の値がある場合は、こらは単位を表しています。
px ピクセル
pt ポイント(72pt=1in)
pc パイか(1pc=12pt)
mm ミリメートル
cm センチメートル
in インチ
em 基準になるフォントサイズ
ex 基準になるフォント「x」の高さ
% 親要素の指定値に対する割合
これらの単位を選択した場合、選択した場所に「値設定ボックス」が現れます。
「値設定ボックス」にはそれぞれの単位に適した値を入力します。
たとえばフォントサイズで「pt」を選択した場合は'１２'等と入力します。これは
フォントサイズが１２ポイントと言う事です。
こうしてバリューまで選択すると、上のテンポラリーテキストボックスに
font-size:large;とか
font-size:12pt;等と
プロパティ：バリュー　形式でスタイルが書き込まれます。
さらにテキストの色を設定したい場合は、「項目」−＞「色設定(テキスト)」
「プロパティ」−＞「color」、「バリュー」−＞「カラーネーム」
「カラー忠太」が現れて、「red」を選択したとします。
上のテンポラリーテキストボックスには
font-size:large;
color:red;
と言う文字が追加されます。
最初に「ｃｓｓビルダー」の右上の「ｏｋ」ボタンを押さなかった場合ここで「ok」ボタンを押します。
こうすると、テンポラリー・テキスト・ボックスには
h1{
font-size:large;
color:red;
}
という文字が入ります。
これで<h1>のスタイルが設定されました。

htmlテキストファイルに<h1>のスタイルス設定する
さて次は上で設定したスタイル・シートを編集中のhtmlに適応させて見ましょう。
先ずhtmlの編集中のドキュメントをタブをクリックして表示します。
見出し文字h1に設定したい文字列を選択します。次に右クリックでポップアップ・メニューを表示し、 「ｃｓｓリスト表示」を選択します。
作成したcssの設定項目がリストで現れます。「h1」を選択します。
選択した文字列が<h1>と</h1>で挟まれます。これで<h1>のスタイルが設定
されました。

　　　　　　ここを抑える
スタイルシートに作成したスタイルは右クリックの「ｃｓｓリスト表示」で選ぶ事が出来るんだね。

個別のタグにクラスの設定
クラスを使用して、個別のタグにスタイルを設定する方法を説明します。
例として、フォントを黒に設定するクラスをスタイルシートで宣言します。
.black　{　font　:　black;　}
このクラスを、htmlのテキストの中で要素divに適応させて見ます。
<div　class="black">
これで<div>の範囲のテキストの色が黒に設定されます。
個別のタグにクラスを設定する場合も、右クリックでポップアップ・メニューを表示させます。
html上で個別のスタイルを設定したいタグを
選択します。たとえば<div>の個別のクラスを設定したい場合、<div>を選択します。
次に右クリックをします。「項目リスト」を選択してスタイルのリストから、設定したい
クラスを選択します。この場合は「.black」を選択します。<div>のタグの中に
<div　class="black">とクラスが記述され、blackのクラスが適応されました。

　　　ここを抑える
<div>や<p>にクラスを設定する場合、<dib>や<p>を選択して反転表示させ
「項目リスト」を選択してスタイルのリストから、設定したいクラスを選択すると、タグの中に
クラスが記述されるんだね。

cssチュートリアルを使ってみよう
一応説明を読んだら、プルダウンメニューの「スタイルシート(s)」-＞「cssチュートリアル」を実行しよう。
「cssチュートリアル」は簡単な説明をしながら実際のスタイルシート作成します。これを２〜３回実行すると スタイルシート作成の、方法が理解できます。