ทำไมต้องมี CSS?

       ก่อนหน้านี้ เรารู้แล้วว่า HTML คือโครงสร้างของเนื้อหาในเว็บเพจ หรือพูดง่ายๆ ก็คือ HTML เอาไว้บอกว่าในหน้าเว็บนั้นมีเนื้อหาอะไรบ้าง โดยทั่วไปแล้ว web browsers จะมีการกำหนด “สไตล์” ให้กับเนื้อหาเหล่านี้เอาไว้อยู่แล้ว แต่มันอาจจะไม่ค่อยสวยเท่าไรนักในการปรับเปลี่ยน “สไตล์” ให้กับเนื้อหา เราจะใช้สิ่งที่เรียกว่า “CSS (Cascading Style Sheets)” เข้ามาช่วย ไม่ว่าจะเป็นการจัดตำแหน่งของเนื้อหา ปรับขนาดของตัวอักษร หรือเปลี่ยนสีพื้นหลัง สิ่งเหล่านี้ ล้วนทำผ่าน CSS ทั้งสิ้น หรือพูดง่ายๆ ก็คือ CSS มีไว้บอก web browsers ว่าเนื้อหาต่างๆ ควรแสดงผลออกมาอย่างไร

CSS Rule

       อย่าลืมว่าเนื้อหาต่างๆ ในหน้าเว็บนั้นถูกสร้างมาจาก “HTML Elements” การจะตกแต่งสไตล์ให้กับเนื้อหา ก็คือการใส่สไตล์ให้กับ HTML Elements นั่นเอง วิธีการก็คือ เราจะต้องสร้าง “กฎเกณฑ์” หรือสิ่งที่เรียกว่า “CSS Rule” ขึ้นมา ซึ่ง CSS Rule นี้เอง ที่จะเป็นตัวบอกว่า HTML Elements ไหนที่เราอยากจะปรับ และอยากปรับให้เป็นแบบไหน โดยมันจะแบ่งออกเป็น 4 ส่วน ด้วยกัน ดังนี้

• Selector คือ ส่วนที่เอาไว้ระบุ HTML Element ที่เราต้องการจะปรับสไตล์ สมมติว่า เราอยากจะเปลี่ยนสไตล์ของ h1 ให้เรากำหนด Selector ให้เป็น h1
• Curly Brackets เราสามารถกำหนดสไตล์หลายๆ ด้าน ได้ใน CSS Rule เดียว การกำหนดสไตล์เหล่านี้จะเรียกว่า “CSS Declarations” ซึ่งเราจะต้องครอบมันทั้งหมดด้วยปีกกา
• Property เป็นการระบุว่าเราอยากปรับลักษณะอะไร สมมติว่า เราอยากปรับ “การจัดตำแหน่งข้อความ” ก็จะได้ว่า “text-align” คือ Property
• Value เป็นการระบุว่าเราอยากปรับลักษณะนั้นให้เป็นแบบไหน สมมติว่า เราอยากปรับ “การจัดตำแหน่งข้อความ” ให้เป็น “กึ่งกลาง” เราจะได้ว่า “center” คือ Value

Selector แบบ Class และ Id

       จากตัวอย่างก่อนหน้านี้ เราได้กำหนดให้ Selector เป็น h1 ซึ่งเราจะเรียกการเขียน Selector แบบนี้ว่า “Tag Selector” คือ มันจะส่งผลไปยังทุกๆ HTML Elements ที่เป็น h1 เลย ในบางครั้ง การเขียน Selector แบบนี้ อาจดูกว้างเกินไป ให้เราแก้โดยการเขียน Selector แบบ Class หรือ Id แทน

Class

       การเขียน Selector แบบนี้ จะเป็นการระบุ HTML Elements โดยอาศัย Attribute ที่มีชื่อว่า “class” สมมติเราต้องการกำหนดสไตล์ให้กับ 4 หัวข้อ นี้

 เว้นวรรค

 เว้นวรรค

 เว้นวรรค

 เว้นวรรค

 เว้นวรรค

 เว้นวรรค

 เว้นวรรค

 เว้นวรรค