ตอนนี้เรามีไฟล์ HTML ที่มี style sheet ฝังอยู่แต่หาก
เวบไซด์ของเรามีเนื้อหาเพิ่มมากขึ้นเราอาจจะต้องการให้หน้าแต่ละหน้าสามารถใช้สไตล์ร่วม
กันได้ ซึ่งมีวิธีที่ดีกว่าการก๊อปปี้ style sheet ลงไปในทุกๆหน้า
นั่นก็คือหากเราใส่ style sheet
แยกไฟล์ไว้ทุกๆหน้าเวบก็สามารถเรียกสไตล์มาใช้ได้โดยตรง
ในการสร้างไฟล์สำหรับ style sheet เราต้องสร้างไฟล์ text เปล่าขึ้นมาอีกหนึ่งไฟล์ คุณสามารถทำได้โดยเลือก “New” จากเมนู File ในโปรแกรมแก้ไขเพื่อสร้างหน้าเปล่าขึ้นมาหนึ่งหน้า (ถ้าคุณใช้โปรแกรม TextEdit อย่าลืมว่าต้องแก้ไขให้เป็นข้อความธรรมดาก่อนโดยเลือกได้จากเมนู Format)
หลังจากนั้นให้ตัดและวางทุกส่วนที่อยู่ใน element <style> จากไฟล์ HTML ลงไปยังหน้าใหม่แต่อย่าก๊อปปี้ตัว element <style> และ </style> เอง เพราะเป็นส่วนที่ใช้กับ HTML ไม่ใช่ CSS ในหน้าใหม่ของโปรแกรมแก้ไข ควรจะมี style sheet ที่ครบสมบูรณ์ดังนี้
ตอนนี้ให้กลับไปยังหน้าที่มีโคด HTML ให้เอาทุกอย่างออกเริ่มตั้งแต่ tag <style> จนถึง tag </style> และแทนที่ด้วย element <link> ดังนี้
หากคุณเซฟไฟล์ HTML และโหลดใหม่ในบราวเซอร์ คุณอาจจะมองไม่เห็นถึงความแตกต่างเพราะหน้าเวบยังคงมีสไตล์เดิมแต่ตอนนี้สไตล์จะมาก จากไฟล์ที่อยู่ข้างนอก
ผลสุดท้ายที่ได้
ขั้นตอนต่อไปก็คือการวางทั้งไฟล์ mypage.html และ mystyle.css
บนเวบไซด์ของคุณ (ซึ่งคุณอาจจะต้องการแก้ไขก่อนเล็กน้อย)
แต่ส่วนวิธีการวางอย่าง
ไรนั้นขึ้นอยู่กับผู้ให้บริการอินเตอร์เน็ทของคุณ
ในการสร้างไฟล์สำหรับ style sheet เราต้องสร้างไฟล์ text เปล่าขึ้นมาอีกหนึ่งไฟล์ คุณสามารถทำได้โดยเลือก “New” จากเมนู File ในโปรแกรมแก้ไขเพื่อสร้างหน้าเปล่าขึ้นมาหนึ่งหน้า (ถ้าคุณใช้โปรแกรม TextEdit อย่าลืมว่าต้องแก้ไขให้เป็นข้อความธรรมดาก่อนโดยเลือกได้จากเมนู Format)
หลังจากนั้นให้ตัดและวางทุกส่วนที่อยู่ใน element <style> จากไฟล์ HTML ลงไปยังหน้าใหม่แต่อย่าก๊อปปี้ตัว element <style> และ </style> เอง เพราะเป็นส่วนที่ใช้กับ HTML ไม่ใช่ CSS ในหน้าใหม่ของโปรแกรมแก้ไข ควรจะมี style sheet ที่ครบสมบูรณ์ดังนี้
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
ให้เลือก “Save As…” จากเมนู File
ต้องแน่ใจว่าได้เซฟไว้อยู่ในส่วนหรือแฟ้มเดียวกันกับไฟล์ mypage.html
และให้เซฟ style sheet เป็น “mystyle.css”
ตอนนี้ให้กลับไปยังหน้าที่มีโคด HTML ให้เอาทุกอย่างออกเริ่มตั้งแต่ tag <style> จนถึง tag </style> และแทนที่ด้วย element <link> ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> [etc.]ส่วนนี้จะเป็นส่วนที่บอกบราวเซอร์ว่า style sheet จะอยู่ในไฟล์ที่ชื่อว่า “mystyle.css” และเนื่องจากไม่ได้มีการบอกถึงส่วนที่เก็บไฟล์ บราวเซอร์จะดูจากส่วน ที่เก็บไฟล์เดียวกันกับไฟล์ HTML
หากคุณเซฟไฟล์ HTML และโหลดใหม่ในบราวเซอร์ คุณอาจจะมองไม่เห็นถึงความแตกต่างเพราะหน้าเวบยังคงมีสไตล์เดิมแต่ตอนนี้สไตล์จะมาก จากไฟล์ที่อยู่ข้างนอก
ผลสุดท้ายที่ได้
โดยทั่วไปแล้ว บราวเซอร์จะแสดงลิงค์ด้วยการขีดเส้นใต้และใส่สี
โดยปกติสีที่ใช้จะเหมือนกับสีที่ระบุไว้ในที่นี้ คือ
สีฟ้าไว้สำหรับลิงค์ไปยังหน้าที่คุณยังไม่ได้เข้าไปดู
(หรือที่เคยเข้าไปดูเมื่อนานมาแล้ว)
สีม่วงไว้ใช้สำหรับหน้าที่เข้าไปดูมาแล้ว
