CSSのプロパテーと値

#CSSのプロパティーについて
プロパティーの種類は様々なものがありあます。
文字の色、背景色、背景画像、フォントの種類、フォントの大きさなどがあります。
ではここで実際に使ってみしょう。

まずはhtml内にPタグを指定し文字の色を変えてみよう。

index.html
<p>テスト</p>

style.css
@charset "utf-8"
p {
/*処理を書く*/
color:#f0000;
}

上の様に文字が赤くなっていれば成功です！
日本で訳すとすべてのPタグに対して文字の色を赤くしてねという命令になります。
Pタグの{}内の処理はcolorで文字色を変えてほしいということになり、何色に変えるのかという
命令を：の後に書いています。

文字の大きさを変える場合はfont-size:〇〇px;
背景色はbackground-color、背景画像はbackground-imag：url();です。

例題として、html内でPタグを指定しテキスト内容はHallo.
cssでpタグに対して文字の大きさを20ピクセル　文字色は白　背景色を青にしてください。
すると以下の結果になります。

コードの回答はこちら

index.html
<p>Hallow</p>

style.css
@charset "utf-8"
p {
color:#ffffff;
background-color:#0000ff;
font-size:20px;
}

次は四角箱を３つほど作ってみましょう
まず横幅を４０ピクセル、縦幅を３０ピクセルにします。
そしたら箱の空間を１０ピクセルほどにしていきます。

index.html
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
style.css
@charset "utf-8"
p {
/*処理を書く*/
.box {
    width: 40px;
    height: 30px;
    background-color: blue;
}
.box2 {
    width: 40px;
    height: 30px;
    margin-top: 10px;
    background-color: blue;
}
.box3 {
    width: 40px;
    height: 30px;
    margin-top: 10px;
    background-color: blue;
}

処理を見ていきましょう
widthは横幅、heightは縦の長さを表しています。
margin-topは上の余白部分を表しています、余白についてはまた後日書いていきます。
background-colorで背景色の指定をしています。これらの結果は以下の様になっていますか？

縦に並んでいれば正解です。
HTMLの処理を基本的には上から下に流れ左側に反映されていきます。

問題です、青い箱を好きな色に変えてください(青以外の色、３つの箱の色をバラバラで）大きさは横と縦を同じ１００ピクセルに指定。余白はそのままで平気です。

こんな感じになりましたか？なっていれば正解です。答えは次回に載せます。