เขียนเว็บเองก็ได้ ง่ายจัง!

CSS Code ของหน้าเว็บนี้

/* layout และ ค่าทั่วๆไป */
body {
color:black;
background:#7a0;
font-size:100%;
font-family:"Times New Roman",Thonburi, Freeserif, Serif;
}

#page {
min-width:400px;
margin:20px;
color:#000;
background:#fff;
padding:2em;
/* เอฟเฟคต์มุมโค้งของ CSS3 ใน webkit, safari3 และ FireFox3 */
-webkit-border-radius:2em;
-moz-border-radius:2em;
border-radius:2em;
/* เอฟเฟคต์เงาของ CSS3 จะเห็นเฉพาะใน webkit และ safari3 */
-webkit-box-shadow: 0 0 2em #130;
box-shadow: 0 0 2em #130;
}

a:link {
color:#09f;
text-decoration:none;
}

a:visited {
color:#045;
text-decoration:none;
}

a:hover {
color:#c00;
text-decoration:underline;
}

/* ชื่อหน้าเว็บ */
h1#sitename {
margin:0;
padding:0;
font-size:30px;
text-align:center;
}

h1#sitename a {
display:block;
padding:0.2em 1em;
text-decoration:none;
color:#fff;
background:#e60;
/* เอฟเฟคต์มุมโค้งของ CSS3 */
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}

h1#sitename a:hover {
color:#ffc;
background:#9c0;
}

/* ลิงค์หลัก หรือ main navigation */
ul#main-nav {
margin:0;
margin-bottom:15px;
padding:0.5em 15px;
background:#7a0;
text-align:center;
font-size:100%;
line-height:1.5em;
}

ul#main-nav li {
display:inline;
list-style:none;
margin:0 0.5em;
}

ul#main-nav li a {
color:#ffc;
text-decoration:none;
padding:0.2em 0.5em;
}
ul#main-nav li a:hover {
color:#f60;
background:#fff;
}

/* ส่วนข้อควมเนื้อหาหลัก (article) */
#article {
/* CSS จะมีคุณสมบัติแบบ Inheritance คือ ถ้า element ใด ไม่ได้กำหนดค่าไว้ 
มันจะรับค่าต่อจาก element ที่อยู่ระดับบนของมัน 
ในกรณีของ #article มันจะใช้ค่าของ #page และ body ตามลำดับ */
}

/* ส่วนข้อความเสริมเนื้อหาหลัก (aside) */
.aside {
font-size:0.9em;
padding:15px;
margin-bottom:15px;
color:#444;
background:#ffe;
border:1px solid #eec;
}

.aside h3 {
margin-top:0;
}

/* ส่วนข้อความท้ายหน้า (footer) */
#footer {
clear:both;
margin-top:15px;
padding:7px 15px;
font-size:0.75em;
line-height:1em;
color:#ffe;
background:#443;
/* เอฟเฟคต์มุมโค้งของ CSS3 */
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

#footer a {
color:#fc0;
}

#footer a:hover {
color:#aaa;
background:transparent;
}
/* END CSS */