CSSとは『Cascading Style Sheets（カスケーディング・スタイル・シート）』の略です。
詳しい意味などについては、下記参考サイトや検索サイトで『CSSとは』で調べると山のように出てくるので省きます。
というのはあまりにも不親切なので、ものっっすごく簡単に言うと、CSSを使うことで"役割分担"をさせることができるのです。
CSSを使わないでレイアウトする場合、HTML（ナノでいう全体レイアウトなど）内で構造・装飾すべてをデザインすることになります。
それを『HTML→構造（骨組み）』『CSS→装飾（レイアウト）』というように分離することで、構造は全く同じでもデザインが全く違うページを作ることが可能になります。
また、CSSを使う利点として、上記の通りHTML内には骨組みしかないわけですから、編集ページがすっきりします。文章を編集する時など、目的の場所を探しやすいです。
《参考サイト》
とほほのスタイルシート入門(基礎知識)CSSの基本-HTMLクイックリファレンス初心者の館-WEB工房きくちゃん（例）文字の
一部だけ色を変える
【１】fontタグを使う▼HTML（ナノでいう全体レイアウトや各レイアウト画面）
文字の<font color="red">一部だけ</font>色を変える
【２】インラインCSSを使う▼HTML
文字の<span style="color:red">一部だけ</span>色を変える
【３】HEAD内CSSを使う▼CSS
<style type="text/css">
span {color:red}
</style>
▼HTML
文字の<span>一部だけ</span>色を変える
【１】【２】【３】どの方法も結果は同じで『一部だけ』の文字色が赤に変わります。
この、色を変えたい部分がページ内に１箇所だけなら【１】【２】の方法でも選択肢としてはありだと個人的には思います。
ただ、それを複数の場所で同じようにして使う時、後になって違う色に変えたくなったりした時、すべての箇所の色コードを手動で記述・変更しなければなりません。
使う場所が多ければ多いほど、記入漏れなどミスが起こる可能性も高くなりますし、何より手間がかかります。
その点、【３】を使えば、『color:red』の色の部分を変更するだけで、『<span>一部だけ</span>』と同じ形で記述している場所が全て一緒に変わります。
当テンプレートでは、可能な限り全てのレイアウトをこのHEAD内CSSを使って行っています。
ちなみに 本来、CSSはHEAD内ではなくCSS専用のファイル（外部CSS）を作りHEAD内にリンクをつけて呼び出す方法が一般的です。
ナノを始めとするほとんどのレンタルスペースでは外部CSSを使えませんので、HEAD内に直接記述していく方法が用いられています。