โดยปกติในหน้าเว็บ 1 หน้าจะมีลักษณะของการแสดงผลลิงก์ได้เพียง 1 ลักษณะ แต่ถ้าคุณต้องออกแบบหน้าเว็บ ดังนี้

คงเกิดปัญหาแน่นอน เพราะตัวอักษรลิงก์ทั้ง 2 ชุดปรากฏบนพื้น BG ที่แตกต่างกัน เมื่อกำหนดให้ลิงก์แสดงผลด้วยสีเพียงชุดเดียว เช่นสีดำ ก็จะทำให้เมนูบนพื้นที่แดง มองไม่ชัด แต่ถ้ากำหนดให้ลิงก์แสดงด้วยสีขาว บนพื้น BG สีเหลือง ก็จะทำให้มองไม่ชัดเช่นกัน ดังนั้นควรสร้างชุดลิงก์ 2 ลักษณะ ด้วยความสามารถของ CSS ช่วยแก้ปัญหานี้ได้แน่นอน

ขั้นตอนที่ 1 ออกแบบลักษณะของลิงก์ จากตัวอย่างจะพบว่าจะต้องมีลักษณะของลิงก์ 2 ชุด

• ชุดแรก เป็นลิงก์สำหรับพื้นสีแดง ตัวอักษรควรแสดงผลด้วยสีขาว และเมื่อ Mouse อยู่เหนือควรแสดงด้วยสีเหลือง
• ชุดที่สอง เป็นลิงก์สำหรับพื้นที่เหลือง ตัวอักษรควรเป็นสีดำ แล้วเมื่อ Mouse อยู่เหนือ ควรแสดงด้วยสีน้ำเงิน เป็นต้น

ขั้นตอนที่ 2 สร้าง CSS ควบคุมลักษณะของลิงก์

• เปิด Panel CSS ด้วยคำสั่ง Window, CSS Styles...
  
• คลิกปุ่ม เพื่อเข้าสู่การสร้าง CSS ชุดใหม่
  
• ตั้งชื่อ 191 CSS ในรายการ Selector โดยจะต้องนำหน้าด้วย . เช่น CSS สำหรับลิงก์บน BG สีแดง ก็กำหนดเป็น .redbg a:link เลือก Type เป็น Use CSS Selector และเลือกให้คำสั่ง CSS บันทึกเป็นไฟล์ CSS ด้วยตัวเลือก New STyle Sheet File จากรายการ Define In: เมื่อคลิก OK จะปรากฏหน้าต่างสอบถามการบันทึกชื่อไฟล์ CSS
  f1d
• กำหนดชื่อไฟล์ CSS และโฟลเดอร์ แล้วคลิกปุ่ม Save เพื่อบันทึกไฟล์ CSS รอสักครู่จะปรากฏหน้าต่างกำหนดลักษณะ CSS ดังนี้
  
• คลิกเลือก Color ให้เป็นสีขาว สำหรับแสดงสีลิงก์บนพื้นสีแดง
• ทำซ้ำโดยสร้าง
  • .redbg a:visited แล้วเลือกสีเป็นสีขาว สำหรับลิงก์ที่ผ่านการเรียกดูแล้ว
  • .redbg a:hover แล้วเลือกสีเป็นสีเหลือง สำหรับลิงก์ขณะที่เมาส์อยู่เหนือลิงก์
  • .redbg a:active แล้วเลือกสีเป็นสีฟ้าอ่อน สำหรับลิงก์ขณะเชื่อมข้อมูล
• สร้างชุดลิงก์อีกชุดสำหรับพื้น BG สีเหลือง โดยกำหนดชื่อเป็น
  • .yellowbg a:link แล้วเลือกสีเป็นสีดำ สำหรับลิงก์
  • .yellowbg a:visited แล้วเลือกสีเป็นสีดำ สำหรับลิงก์ที่ผ่านการเรียกดูแล้ว
  • .yellowbg a:hover แล้วเลือกสีเป็นสีน้ำเงิน สำหรับลิงก์ขณะที่เมาส์อยู่เหนือลิงก์
  • .yellowbg a:active แล้วเลือกสีเป็นสีแดง สำหรับลิงก์ขณะเชื่อมข้อมูล

ขั้นตอนที่ 3 การนำไปใช้งาน

• คลิกเมาส์ในเซลล์พื้นสีแดง ตรวจสอบที่บรรทัด Code View
  
• คลิกที่รายการแท็ก <tr> คลิกขวาแล้วเลือกคำสั่ง Set Class, redbg
  
• ทำซ้ำกับเซลล์พื้นสีเหลือง แต่เปลี่ยนเป็นรายการ Set Class, yellowbg
• บันทึกไฟล์ html แล้วทดสอบด้วยปุ่ม <F12>