スタイルシートを書く

今使っている gedit で新規作成を選び, 強調表示モードを CSS にして下さい. 次のような内容を入力します (色(darkgreen)とかは変えてもかまいません).

h1 {text-align:center; color: darkgreen}
p {text-indent: 1em}
.heading {text-align:center}
.persons {vertical-align:top; float:left}
.next {clear: left}

入力が終ったら, fellows.cssと言う名前で, fellows フォルダに保存します. 保存が終ったら, Firefox の「再読み込み」ボタンを押して, 変化を確認して下さい. CSS では, クラス属性の指定は, .(ピリオド) からはじめる形式で書きます. 今回作っているような, 文章と画像が混じっている文書の中の 画像の事を, インラインイメージ(Inline image)と言います. クラス persons は img タグで使われますが, その指定で vertical-align 属性は, そのクラスに属するものが 表示領域のどの場所に置かれるかを指定しています. top は, テキストの上端と画像の上端を合わせるようにする指定です. float 属性は, 画像をどこに置くかと言うもので, left ですから, 画面の左端に画像が来ます. また, 通常のインラインイメージは, 画像が, テキストの間に単に表示されるだけですが, float 属性を 指定しておくと, テキストはその画像を囲むように表示されます.