CakePHPのCSS

まずは全体に対して

マージン（BOXの外側の余白）、パディング（BOXの内側の余白）を0に

＊ {
	margin:0;
	padding:0;
}

HTMLタグに対して

id／classが無指定の場合はコレが適用されます

bodyタグ

背景色、文字色、フォント、マージン（BOXの外側の余白）を設定

body {
	background: #003d4c;
	color: #fff;
	font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
	font-size:90%;
	margin: 0;
}

アンカー（a）タグ

基本的な設定

a {
	color: #003d4c;
	text-decoration: underline;
	font-weight: bold;
}

マウスポインタを置いたときは色を変える

a:hover {
	color: #367889;
	text-decoration:none;
}

アンカーの中にimgがある時は枠線なし

a img {
	border:none;
}

見出し（h1 など）タグ

h1〜4までの基本設定

h1, h2, h3, h4 {
	font-weight: normal;
	margin-bottom:0.5em;
}

レベル毎の個別設定

h1 {
	background:#fff;
	color: #003d4c;
	font-size: 100%;
}
h2 {
	background:#fff;
	color: #e32;
	font-family:'Gill Sans','lucida grande', helvetica, arial, sans-serif;
	font-size: 190%;
}
h3 {
	color: #993;
	font-family:'Gill Sans','lucida grande', helvetica, arial, sans-serif;
	font-size: 165%;
}
h4 {
	color: #993;
	font-weight: normal;
}

リスト（ul、li）タグ

マージン（外余白）を設定。値が２つなので【上下】【左右】と読んで、左右にマージンを取る

ul, li {
	margin: 0 12px;
}

id指定用（レイアウト用）

HTML側で「id=xxxx」と指定する

コンテナ

で指定。全体を囲む

#container {
	text-align: left;
}

ヘッダ

で指定。

#header{
	padding: 10px 20px;
}

ヘッダの中の見出し「h1」とアンカー「a」

#header h1 {
	line-height:20px;
	background: #003d4c url('../img/cake.icon.png') no-repeat left;
	color: #fff;
	padding: 0px 30px;
}
#header h1 a {
	color: #fff;
	background: #003d4c;
	font-weight: normal;
	text-decoration: none;
}
#header h1 a:hover {
	color: #fff;
	background: #003d4c;
	text-decoration: underline;
}

コンテンツ

で指定。いわゆる本文。

#content{
	background: #fff;
	clear: both;
	color: #333;
	padding: 10px 20px 40px 20px;
	overflow: auto;
}

フッタ

で指定。

#footer {
	clear: both;
	padding: 6px 10px;
	text-align: right;
}