đề h2 màu xanh lá chúng ta sẽ làm như sau:
body{
color:#000
}
h1{
color:#0000FF
}
h2{
color:#00FF00
}
5.2. Thuộc tính text – indent
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS.
Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần 
p {
text-indent:30px
}
5.3. Thuộc tính text – align
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều).
Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều đối với thành phần 
h1, h2 {
text-align:right
}
p {
text-align:justify
}
5.4. Thuộc tính letter – spacing
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần là 5px chúng ta sẽ viết CSS sau:
h1, h2 {
letter-spacing:7px
}
p { letter-spacing:5px }
5.5. Thuộc tính text – decoration
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2
h1{
text-decoration:underline
}
h2{
text-decoration:overline
}
5.6. Thuộc tính text – Transform
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML.
Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định).
Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự.
h1{
text-transform:uppercase
}
h2{
text-transform:capitalize
}
6. Peseudo – classes for Link.
Một thành phần rất quan trọng trong mọi website chính là liên kết.Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ, cho một liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo- classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo- classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web.
Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang trí cho một liên kết dựa trên pseudo-classes.
Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu tím.
a:link{
color:#00FF00
}
a:hover{
color:#FF00FF
}
a:vistited{
color:#FF0000
}
a:active{color:#662D91}
Ví dụ 2: Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font 1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.
a:link {
color:#00FF00;
font-size:14px
}
a:hover{
color:#FF00FF;
font-size:1.2em;
text-decoration:blink
}
a:vistited{
color:#FF0000;
text-decoration:none
}
a:active{
color:# 662D91;
font-variant:small-caps
}
Ví dụ 3: Ví dụ này cũng tạo cho liên kết hiệu ứng màu sắc giống ví dụ 2 nhưng sẽ có thêm 1 số hiệu ứng: các liến kết sẽ có khung viền màu đen, kích cỡ font 14px; liên kết mouse over có nền light cyan; các liên kết đã thăm có nền light yellow.
a {
border:1px solid #000;
font-size:14px
}
a:link{
color:#00FF00;
}
a:hover{
background-color:#00BFF3;
color:#FF00FF;
font-size:1.2em;
text-decoration:blink
}
a:vistited{
background-color:#FFF568;
color:#FF0000;
text-decoration:none
}
a:active{ color:#662D91; font-variant:small-caps }
Ba ví dụ trên chỉ là một tí gợi ý về khả năng kết hợp các thuộc tính CSS với pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web. Cũng xin nói luôn là các ví dụ Pearl trình bày trong bài này cũng như những bài khác thật ra trông không dễ nhìn, đó là do Pearl không có nhiều thời gian để chăm chút các ví dụ của mình. Cái mà Pearl muốn nói chỉ là làm thế nào các bạn hiểu tác dụng một thuộc tính nào đó để có thể vận dụng cho trang web của chính mình.
7. Class – Id
7.1. Nhóm phần tử Class.
Ví dụ chúng ta có một đoạn mã HTML sau đây :
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
Hà Nội
TP. Hồ Chí Minh
Đà Nẵng
Thừa Thiên Huế
Khánh Hòa
Quãng Ninh
Tiền Giang
Yêu cầu đặt ra là làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ dùng một thuộc tính HTML gọi là class để tạo thành 2 nhóm là thành phố và tính. Ta sẽ viết lại đoạn HTML sau thành như thế này:
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
Hà Nội
TP. Hồ Chí Minh
Đà Nẵng
Thừa Thiên Huế
Khánh Hòa
Quãng Ninh
Tiền Giang
Với việc dùng class để nhóm các đối tượng như trên thì công việc của chúng ta sẽ trở nên đơn giản hơn nhiều:
li .tp {
color:FF0000
}
li.tinh{ 
color:0000FF
}
Lưu ý: Không nên đặt tên class với ký tự đầu là chữ số, nó sẽ không làm việc cho Firefox.
7.2. Nhận dạng phần tử với Id.
Ví dụ:
Cũng với đoạn HTML như ví dụ về class. Nhưng yêu cầu đặt ra là Hà Nội sẽ có màu đỏ sậm, TP. Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi còn các tỉnh màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ sử dụng thuộc tính HTML là id để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh. Đoạn HTML của chúng ta bây giờ sẽ là :
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
Hà Nội
TP. Hồ Chí Minh
Đà Nẵng
Thừa Thiên Huế
Khánh Hòa
Quãng Ninh
Tiền Giang
Và đoạn CSS cần dùng sẽ là :
#hanoi { color:# 790000 }
#hcmc { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#0000FF }
 Lưu ý: Không nên đặt tên id với ký tự đầu là chữ số, nó sẽ không làm việc cho Firefox.
Trải qua hai ví dụ trên chúng ta có thể rút ra những kết luận sau:
- Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có
thể được sử dụng nhiều lần.
- Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất.
Trong bài học này, chúng ta đã được học về các sử dụng class và id để áp dụng các đặc tính đặc biệt cho một thành phần web. Ở bài kế tiếp chúng ta sẽ được học thêm về hai thẻ và trong HTML và ý nghĩa 2 thẻ này đối với việc viết CSS.
8. Span – Div.
8.1. Nhóm phần tử với 
Thẻ trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn.
Ví dụ: Chúng ta có đoạn HTML sau trích dẫn câu nói của chủ tịch Hồ Chí Minh
Không có gì quý hơn độc lập, tự do.
Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do. Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ vào đoạn HTML như sau:
Không có gì quý hơn độc lập, tự do.
Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên:
.nhanmanh {
font-weight:bold
}
8.2. Nhóm phần tử với 
Cũng như , cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là dùng để nhóm một khối phần tử trong khi đó có thể nhóm một hoặc nhiều khối phần tử.
Trở lại ví dụ về danh sách tỉnh, thành trong phần class bài trước chúng ta sẽ giải quyết vấn đề bằng cách nhóm các phần tử với như sau:
Danh Sách Các Tỉnh, Thành Phố Việt Nam:
Hà Nội
TP. Hồ Chí Minh
Đà Nẵng
Thừa Thiên Huế
Khánh Hòa
Quãng Ninh
Tiền Giang
Và đoạn CSS cho mục đích này sẽ là:
#tp {
color:#FF0000
}
#tinh{ color:0000FF 
}
9. Margin & padding.
Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web.
Mô hình trên là một mô hình lý thuyết lý tưởng. Dưới đây ta sẽ xét mô hình của một đối tượng web cụ thể:
Ví dụ: Có đoạn mã HTML sau:
p {
width:200px;
margin:30px 20px;
padding:20px 10px;
border:1px solid #000;
text-align:justify
}
Với ví dụ trên ta sẽ khái quát được mô hình hộp như sau:
9.1. Thuộc tính Margin.
Như tất cả những ai đã học qua MS Word đều biết là trong phần thiết lập Page Setup của Word cũng có một thiết lập margin để định lề cho trang in. Tương tự, thuộc tính margin trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.
Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web.
body {
margin-top:80px;
margin-bottom:40px;
margin-left:50px;
margin-right:30px;
border:1px dotted #FF0000
}
Hoặc gọn hơn chúng ta sẽ viết như sau:
body {
margin:80px 30px 40px 50px;
border:1px dotted #FF0000
}
Cú pháp như sau:
margin: | | | 
Hoặc: margin:| – với value 1 là giá trị margin-top và margin- bottom và value2 là giá trị margin-left và margin-right.
Kết quả của ví dụ trên sẽ được cụ thể hóa mô hình như sau:
Ví dụ kế tiếp sẽ thể hiện rõ hơn về việc dùng margin để canh lề cho các đối tượng trong trang web. Các bạn hãy quan sát các đường viền và nhận xét.
body{
margin:80px 30px 40px 50px;
border:1px solid #FF0000
}
#box1{
margin:50px 30px 20px 40px;
border:1px solid #00FF00
}
#box2{
margin:50px 30px 20px 40px;
border:1px solid #0000FF
}
9.2. Thuộc tính Padding.
Padding có thể hiểu như là một thuộc tính đệm. Padding không ảnh hưởng tới khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng (xem lại ảnh minh họa về boxmodel).
Cú pháp: Tương tự margin.
Padding: | | | 
Các bạn hãy thử thực hiện lại 2 ví dụ ở phần margin, nhưng thay margin bằng padding, nhớ quan sát vị trí đường viền.
10. Border.
Border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn, Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để định border cho các đối tượng web.
10.1. Thuộc tính border-width
Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels. Xem hình minh họa bên dưới.
10.2. Thuộc tính border-color
Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.
10.3. Thuộc tính border-style
Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây (tất cả viền có màu vàng).
Ví dụ: Ví dụ sau sẽ định viền cho 3 thành phần h1, h2, p như sau:
h1 { border-width:thin; border-color:#FF0000; border-style:solid }
h2 { border-width:thick; border-color:#CCC; border-style:dotted }
p { border-width:5px; border-color:#FF00FF; border-style:double }
Ngoài ra, chúng ta cũng có thể dùng riêng các thuộc tính border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng.
Ví dụ:
h1{
border-top-width:thin; 
border-top-color:#FF0000; 
border-top-style:solid; 
border-right-width:thick;
border-right-color:#AFAFAF; 
border-right-style:dotted; 
border-bottom-width:2px; 
border-bottom-color:blue; 
border-bottom-style:double; 
border-left-width:5px;
border-left-color:violet;
border-left-style:groove
}
Thuộc tính border rút gọn:
Để dễ nhớ chúng ta có thể sử dụng cấu trúc rút gọn của CSS như sau:
Border: | |
11. Height & width.
11.1. Thuộc tính width.
Width là một thuộc tính CSS dùng để quy định chiều rộng cho một thành phần web. Ví dụ sau chúng ta sẽ định chiều rộng cho thành phần p của một trang web.
p {
width:700px;
}
11.2. Thuộc tính max-width
Max-width là thuộc tính CSS dùng để quy định chiều rộng tối đa cho một thành phần web.
11.3. Thuộc tính min-width
Min-width là thuộc tính CSS dùng để quy định chiều rộng tối thiểu cho một thành phần web.
11.4. Thuộc tính height
Height là một thuộc tính CSS dùng để quy định chiều cao cho một thành phần web. Ví dụ sau chúng ta sẽ định chiều cao cho thành phần p của một trang web.
p {
height:300px
}
11.5. Thuộc tính max-height
Max-height là thuộc tính CSS dùng để quy định chiều cao tối đa cho một thành phần web.
11.6. Thuộc tính min-height
Min-height là thuộc tính CSS dùng để quy định chiều cao tối thiểu cho một thành phần web.
 Lưu ý:
Thông thường chiều cao một thành phần web do văn bản trong trang web đó quyết định. Việc định chiều cao chính xác cho một thành phần sẽ tạo thanh cuộn văn bản nếu chiều cao văn bản lớn hơn chiều cao đã định.
Các thuộc tính max/min-width/height được sử dụng trong những trường hợp bạn không chắc giá trị chính xác cho width, height cả một thành phần. Ví dụ, bạn vùng chứa bài post của một forum có bề ngang 500px, bạn có thể định max-width:500px cho phần hình ảnh trong phần đó để tránh những ảnh lớn bị lệch ra ngoài.
HƯỚNG DẪN THỰC HIỆN MÔ ĐUN
1. Phạm vi áp dụng chương trình:
- Chương trình mô đun được sử dụng để giảng dạy cho trình cao đẳng nghề 
2. Hướng dẫn một số điểm chính về phương pháp giảng dạy môn học:
- Giới thiệu về ngôn ngữ HTML
- Thiết kế một Website tĩnh.
- Xây dựng được giao diện Website với CSS
- Sinh viên trao đổi với nhau, thực hiện các bài thực hành và trình bày theo nhóm
- Thực hiện các bài tập thực hành được giao.
 3. Những trọng tâm chương trình cần chú ý:
- Giáo viên trước khi giảng dạy cần phải căn cứ vào nội dung của từng bài học chuẩn bị đầy đủ các điều kiện thực hiện bài học để đảm bảo chất lượng giảng dạy.
TÀI LIỆU THAM KHẢO
[1] Bùi Huy Quỳnh, Giáo trình thiết kế web, Đại học sư phạm Kỹ Thuật TPHCM, 2004.
[2] Đinh Văn Bình , Ngắn gọn về Microsoft Frontpage 2000, Nhà xuất bản khoa học kỹ thuật 2001.
[3] Dương Quang Thiện , Thiết kế web với Frontpage 2000, Nhà xuất bản thống kê, 2001.
[4] Lữ Đức Hào, Tự học Frontpage 2002 trong 24giờ, Nhà xuất bản thống kê, 2002.