CSS คืออะไร?

CSS มาจากคำว่า Cascading Style Sheets คือ ภาษาที่ถูกเขียนขึ้นเพื่อใช้จัดการรูปแบบเอกสาร HTML ให้มีความสวยงาม เช่น สี ขนาด ของตัวหนังสือ เป็นต้น

รูปแบบการเขียน

การเขียน CSS จะต้องมีการกำหนด selector และระบุ declarations อาจระบุ declarations 1 ตัวหรือมากกว่านั้นก็ได้ ระหว่าง declarations จะต้องคั่นด้วยเครื่องหมายอัฒภาค (;)

ตัวอย่าง

p {color:red;text-align:center;}

หรือ

p
{
color:red;
text-align:center;
}

หากต้องการแทรกข้อความช่วยจำ หรือคอมเมนท์ใน CSS ให้กำหนดข้อความอยู่ใน สัญลักษณ์  /*  ......  */  เช่น

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

นอกจาก selector เรายังกำหนดการเขียน CSS ด้วย Class และ ID

หาก HTML element มีการกำหนดเป็น ID เวลาเขียน CSS จะต้องขึ้นต้นด้วยเครื่องหมาย # แล้วตามด้วยชื่อ ID แล้วค่อยระบุค่า declarations เช่น

#para1
{
text-align:center;
color:red;
}

หาก HTML element มีการกำหนดเป็น Class เวลาเขียน CSS จะต้องขึ้นต้นด้วยเครื่องหมาย . แล้วตามด้วยชื่อ Classแล้วค่อยระบุค่า declarations เช่น

.para2
{
text-align:center;
color:red;
}

บางครั้งเราอาจระบุให้ selector ใช้ Style ของ Class ก็ได้ เช่น

p.para2
{
text-align:center;
color:red;
}

***  หมายเหตุ ***

สำหรับ HTML element สามารถกำหนด Selector ID ชื่อหนึ่งๆ ได้เพียงครั้งเดียวในหน้านั้น หากมีการกำหนดมากกว่า 1 จะถือว่าใช้อันที่อยู่ล่างสุด  ส่วน Selector Class สามารถระบุได้หลายๆครั้งในหน้าหนึ่งๆ

Portfolios กับ CSS

เราสามารถใช้ CSS เข้ามาจัดการหน้า Portfolios ของเราให้สวยงามได้ เพื่อเพิ่มสีสันให้มีความสะดุดตา ึ่งจะกล่าวในบทความถัดไปครับ