CSS ย่อมาจาก Cascading Style Sheets ใช้สำหรับกำหนดว่าอีลิเมนต์ของ HTML แต่ละอีลิเมนต์ จะแสดงผลอย่างไรบนหน้าจอหรือสื่ออื่น ๆ อีกทั้งยังช่วยย่นระยะเวลาในการตกแต่งอีลิเมนต์ต่าง ๆ ได้อย่างมาก เพราะเราสามมรถใช้ CSS ตกแต่งอีลิเมนต์ในหลาย ๆ เว็บเพจได้จากที่เดียว หรือการเขียนโค้ดเพียงครั้งเดียว
เราสามารถใช้งาน CSS ใน HTML ได้ 3 ทาง ดังนี้
- Inline คือ การใช้งานแอททริบิวต์ CSS ภายในอีลิเมนต์ HTML แต่ละอีลิเมนต์ได้เลย
- Internal คือ การใช้งาน CSS ในหน้าเว็บหนึ่ง ๆ โดยการเขียน CSS ไว้ในส่วนหัวของเว็บเพจ ภายในอีลิเมนต์ <style></style>
- External คือ การเขียน CSS ไว้ในไฟล์อื่น แล้วเรียกเข้ามาใช้งานภายในเว็บเพจอีกที
โดยวิธีที่นิยมที่สุดคือวิธีที่ 3 คือแบบ External เขียน CSS ไว้ในไฟล์อื่นแยกต่างหาก แล้วค่อยนำเข้ามาใช้ในหน้าเว็บเพจแต่ละหน้า จะทำให้เกิดความสะดวกสบาย เพราะเราสามารถเขียนโค้ด CSS เพียงครั้งเดียว แต่สามารถนำไปใช้งานได้หลายที่
Inline CSS
Inline CSS ใช้สำหรับกำหนดสไตล์ให้กับอีลิเมนต์แต่ละตัว โดยไม่มีผลกับอีลิเมนต์ตัวอื่น ๆ เช่น
<h1 style="color:red;">This is a Red Heading</h1>
Internal CSS
Internal CSS ใช้สำหรับเขียน CSS เพื่อใช้งานในหน้าเว็บเพจหนึ่ง ๆ โดยจะเขียนไว้ในส่วน <head></head> ของหน้าเว็บเพจนั้น ๆ โดยโค้ด CSS จะต้องอยู่ภายในแท็ก <style></style> อีกที เช่น
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>นี่คือส่วนหัว</h1> <p>นี่คือพารากราฟ</p> </body> </html>
บรรทัดที่ 4-8 เป็นการเขียน CSS ไว้ในเว็บเพจ
CSS ที่เขียนไว้ในหน้าเว็บเพจลักษณะนี้ จะมีผลต่ออีลิเมนต์ในหน้าเว็บเพจนั้นเท่านั้น
External CSS
External CSS คือการสร้างไฟล์ CSS ไว้นอกเว็บเพจ แล้วค่อยเรียกใช้ไฟล์ CSS ที่เขียนไว้นั้นในเว็บเพจอีกที่ ข้อดีคือ สามารถเรียกใช้ไฟล์ดังกล่าวได้จากทุกเว็บเพจในเว็บไซต์ ทำให้ประหยัดเวลาในการพัฒนาและการแก้ไข
โดยการใช้งาน External CSS นั้น เราต้องเพิ่มแท็ก <link> เข้าไปยังส่วน <head></head> ของเว็บเพจ แล้วอ้างอิงไปยังไฟล์ CSS ที่ต้องการใช้งาน ดังตัวอย่าง
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
บรรทัดที่ 4 เป็นการอ้างอิงไฟล์ CSS จากภายนอก
ไฟล์ CSS ที่สร้างขึ้น สามารถเขียนด้วยโค้ด CSS ได้เลย โดยไม่ต้องมีโค้ด HTML ใด ๆ ทั้งสิ้น และต้องบันทึกเป็นรูปแบบไฟล์ CSS คือไฟล์จะมีนามสกุลเป็น .css ซึ่งลักษณะของโค้ด CSS จะเป็นดังนี้
body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
CSS Fonts
เมื่อต้องการกำหนดรูปแบบอักษร Fonts ให้กับอีลิเมนต์ใด ๆ เราสามารถใช้พร็อพเพอร์ตี้ ดังนี้
- color ใช้กำหนดสีฟ้อนต์
- font-family ใช้กำหนดรูปแบบฟอนต์
- font-size ใช้กำหนดขนาดฟอนต์
ตัวอย่างการใช้ CSS กำหนดฟอนต์
<!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>นี่คือส่วนหัวเรื่อง</h1> <p>นี่คือส่วนย่อหน้าหรือพารากราฟ</p> </body> </html>
CSS Border
เราสามารถกำหนดลักษณะของเส้นขอบให้อีลิเมนต์ได้ โดยใช้พร็อพเพอร์ตี้ border ดังนี้
p { border: 1px solid powderblue; }
CSS Padding
พร็อพเพอร์ตี้ padding ใช้สำหรับกำหนดระยะห่างระหว่างตัวอักษรกับเส้นขอบด้านใน โดยต้องกำหนดเป็นพิกเซล โดยมีการใช้งานดังนี้
p { border: 1px solid powderblue; padding: 30px; }
CSS Margin
พร็อพเพอร์ตี้ margin ใช้สำหรับกำหนดระยะห่างระหว่างขอบอีลิเมนต์ด้านนอกกับขอบของอีลิเมนต์อื่น ๆ ดังนี้
p { border: 1px solid powderblue; margin: 50px; }
แอททริบิวต์ id
แอททริบิวต์ id ใช้สำหรับระบุรหัสที่เฉพาะเจาะจงสำหรับอีลิเมนต์หนึ่ง ๆ ใน HTML เหมือนเลขประจำตัวประชาชน เช่น
<p id="paragraph1">I am different</p>
จากโค้ด เราได้ระบุ id ให้กับแท็ก p เป็น paragraph1 เมื่อใดก็ตามที่มีการอ้างอิงถึงไอดี paragraph1 ย่อมจะหมายถึงอีลิเมนต์นี้เพียงตัวเดียวเท่านั้น
เมื่อต้องการระบุ CSS ให้กับอีลิเมนต์ที่มีการตั้งค่า id ไว้ สามารถทำได้โดยใช้เครื่องหมาย # ตามด้วย id ของอีลิเมนต์นั้น ๆ เช่น #paragraph1 ดังนี้
#paragraph1 { color: blue; }
จากโค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มี id เป็น paragraph1 เท่านั้น จะไม่มีผลกับอีลิเมนต์อื่น
แอททริบิวต์ class
ใน HTML เราสามารถระบุแอททริบิวต์ class ให้กับอีลิเมนต์ใด ๆ ก็ได้ เพื่อความสะดวกในการตกแต่งด้วย CSS ในภายหลัง และชื่อ class เดียวกัน สามารถกำหนดให้กับอีลิเมนต์มากกว่าหนึ่ง ดังนี้
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>นี่คือส่วนหัว</h1> <p>นี่คือพารากราฟ</p> </body> </html> 0
เมื่อต้องการกำหนด CSS ให้กับอีลิเมนต์ที่มีการระบุคลาดไว้ สามารถทำได้โดยการใช้เครื่องหมาย . ตามด้วยชื่อคลาส ดังนี้
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>นี่คือส่วนหัว</h1> <p>นี่คือพารากราฟ</p> </body> </html> 1
โค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มีชื่อคลาสเป็น redtext เท่านั้น
การอ้างอิง CSS จากภายนอก
เราสามารถอ้างอิงไปยังไฟล์ CSS จากภายนอกได้ ไม่ว่าจะเป็น CSS ที่อยู่ในเว็บไซต์อื่น หรือเว็บไซต์เดียวกัน โดยใช้แท็ก ดังนี้