- Đây là phần tổng quát để các bạn nắm được sơ qua về CSS để hiểu rõ hơn thì nên xem các phần sau.
- Phần này mình sẽ nói sơ qua vì cũng dễ hiểu thôi biết chút về html là được công việc bắt đầu.

* Phần đầu:
body {
font-family : Comic Sans MS, Bold, Helvetica, sans-serif;
margin : 0 0 0 0 ;
font-weight : normal;
font-size : small;
background-color : black;
color : #FF8C00;
}
a {
text-decoration : none;
color : red;
}
- Đây là phần quyết định toàn trang sẽ như thế nào. Phân tích ra sẽ đơn giản hơn nhiều toàn kiến thức html thôi.
font-weight : normal;
font-size : small;
-> dòng này là kiểu chữ.
background-color : black;
-> màu của trang ở đây là màu đen black mình viết thế cho dễ hiểu các bạn có thể sử dụng mã màu.
a {
text-decoration : none;
color : red;
}
-> đây là màu của link liên kết màu đỏ.
- Cơ bản là thế hãy sáng tạo thêm bằng trí tưởng tượng của mình nha.

* Lớp class:
.footer {
color : white;
background-color : #333;
text-align : center;
font-weight : bold;
padding : 2px;
}
- Lớp (class) Nó cũng tương tự như phần đầu chỉ khác là nó để tạo nên các khung, hiệu ứng được quy định sẵn thôi. Tên class này là footer.
- Khác với phần đầu là ở đây quy định sẵn kíck thước:
padding : 2px;
ví dụ thế.
- Save hai phần lại tạo một file dạng **.css - ví dụ style.css
body {
font-family : Comic Sans MS, Bold, Helvetica, sans-serif;
margin : 0 0 0 0 ;
font-weight : normal;
font-size : small;
background-color : black;
color : #FF8C00;
}
a {
text-decoration : none;
color : red;
}
.footer {
color : white;
background-color : #333;
text-align : center;
font-weight : bold;
padding : 2px;
}
body { font-family : Comic Sans MS, Bold, Helvetica, sans-serif; margin : 0 0 0 0 ; font-weight : normal; font-size : small; background-color : black; color : #FF8C00; } a { text-decoration : none; color : red; } .footer { color : white; background-color : #333; text-align : center; font-weight : bold; padding : 2px; }
- Như thế đã có một file CSS sẵn sàng cho sử dụng với một lớp footer, nhưng chẵng ai sử dụng CSS mà chỉ dùng một lớp duy nhất hãy sáng tạo thêm các lớp đẹp hơn.
/* WAPAC.MOBIE.IN */ .ca{ padding-top: 10px; padding-bottom: 10px;} .itemLinks{ padding-top: 6px; } .error{ color:#ee0000; } .fHeader{color:#000000;font-size:small;margin-bottom:5px;font-weight:bold; margin-top: 10px; padding-left: 3px;} .row1{margin-bottom:0px; border-top:1px #bbbbbb dashed;padding-bottom:2px;padding-top:2px; margin:0px;} .row2{margin-bottom:0px;background-color:#ffffff;border-top:1px dashed #bbbbbb;padding-bottom:2px;padding-top:2px; margin:0px;} .row_single{margin-bottom:0px;background-color:#ffffff; border-top:1px dashed #bbbbbb;border-bottom:1px dashed #bbbbbb;padding-bottom:2px;padding-top:2px;} .zFQuote{padding:15px 0px;background:#f9f9f9;font-size:x-small;} .fQH{color:#555555;font-style:italic;} a { color:#960000;text-decoration:none;text-decoration:underline} a:hover{text-decoration:underline;} .imenu{border:1px #ffffff solid;margin-top:4px;} a .imenu {margin-right:4px;} a:focus .imenu {border:1px #888888 solid;} a:hover .imenu {border:1px #888888 solid;} a:active .imenu {border:1px #888888 solid;} form {margin-bottom:12px;} h1{font-weight: bold; font-size: 120%; padding-bottom: 5px; padding-top: 5px; padding-left: 3px; margin:0px;} h2{color:#000000;font-weight:bold;font-size:small;margin-bottom:11px; padding-top: 10px; margin:0;} img.pgthumb{margin-right:5px;vertical-align:middle; border:0px;} img.avth{margin-right:5px;vertical-align:middle;} span.date{ font-size:x-small;color:#517ca8;} img.fstat{vertical-align:middle;margin-right:4px;} .dlText, .dlText a{ font-size: small; } .zerozero {width:0em;height:0em;} .logo {margin-bottom:14px;text-align:center;} .smaato {} .smaatoText {} .zcodeHelp{ text-decoration: none; font-weight: bold;} .sortOpt {font-size:x-small;background-color:#f0f0f0;padding:2px;border-bottom:1px #bbb solid;border-top:1px #bbb solid;} /* WAPAC 2011-08-05 */ body{font-family: arial,helvetica,verdana,sans-serif;margin: 0px;font-size: small;} .rl{ background-color : #7dbc28; color: white;margin-top : 1px; margin-bottom : 1px; padding : 2px; border : 1px solid #FFFFFF; } .rlA{color: white;font-weight: bold;} .menu{ background: #F3F3F3; color: #4A4A4A; margin-top: 1px; padding: 1px; border: 1px solid #BBBBBB; } .bmenu{ background: #F3F3F3; color: #4A4A4A; margin-top: 1px; padding: 1px; border: 1px solid #BBBBBB; } /* WAPAC.MOBIE.IN */
- Đây là toàn bộ file CSS mẫu các bạn từ từ mà nghiên cứu.
- Chúc thành công !