位置変更など

中央に配置します

左側50px開けます

文字を40pxにします

文字をゴシック体にします

文字をitalic体にします

文字間を広くします

インデントを入れます

文字に影を付けます

文字を青色にします

この部分だけ青文字にします

背景に色をつけます

真ん中までだけ背景に色をつけます

半透明の色を付けます

四角で囲います

角を丸めます

四角の幅と高さを調整します

<div class="font_color">
   <p id="center">中央に配置します</p>
   <p id="left50">左側50px開けます</p>
   <p id="font40">文字を40pxにします</p>
   <p id="gothic">文字をゴシック体にします</p>
   <p id="italic">文字をitalic体にします</p>
   <p id="space">文字間を広くします</p>
   <p id="indent">インデントを入れます</p>
   <p id="shadow">文字に影を付けます</p>
   <p id="blue">文字を青色にします</p>
   <p><span id="blue">この部分だけ</span>青文字にします</p>
   <p id="background">背景に色をつけます</p>
   <p id="half">真ん中までだけ背景に色をつけます</p>
   <p id="opacity">半透明の色を付けます</p>
   <p id="square">四角で囲います</p>       
   <p id="radius">角を丸めます</p>
   <p id="square_width">四角の幅と高さを調整します</p>
</div>

.font_color{
    color: rgb(154, 253, 55);
}

#center{
    text-aline:center;
}

#left50{
    padding-left: 50px;
}

#font40{
    font-size: 40px;
}

#gothic{
    font-family: yu 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

#italic{
    font-style: italic;
}

#space{
    letter-spacing:10px;
}

#indent{
    text-indent: 10px;
}

#shadow{
    text-shadow:white 2px 2px 8px;
}

#blue{
    color:blue;
}

#square{
    border: 1px solid;
}

#background{
    background-color:blue;
}

#half{
    background-color: blue;
    margin-right: 50%;
}

#opacity{
    background-color: blue;
    opacity: 0.5;
}

#radius{
    border: 1px solid;
    border-radius: 5px;
}

#square_width{
    border: 1px solid;
    height: 40px;
    width: 100px;
}

上記ではfont_colorというclassにcolor: rgb(154, 253, 55);という処理を入れているので適用されている範囲の文字色が変更されています。

その他の行では、<p id="id名">～</p>の範囲にそれぞれに対応するCSSファイルの内容を適用させています。