横幅指定の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 が中央揃えになるとは限りません。
この指定を子孫セレクタといいます。
