06 ホームページ基礎講座 CSS 幅のwidth 線のborder

目次
横幅指定のwidth を使う
HTMLの中に書くスタイルシート 内包スタイルシートを使って、CSSを適用していきます。今回はwidthを使うので、横幅が一定の距離で折り返すというところになります
article{ width:600px; border:1px solid #000000; padding:2em; margin : 0 auto; }
上記のコードは、外枠のarticle に横幅600pxで折り返し、その600px 分のborderを指定。その線から内側のテキストまでの距離を2em(2文字分)とするという指定です。
この中のmargin : 0 auto という 外部余白 margin プロパティを使って 横幅がwidth600px の時 上下の余白は 0 左右の余白は auto 自動であると書きます。
この指定で、600px の幅のボックスは、画面中央に配置されることになります。
見出し枠にborderを設定
h1{ border : solid 1px #000000; } section h1{ text-align : center; }
上記の設定は、見出し h1 要素に1px の黒の実線を外枠に書いています。
その下のコードは同じh1 に書くんだけれど、sectionという親要素の中のh1 だよという指定になるので、全部のh1 が中央揃えになるとは限りません。
この指定を子孫セレクタといいます。