css: ตัวอย่าง

ตัวอย่างเช่น เราสร้างไฟล์เอกสารไว้สองไฟล์ไว้ในโฟลเดอร์(Folder)เดียวกัน ได้แก่ไฟล์ css-test.html และไฟล์ style.css ดังภาพ

ภาพภายในเอกสาร css-test.html เป็น HTML Code ที่ยกมาจากตัวอย่างในข้อที่ 2 หากแต่เพียงแตกต่างกันที่คำสั่ง <style>..</style> ที่เปลี่ยนเป็นคำสั่ง <link> แทน

css-test.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<p>
This is some text for example.
</p>
<p>
This is <span>some text</span> for example.
</p>
</body>
</html>

ถึงจุดนี้หากเรายังไม่ได้สร้างไฟล์ style.css จะพบว่าผลลัพธ์เป็นเช่นเคย คือจะแสดงข้อความ "This is some text for example" ธรรมดาเท่านั้น ในขั้นตอนต่อไปคือการสร้างไฟล์ที่มีนามสกุล .css

style.css

p{
color:blue;
}
span{
  color:red;
  text-decoration:underline;
}
เมื่อแสดงผลลัพธ์ของไฟล์ css-test.html อีกครั้งจะพบว่าปรากฎข้อความเช่นเดิมสองบรรทัด พร้อมรูปแบบข้อความที่เปลี่ยนไปเช่นเดียวกันกับตัวอย่างก่อนนี้ ดังภาพ

เมื่อทราบถึงวิธีการเขียน css ควบคู่กันไปกับไฟล์ html แล้ว หลายท่านอาจเกิดคำถามว่า คำสั่ง css เขียนอย่างไรบ้าง? หรือมีคำสั่งอะไรบ้าง ซึ่งผู้เขียนก็ตอบเลยว่าจำไม่ได้เหมือนกัน (^^') แต่สิ่งที่จำเป็นคือเราต้องพยายามจดจำคำสั่งที่ใช้บ่อยๆ อย่างเช่นที่เราจำเป็นต้องจำแท็กต่างๆใน HTML หรือคำสั่งต่างๆในภาษาอื่นๆ ให้ทราบเพียงว่าแท็กใดทำอะไรได้บ้างเท่านั้น เพราะฉะนั้นผู้เขียนจึงขอสรุปคำสั่งที่ใช้บ่อยสำหรับจัดการข้อความ เลเอาท์(Layout) เส้นกรอบ ระยะห่าง พื้นหลัง ฯลฯ ในฉบับของผู้เขียนเอง แต่จะไม่ลงลึกมากนัก เนื่องจาก CSS เป็นภาษาที่หากศึกษาให้ละเอียดแล้วก็จะละเอียดมากจริงๆ สำหรับที่นี้ เราต้องการเพียงแค่จะทำอย่างไรให้เว็บเพจของเราแต่ละหน้าสวยขึ้นในแบบฉบับของเราเท่านั้น
สรุปคำสั่ง CSS
คำสั่งของ CSS ประกอบด้วย selector, property และ value โดยมีโครงสร้างคำสั่งคือ selector{ property: value; } ดังภาพ