CSS คืออะไร สอนเขียนภาษา CSS (เรียนแล้วนำไปใช้งานได้จริง)

CSS คือภาษาสำหรับกำหนดรูปลักษณ์ของเว็บเพจ เป็นสิ่งที่กำหนดว่าเว็บเพจควรแสดงผลอย่างไร (เช่น font และขนาดของตัวอักษร, ขนาดความกว้างของหน้าเว็บ, สีพื้นหลัง, ฯลฯ)

ด้วย CSS เราสามารถเปลี่ยนเว็บเพจด้านซ้ายในรูปด้านล่าง ให้มีสไตล์แบบด้านขวาได้

CSS ย่อมาจาก Cascading Style Sheet ตอนนี้หากคุณงงว่ามันแปลว่าอะไร ไม่ต้องห่วงครับ อ่านบทความนี้แล้วคุณจะเข้าใจความหมายของชื่อนี้

บทความนี้สำหรับผู้ที่มีเว็บไซต์ WordPress เป็นหลัก เนื่องจากปัจจุบันเว็บไซต์ส่วนใหญ่เป็น WordPress (ผมจะสอนให้คุณใช้ CSS แก้ไขสไตล์ของเว็บ WordPress ของคุณ)

ก่อนอ่านบทความนี้ คุณควรมีความรู้ HTML บ้างเล็กน้อย หากยังไม่มี สามารถอ่านบทความสอน HTML ของผมก่อนได้ครับ

ทำไมต้องใช้ CSS (ในเมื่อเรากำหนดสไตล์ใน HTML ก็ได้)

หากคุณพอเขียน HTML ได้บ้าง คุณคงรู้ว่าเราสามารถกำหนดสไตล์ในโค้ด HTML แบบนี้ได้

<p style="background-color: #ffffb6; padding: 12px;">ย่อหน้านี้มีพื้นหลังสีเหลือง ใช้เพื่อแสดงเกร็ดความรู้เพิ่มเติม</p>

ถ้าคุณอ่านโค้ดด้านบนไม่เข้าใจ ไม่เป็นไรครับ ให้รู้ว่าบางส่วนของโค้ดเป็นตัวกำหนดสไตล์ก็พอ โดยโค้ดดังกล่าวจะให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้มีพื้นหลังสีเหลือง ใช้เพื่อแสดงเกร็ดความรู้เพิ่มเติม

จะเห็นว่าแค่ใช้ HTML ก็กำหนดสไตล์ให้เว็บเพจได้ หากเราต้องการใช้ “ย่อหน้าพื้นหลังสีเหลือง” กับ เว็บเพจหน้าไหน เราก็แค่เอาโค้ดด้านบนไปใส่หน้านั้นๆ

ทีนี้สมมุติวันหนึ่งเราอยากเปลี่ยนสีพื้นหลัง จากสีเหลืองเป็นสีเขียว เราต้องเข้าไปแก้ไขเว็บเพจต่างๆ ที่มีโค้ด HTML ดังกล่าวทั้งหมด

ปัญหาคือ หากเว็บไซต์เรามีจุดที่ใช้โค้ดดังกล่าว 100 จุด เราก็ต้องทำการแก้โค้ด 100 ครั้ง!!! (เป็นงานที่ถึกและใช้ความอดทนสูงมาก)

นี่เป็นปัญหาที่คนสมัยก่อนต้องเจอครับ จะแก้สไตล์แต่ละทีลำบากมาก (โดยเฉพาะถ้าเว็บมีเว็บเพจหลายหน้า)

โชคดีที่ปัจจุบันเรามี CSS มาช่วยให้การแก้สไตล์สะดวกขึ้นมาก

CSS ทำให้การแก้สไตล์ง่ายขึ้นอย่างไร

มาลองกำหนดสไตล์กันอีกครั้งครับ แต่คราวนี้แทนที่จะกำหนดสไตล์ในโค้ด HTML เราจะใช้ CSS แทน

โดยในไฟล์ CSS ของเว็บเรา (ยังไม่ต้องสนใจว่ามันอยู่ที่ไหน) เราจะเพิ่มโค้ด CSS สำหรับสไตล์ชื่อ sidenote ลงไปแบบด้านล่าง

.sidenote {
    background-color: #ffffb6;
    padding: 12px;
}

ชื่อ sidenote เป็นชื่อที่เราตั้งขึ้นมาเองให้สื่อความหมาย (side note แปลหยาบๆ ได้ว่า เกร็ดความรู้) แต่จริงๆ จะตั้งชื่อสไตล์ว่าอะไรก็ได้ครับ

พอกำหนดสไตล์ขึ้นมาแล้ว หากเราต้องการให้ย่อหน้าไหนมีพื้นหลังสีเหลือง เราก็แค่ใส่โค้ดด้านล่าง

<p class="sidenote">ย่อหน้านี้มีพื้นหลังสีเหลือง ใช้เพื่อแสดงเกร็ดความรู้เพิ่มเติม</p>

โค้ดด้านบนเป็นการระบุว่าให้แท็ก <p> (ย่อหน้า) ใช้สไตล์ CSS ชื่อ sidenote

ผลลัพธ์ที่ได้คือ ย่อหน้าดังกล่าวจะมีพื้นหลังสีเหลือง (ให้ผลเหมือนกับวิธีระบุสไตล์ใน HTML)

ย่อหน้านี้มีพื้นหลังสีเหลือง ใช้เพื่อแสดงเกร็ดความรู้เพิ่มเติม

แต่ประโยชน์ของใช้ CSS กำหนดสไตล์คือ หากวันหนึ่งเราอยากเปลี่ยนพื้นหลังเป็นสีเขียว (รหัสสี #a3e4d7) เราก็แค่แก้ค่าสไตล์ของ sidenote ในไฟล์ CSS แค่จุดเดียวเท่านั้น

.sidenote {
    background-color: #a3e4d7;
    padding: 12px;
}

เพียงเท่านี้สีพื้นหลังก็จะเป็นแบบด้านล่าง

ย่อหน้านี้มีพื้นหลังสีเขียว ใช้เพื่อแสดงเกร็ดความรู้เพิ่มเติม

ข้อดีของวิธีนี้คือ ไม่ว่าเว็บคุณจะมีย่อหน้าที่ใช้โค้ด <p class=sidenote>…</p> กี่ร้อยกี่พันจุด พื้นหลังของย่อหน้าพวกนี้จะเปลี่ยนเป็นสีเขียวทั้งหมด จากการแก้โค้ด CSS แค่ครั้งเดียวเท่านั้น (สะดวกไหมล่ะครับ)

นี่เป็นที่มาของชื่อ Cascading Style Sheet ครับ ความหมายก็คือ คุณแก้ค่าจุดเดียว (ในไฟล์ CSS) แล้วค่าที่แก้จะ “กระจาย (cascade)” ไปทั้งเว็บไซต์

ถ้าใช้โปรแกรมสร้างเว็บอย่าง WordPress ต้องรู้ CSS ด้วยไหม

หากคุณมีเว็บไซต์ WordPress คุณจะรู้ว่า WordPress นั้นมีธีมฟรีดีไซน์สวยๆ ให้เราเลือกมากมาย

นอกจากนี้ธีมส่วนมากในปัจจุบัน ยังมีตัว Customizer (เข้าผ่านเมนู Appearance >> Customize) ทำให้เราสามารถปรับแต่งสไตล์บางอย่างตามใจเราได้ เช่น เปลี่ยนสีตัวอักษร เปลี่ยนขนาดตัวอักษร

เท่านั้นยังไม่พอ WordPress ยังมีปลั๊กอินพวก page builder ซึ่งเป็นปลั๊กอินสร้างและออกแบบเว็บเพจแบบ drag & drop ทำให้เราสามารถสร้างเว็บเพจสวยๆ ได้โดยไม่ต้องเขียนโค้ด

ตัวอย่างเว็บเพจที่ออกแบบด้วย page builder

คุณเลยอาจสงสัยว่า ในเมื่อเรามีเครื่องมือหลายอย่างแบบนี้ เรายังจำเป็นต้องเรียน CSS อยู่รึเปล่า

คำตอบคือ อาจจะไม่จำเป็นครับ แต่ผมแนะนำให้เรียน เพราะว่า

Customizer ของธีมนั้นใช้ปรับแต่งสไตล์ได้ก็จริง แต่ก็มีขีดกำจัดอยู่ ธีมส่วนมากจะมีเมนูสำหรับปรับค่าบางอย่างเท่านั้น (แม้แต่ธีมเสียเงินที่ผมใช้อยู่ก็เหมือนกัน) แต่ถ้าเราใช้ CSS นี่เราแก้สไตล์ได้ทุกอย่างจริงๆ (ถ้าทำเป็น)
Page builder นั้นเป็นเครื่องมือออกแบบเว็บเพจที่ทรงพลังก็จริง แต่ปกติเราก็ไม่ได้ใช้ page builder ออกแบบเว็บเพจทุกหน้า ถ้าเว็บเพจไหนไม่ได้ใช้ page builder เราก็ต้องพึ่ง CSS อยู่ดี

สรุปคือ CSS มันทำให้คุณมีอิสระในการปรับแต่งสไตล์ของเว็บของคุณมากขึ้นครับ

เอาล่ะ ผมพูดหว่านล้อมถึงประโยชน์ของ CSS มามากพอแล้ว เรามาเริ่มเรียน CSS กันเลยครับ

เพิ่มโค้ด CSS ใน WordPress ยังไง

ให้เข้าไปที่ WordPress Dashboard แล้วเลือกเมนู Appearance >> Customize จากนั้นให้มองหาเมนูชื่อ Additional CSS แล้วกดเข้าไป

คุณจะเห็น editor สำหรับใส่โค้ด CSS ด้านซ้ายมือ ซึ่งเว็บของคุณอาจจะยังไม่มีโค้ดอะไร (รูปด้านล่างมาจากเว็บของผม ซึ่งมีโค้ด CSS อยู่บ้างแล้ว)

ทดลองเขียนโค้ด CSS

มาลงมือทำไปด้วยกันเลยครับ ให้ copy โค้ด CSS ด้านล่างใส่ลงไปใน CSS editor ของเว็บคุณ แล้วกด Publish

.sidenote {
    background-color: #ffffb6;
    border: 3px solid #e5e597;
    padding: 12px;
}

จากนั้นให้สร้าง post อันใหม่ขึ้นมา (Posts >> Add New) เพื่อเอาไว้สำหรับทดลอง CSS (ตั้งค่า Visibility เป็น Private คนอื่นจะได้ไม่เห็น)

ใน post ที่สร้าง ให้เพิ่มย่อหน้าใหม่ (paragraph) แล้วคลิกคำว่า Advanced ตามรูปด้านล่าง แล้วพิมพ์คำว่า sidenote ลงในช่อง Additional CSS Class

สิ่งที่เราทำคือบอกให้ WordPress รู้ว่า เราต้องการให้ย่อหน้าดังกล่าวใช้สไตล์ CSS ชื่อ sidenote

พอคุณกดปุ่ม Preview คุณจะเห็นเว็บเพจหน้าตาประมาณนี้ครับ

จะเห็นได้ว่าย่อหน้าดังกล่าวมีสไตล์ตามที่เรากำหนดไว้ในไฟล์ CSS

มาลองใส่อีกสไตล์นึงดูครับ คราวนี้เราจะทำให้รูปภาพมีกรอบสีเทาขนาด 4 พิกเซล โดยการใส่โค้ดด้านล่างเพิ่มลงในไฟล์ CSS (อย่าลืมกด Publish เหมือนเดิม)

.border-image img {
    border: 4px solid #cccccc;
}

จากนั้นให้ใส่รูปภาพอะไรก็ได้ลงใน post แล้วเซ็ตค่า CSS class ของรูปดังกล่าวเป็น border-image

พอคุณกดปุ่ม Preview คุณจะเห็นว่ารูปที่คุณใส่มีกรอบสีเทาสวยงาม

การใช้ CSS Live Preview ใน WordPress

จุดนี้ขอแชร์ทริกที่เป็นประโยชน์หน่อย คือคุณสามารถแก้ไข CSS ของเว็บคุณแล้วดู preview ผลลัพธ์แบบ real-time ได้

วิธีการคือ ให้เปิดเว็บเพจที่ต้องการแก้สไตล์ แล้วกดเมนูด้านบนชื่อ “ปรับแต่ง” (Customize) จากนั้นเลือกเมนู Additional CSS

คราวนี้หากคุณแก้โค้ด CSS สิ่งที่คุณแก้จะแสดงที่หน้า preview ด้านขวาทันที (ถ้าอยากฝึก CSS นี่เป็น feature ที่เป็นประโยชน์มาก)

ในรูปด้านบนผมแก้ค่า padding ของคลาส sidenote จาก 10px เป็น 30px และแก้กรอบของคลาส border-image จาก solid (เส้นทึบ) เป็น dotted (เส้นประ) ลองแก้ตามดูครับ

รู้จัก CSS Selector

คราวนี้มาเริ่มเรียน CSS ตั้งแต่พื้นฐานกันเลยครับ เริ่มตั้งแต่การเขียนโค้ดเพื่อ “เลือก” ว่าจะกำหนดสไตล์ให้กับส่วนประกอบไหนของเว็บเพจ

ก่อนอื่นเลย โครงสร้างพื้นฐานของโค้ด CSS มีหน้าตาแบบนี้ครับ

selector { 
    property: value; 
}

สิ่งที่อยากให้คุณสนใจตอนนี้ก็คือส่วน selector ครับ

Selector คือตัวที่บอกว่าจะกำหนดสไตล์ให้กับ HTML element อะไร

มาดูตัวอย่างกันดีกว่าครับ ในโค้ด CSS ด้านล่าง selector คือ .sidenote (ให้สังเกตว่ามีจุดนำหน้าชื่อ)

.sidenote {
    background-color: #ffffb6;
    border: 3px solid #e5e597;
    padding: 12px;
}

ในโค้ดด้านบน เราเลือกกำหนดสไตล์ให้ HTML element ที่มีคลาสชื่อว่า sidenote

หมายความว่าถ้าโค้ด HTML เป็นแบบนี้

<p class="sidenote">ย่อหน้าแรก</p>
<p class="highlight">ย่อหน้าที่สอง</p>
<p class="sidenote">ย่อหน้าที่สาม</p>
<p>ย่อหน้าที่สี่</p>

สไตล์ดังกล่าวจะถูกเซ็ตให้กับย่อหน้าแรกและย่อหน้าที่สาม เนื่องจากมีคลาส sidenote (ส่วนย่อหน้าที่สองและสี่จะไม่ใช้สไตล์ที่เรากำหนด เนื่องจากไม่มีคลาสชื่อ sidenote)

HTML element หนึ่งๆ จะมีคลาสกี่อันก็ได้ แบบนี้ครับ

<p class="intro paragraph big-text">ย่อหน้าแรก</p>
<p class="sidenote paragraph">ย่อหน้าที่สอง</p>

ในโค้ดด้านบน ย่อหน้าแรกมีคลาสสามตัว (intro, paragraph, และ big-text) ย่อหน้าที่สองมีคลาสสองตัว (sidenote และ paragraph)

ปกติเราจะไม่ใช้คลาสมากกว่าหนึ่งอันแบบนี้เท่าไหร่ แต่ผมบอกให้รู้ไว้ เผื่อเวลาอ่านโค้ดคนอื่นแล้วเห็นคลาสหลายอันแบบนี้ จะได้ไม่งงครับ

การใช้ CSS Selector เลือกแท็ก HTML ที่ต้องการ

แท็ก HTML ก็คือพวก <h1>, <div>, <p>, <img> พวกนี้ครับ ซึ่งเราสามารถใช้ CSS selector กับแท็กเหล่านี้ได้

อย่างโค้ด CSS ด้านล่าง ผมกำหนดให้แท็ก <h1> มีตัวอักษรสีม่วง

h1 {
    color: purple;
}

ให้สังเกตว่าคราวนี้ไม่มีจุดนำหน้าชื่อ ตรงนี้มีความสำคัญครับ

ถ้า selector มีจุดนำหน้า (.h1) แปลว่าเราต้องการเลือก HTML element ที่มีคลาสชื่อ h1
ถ้าไม่มีจุดนำหน้า (h1) แปลว่าเราต้องการเลือกแท็ก h1

หมายความว่าถ้าโค้ด HTML เป็นแบบนี้

<h1>หัวข้อหลัก</h1>
<p class="h1">ย่อหน้าแรก</p>
<h2>หัวข้อย่อย</h2>

จะมีเพียงหัวข้อหลักตัวเดียวเท่านั้นที่จะมีตัวอักษรสีม่วง ส่วนย่อหน้า <p class=”h1″> นั้นไม่เกี่ยวเพราะในโค้ด CSS ตัว selector ของเราคือ h1 (ไม่มีจุด) ไม่ใช่ .h1 หมายความว่าเราเลือกแท็ก h1 ไม่ได้เลือก HTML element ที่มีคลาสชื่อ h1 (หวังว่าจะไม่งงนะครับ)

Class Selector VS Type Selector

มาสรุปสิ่งที่เรียนมากันหน่อยครับ จะได้ไม่งง (หรืองงน้อยลง)

จนถึงตอนนี้ ผมได้สอนให้คุณใช้ CSS กำหนดสไตล์สองวิธี

1) วิธีแรกคือการสร้าง CSS class (มีจุดนำหน้า) เราเรียกแบบนี้ว่า class selector

.purple-text {
     color: purple;
}

โดยวิธีนี้เราต้องใส่ class=”purple-text” ให้กับแท็ก HTML ที่เราต้องการเปลี่ยนสไตล์แบบนี้

<h1 class="purple-text">หัวข้อหลัก</h1>

2) อีกวิธีนึงคือการใช้ selector เลือกแท็ก HTML ที่ต้องการแก้สไตล์ (เราเรียกวิธีนี้ว่า type selector)

h1 {
    color: purple;
}

ถ้าใช้วิธีนี้ สไตล์ที่กำหนดจะมีผลกับแท็ก h1 ทั้งหมดของเว็บเรา (และไม่จำเป็นต้องใส่ class=”class-name” ในแท็ก)

ผมขอสรุปการใช้งาน ดังนี้

ใช้ class selector ถ้าต้องการกำหนดสไตล์ให้ html elements “แค่บางตัว” เช่น
- อยากให้ย่อหน้าบางย่อหน้ามีพื้นหลังสีเหลือง
- อยากให้รูปบางรูปมีกรอบสีเทา
ใช้ type selector ถ้าต้องการกำหนดสไตล์ให้ html elements “ทุกตัว” เช่น
- อยากให้หัวข้อหลัก (h1) ของทุกๆ บทความมีตัวอักษรสีม่วง
- อยากให้ลิงก์ทุกลิงก์บนเว็บเป็นตัวหนา

ขอแตกต่างอีกอย่างนึงระหว่าง selector ทั้งสองแบบคือ class selector ใช้งานง่ายกว่ามาก เหมาะสำหรับมือใหม่ ในทางตรงกันข้าม หากคุณลองใช้ type selector เพื่อแก้สไตล์เว็บคุณ (เช่น กำหนดให้ h1 มีตัวอักษรสีม่วง) คุณอาจพบว่าสไตล์ไม่เปลี่ยน (ตรงนี้มีเหตุผลอยู่ซึ่งผมจะบอกภายหลัง)

การเขียน Selector แบบขั้นสูง

ตัวอย่างที่ผ่านๆ มา เป็นการใช้ selector แบบง่ายๆ แต่ความจริง selector อาจมีโครงสร้างซับซ้อน

ตัวอย่างเช่น ถ้ามีเครื่องหมาย comma (,) มาคั่นแบบนี้

h1, h2, p {
    color: purple;
}

แปลว่าเราต้องการให้แท็ก h1, h2, และ p มีตัวอักษรสีม่วง ประโยชน์ของการใช้ comma แบบนี้คือ เราไม่ต้องเขียนสไตล์เดิมซ้ำๆ กันแบบนี้

h1 {
    color: purple;
}
h2 {
    color: purple;
}
p {
    color: purple;
}

Selector สามารถเขียนแบบนี้ได้ด้วย

div img {
    border: #cccccc solid 4px;
}

ในโค้ดด้านบน เราต้องการกำหนดสไตล์ให้แท็ก img ที่อยู่ภายใต้แท็ก div

หมายความว่าถ้าโค้ด HTML เป็นแบบนี้

<img src="image_1.jpg" />
<div><img src="image_2.jpg" /></div>
<img src="image_3.jpg" />

สไตล์ที่กำหนดจะถูกเซ็ตให้กับ image_2.jpg เท่านั้น เนื่องจากเป็นแท็ก img เดียวที่อยู่ภายใต้แท็ก div

เราสามารถผสม class selector กับ type selector ได้ด้วย แบบนี้

.border-image img {
    border: #cccccc solid 4px;
}

โค้ดด้านบนเป็นการกำหนดสไตล์ให้แท็ก img ที่อยู่ภายใต้ HTML element ที่มีคลาสชื่อ border-image

หมายความว่าถ้าโค้ด HTML เป็นแบบนี้

<div class="border-image">
  <img src="image_1.jpg">
</div>
<div>
  <img src="image_2.jpg">
</div>
<img src="image_3.jpg">

สไตล์ที่กำหนดจะถูกเซ็ตให้กับ image_1.jpg เท่านั้น เนื่องจากเป็นแท็ก img เดียวที่อยู่ภายใต้ HTML element ที่มี class ชื่อ border-image

Selector อีกแบบที่เราใช้บ่อยๆ ก็คือแบบนี้

div.embed-container {
    margin-bottom: 24px;
}

ในโค้ดด้านบน เราต้องการกำหนดสไตล์ให้แท็ก div ที่มีคลาสชื่อ embed-container

หมายความว่าถ้าโค้ด HTML เป็นแบบนี้

<div>
    <p class="embed-container">...</p>
</div>
<div class="border-image">
    ....
</div>
<div class="embed-container">
    ....
</div>

สไตล์ที่กำหนดจะถูกเซ็ตให้กับแท็ก div ตัวสุดท้ายเท่านั้น (ส่วนแท็ก p ที่มีคลาส embed-container ไม่เกี่ยว เพราะไม่ใช่แท็ก div)

นี่เป็นเพียงตัวอย่างการเขียน CSS selector ส่วนหนึ่งเท่านั้น ความจริงเราสามารถเขียน selector ได้อีกหลายรูปแบบ ซึ่งจริงๆ ผมเองก็จำ syntax พวกนี้ไม่ได้หรอกครับ (และไม่คิดจะจำด้วย) ปกติเวลาผมจะแก้ CSS ผมจะเปิดดู CSS reference ในเน็ตประกอบไปด้วยเสมอ (แล้วลองแก้โดยใช้ WordPress live preview)

ควรเขียน Type Selector ให้เฉพาะเจาะจง

จำที่ผมบอกไปได้ไหมครับ ว่าเราเขียน selector ได้สองแบบ คือ

Class selector คือสร้างคลาสขึ้นมาใหม่ เช่นคลาส (.sidenote)
Type selector คือการกำหนดสไตล์ให้แท็กที่ต้องการ เช่นแท็ก h2

อย่างที่ผมบอกไปแต่ต้น ว่าการใช้ class selector นั้นง่าย มือใหม่ก็ใช้ได้ เพราะฉะนั้นผมไม่มีคำแนะนำเพิ่มเติม

แต่เมื่อไหร่ที่คุณเขียน type selector คุณอาจต้อง test การแสดงผลของเว็บเพจบนเว็บคุณให้ดี ว่าการแก้ของคุณไม่มีผลข้างเคียงตามมา

ผมขอยกตัวอย่างจริงละกัน วันก่อนผมเขียน type selector ตามโค้ดด้านล่าง

h2 {
    margin-top: 40px;
}

โค้ดดังกล่าวกำหนดให้ช่องว่างด้านบน (margin-top) ของแท็ก h2 มีขนาด 40 พิกเซล (ผมชอบเว้นช่องว่างในบทความเยอะๆ รู้สึกมันอ่านง่ายดี)

ผลลัพธ์ที่ได้คือ ช่องว่างด้านบนของแท็ก h2 มีขนาดใหญ่ขึ้น บทความดูอ่านง่ายขึ้น (ดูเหมือนทุกอย่างเรียบร้อยดี)

แต่พอตรวจสอบดีๆ พบว่าผลข้างเคียงที่ตามมาคือ ช่องว่างตรง sidebar ก็มีขนาดใหญ่ขึ้นเช่นกัน (จนดูน่าเกลียด)

ที่เป็นแบบนี้ก็เพราะธีมของผมดันใช้แท็ก h2 ตรง sidebar ด้วยเช่นกัน

ถ้าเจอปัญหาแบบนี้ วิธีแก้คือเราต้องเขียน CSS selector ให้เฉพาะเจาะจงขึ้นครับ อย่างในกรณีนี้ เราต้องระบุให้ชัดเจน ว่าต้องการกำหนดสไตล์ให้กับแท็ก h2 ที่อยู่ในบทความของเราเท่านั้น (แท็ก h2 ใน sidebar ไม่เกี่ยว)

หมายความว่า คุณต้องเข้าไปดูโค้ด HTML ของเว็บเพจคุณก่อน ว่าแท็กที่คุณต้องการเปลี่ยนสไตล์มันอยู่ตรงไหนของเว็บเพจ

คุณสามารถดูโค้ด HTML ของเว็บเพจ โดยการเปิดเว็บเพจดังกล่าวใน Google Chrome แล้วกดปุ่ม F12 จะมีโค้ด HTML ของเว็บเพจแสดงขึ้นมาครับ

อย่างของธีมผม หลังจากรีวิวโครงสร้าง HTML ของเว็บเพจ ผมพบว่า HTML elements ในบทความทั้งหมด (รวมถึงแท็ก h2) อยู่ภายใต้แท็ก div ซึ่งมีคลาสชื่อ entry-content (ตามรูปด้านล่าง)

นอกจากนี้ ผมยังตรวจสอบให้แน่ใจด้วยว่าแท็ก h2 ของ sidebar ไม่ได้อยู่ในแท็ก div ดังกล่าว

เมื่อเห็นดังนั้น ผมเลยแก้โค้ด CSS ให้เป็นแบบนี้

div.entry-content h2 {
    margin-top: 40px;
}

โค้ดด้านบน หมายความว่าให้กำหนดสไตล์ให้กับแท็ก h2 ที่อยู่ภายใต้แท็ก div ที่มีคลาสชื่อ entry-content เท่านั้น

ผลลัพธ์ที่ได้คือ สไตล์จะมีผลกับแท็ก h2 ในบทความ แต่จะไม่มีผลกับแท็ก h2 ใน sidebar ครับ

สรุปว่าการเขียน type selector มีกระบวนการดังนี้

เขียน type selector ไปตามปกติก่อน
ตรวจสอบการแสดงผลของเว็บเพจ (ทดสอบหลายๆ หน้า) ว่าเป็นไปตามต้องการหรือไม่
ถ้าเกิดผลข้างเคียง ให้ทำดังนี้
1. กดปุ่ม F12 ใน Google Chrome เพื่อดูโครงสร้าง HTML ของเว็บเพจ (โครงสร้างจะแตกต่างกันไปขึ้นอยู่กับธีมที่ใช้)
2. แก้ไข CSS selector ให้มีความเฉพาะเจาะจงมากขึ้น (อย่าลืมเปิดดู CSS reference ประกอบไปด้วย)

ปัญหาอีกอย่างที่พบได้บ่อยเวลาเขียน type selector ก็คือใส่โค้ดไปแล้ว แต่ไม่มีอะไรเกิดขึ้น มาดูกันครับว่าเป็นเพราะอะไร และจะแก้ยังไง

วิธีแก้ปัญหาสไตล์ไม่เปลี่ยน

อีกปัญหาหนึ่งที่มือใหม่มักจะเจอเวลาเขียน CSS ก็คือใส่โค้ดไปแต่สไตล์ไม่ยอมเปลี่ยน

ยกตัวอย่างเช่น ผมลองใช้สลับไปใช้ธีมชื่อ Ascention แล้วใส่โค้ด CSS ด้านล่าง

h1 {
   color: purple;
}

ปรากฎว่าโค้ดดังกล่าว ไม่มีผลอะไรกับเว็บเพจเลย แท็ก h1 ก็ยังมีสีดำ แทนที่จะเป็นสีม่วง

ที่เป็นแบบนี้เพราะธีมที่ใช้อยู่ มีไฟล์ CSS ของมันเอง และในไฟล์ CSS ดังกล่าว มีการกำหนดสไตล์สำหรับแท็ก h1 ไว้เรียบร้อยแล้ว (สไตล์ชนกัน)

ปัญหาสไตล์ชนกันของ CSS

ปกติแล้วเว็บไซต์จะมีไฟล์ CSS หลายไฟล์ บางไฟล์ก็แถมมากับธีม บางไฟล์ก็มาจากที่คุณกำหนดไว้เอง (additional CSS)

นั่นแปลว่ามีโอกาสที่สไตล์สำหรับ element เดียวกัน จะถูกกำหนดไว้หลายที่

ถ้าหากไฟล์ CSS ชื่อ first.css มีสไตล์สำหรับแท็ก h2 แบบด้านล่าง

h2 {
    margin-top: 30px;
}

และยังมีไฟล์ CSS อีกไฟล์ชื่อ second.css ซึ่งมีสไตล์สำหรับแท็ก h2 เช่นกัน

div.entry-content h2 {
    margin-top: 40px;
}

กรณีที่มีสไตล์ซ้ำกันแบบนี้ web browser จะเลือกสไตล์ของ selector ที่มีความเฉพาะเจาะจงมากกว่าครับ (กรณีนี้คือ div.entry-content h2)

เพราะฉะนั้น ถ้าโค้ด HTML เป็นแบบนี้

<div class="entry-content">
    ...
    <h2>หัวข้อย่อย</h2>
    ...
</div>

ค่า margin-top ของแท็ก h2 จะเป็น 40px (ไม่ใช่ 30px) เนื่องจากตัว selector ตัวนั้นมีความเฉพาะเจาะจงมากกว่า

เพราะฉะนั้น หากเจอปัญหาสไตล์ชนกัน ให้พยายามแก้ selector ให้มีความเฉพาะเจาะจงมากขึ้น (ให้มากกว่า selector ของธีม) เพื่อที่ว่า web browser จะได้เลือกใช้สไตล์ของเรา

รู้จักกับคำสั่ง !important

หากคุณสงสัยว่ากำลังเจอปัญหาสไตล์ชนกันหรือไม่ วิธีทดสอบง่ายๆ คือให้เพิ่มคำสั่ง !important ลงในโค้ด CSS แบบในรูปด้านล่างดูครับ

จากรูปจะเห็นได้ว่าพอใส่ !important ไปแล้วตัวอักษรเปลี่ยนเป็นสีม่วงทันที แปลว่ามีปัญหาสไตล์ชนกันจริงๆ

ปกติมือใหม่มักจะชอบแก้ปัญหาโดยใช้คำสั่ง !important เพราะมันง่ายดี ถ้าใส่คำสั่ง !important แล้วสไตล์เปลี่ยน ก็ปล่อยให้คำสั่งมันอยู่ในโค้ดแบบนั้น

แต่ส่วนตัวผมจะใช้วิธีแก้ selector ให้เฉพาะเจาะจงขึ้น (แล้วเอาคำสั่ง !important ออก) เนื่องจากการใช้ !important พร่ำเพรื่อไม่ค่อยดีเท่าไหร่นัก (เหตุผลขอละไว้ เพราะเดี๋ยวจะยาว)

วิธีแก้ selector ก็อย่างที่สอนไปแล้ว คือให้ใช้เปิดเว็บเพจด้วย Google Chrome แล้วกด F12 เพื่อดูโครงสร้าง HTML ของเว็บเพจ

อย่างในรูป จะเห็นได้ว่าแท็ก h1 ของธีมนี้มีคลาสชื่อ entry-title อยู่

ผมก็แค่เข้าไปแก้ selector จาก h1 เป็น h1.entry-title เท่านี้ก็เป็นอันเรียบร้อย

เพราะฉะนั้น หากคุณเจอปัญหาสไตล์ซ้ำกัน ให้พยายามแก้ selector ให้มีความเฉพาะเจาะจงมากขึ้นก่อน หากไม่ได้ผลจริงๆ ค่อยใช้ !important นะครับ

รู้จัก CSS Property

อย่างที่บอกไปตอนต้น โครงสร้างของโค้ด CSS มีหน้าตาแบบนี้

selector { 
    property1: value1;
    property2: value2;
    ...
}

หลังจากที่เขียน selector เพื่อเลือก element ที่ต้องการแก้สไตล์เรียบร้อยแล้ว เราก็ต้องมาเขียน property เพื่อระบุว่าอยากจะแก้ค่าอะไร (ความกว้าง, ความสูง, สีตัวอักษร, สีพื้นหลัง, ฯลฯ)

ซึ่ง property นี่มีเป็นร้อยๆ ค่าเลยครับ แต่ property ที่ผมใช้บ่อยๆ มีอยู่ประมาณ 8 ตัว เลยจะขอสอนแค่นี้เท่านั้น

margin

Margin ใช้เวลาต้องการสร้างช่องว่างระหว่าง HTML element

.custom-style {
    margin: 75px;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้มี margin = 75 พิกเซล

padding

Padding ใช้เวลาต้องการสร้างช่องว่างข้างใน HTML element

.custom-style {
    padding: 50px;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้มี padding = 50 พิกเซล

background-color

เราใช้ background-color เวลาต้องการเซ็ตค่าสีพื้นหลัง

.custom-style {
    background-color: AliceBlue;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้มีสีพื้นหลัง = AliceBlue

คุณสามารถเข้าไปดูค่าสีต่างๆ ได้ที่เว็บ w3schools

color

เราใช้ color เวลาต้องการเซ็ตสีตัวอักษร

.custom-style {
    color: DarkBlue;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้มีสีตัวอักษร = DarkBlue

font-size

เราใช้ font-size เพื่อกำหนดขนาดตัวอักษร

.custom-style {
    font-size: 30px;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้มีตัวอักษรขนาด 30 พิกเซล

font-weight

เราใช้ font-weight เพื่อกำหนดความหนาของตัวอักษร ค่าที่ใช้ได้มีตั้งแต่ 100, 200, …, 900 โดยค่าความหนา 400 จะเป็นความหนาของตัวอักษรปกติ

.custom-style {
    font-weight: 600;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้เป็นตัวหนา = 600

border

เราใช้ border เพื่อสร้างกรอบให้กับ HTML element โดยสามารถกำหนด ขนาด, สี, และเลือกได้ว่าจะให้เป็นเส้นทึบ (solid) หรือเส้นประ (dotted)

.custom-style {
    border: 5px solid red;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้มีกรอบเป็นเส้นทึบสีแดงขนาด 5 พิกเซล

text-align

เราใช้ text-align เพื่อจัดตำแหน่งของตัวอักษร (left, right, center)

.custom-style {
    text-align: center;
}

สไตล์ด้านบนให้ผลลัพธ์ด้านล่าง

ย่อหน้านี้อยู่ตรงกลาง

จบแล้วครับสำหรับบทความสอน CSS หวังว่าจะเป็นประโยชน์นะครับ หากติดปัญหาอะไร อย่าเครียดครับ CSS เป็นเรื่องยากสำหรับคนที่ไม่มีพื้นฐานด้าน programming หรือ web design แต่อย่างน้อยตอนนี้คุณก็รู้แล้วว่า CSS มันทำอะไรได้บ้าง และต้องเข้าไปแก้ตรงไหน

ทำไมต้องใช้ CSS (ในเมื่อเรากำหนดสไตล์ใน HTML ก็ได้)

CSS ทำให้การแก้สไตล์ง่ายขึ้นอย่างไร

ถ้าใช้โปรแกรมสร้างเว็บอย่าง WordPress ต้องรู้ CSS ด้วยไหม

เพิ่มโค้ด CSS ใน WordPress ยังไง

ทดลองเขียนโค้ด CSS

การใช้ CSS Live Preview ใน WordPress

รู้จัก CSS Selector

การใช้ CSS Selector เลือกแท็ก HTML ที่ต้องการ

Class Selector VS Type Selector

การเขียน Selector แบบขั้นสูง

ควรเขียน Type Selector ให้เฉพาะเจาะจง

วิธีแก้ปัญหาสไตล์ไม่เปลี่ยน

ปัญหาสไตล์ชนกันของ CSS

รู้จักกับคำสั่ง !important

รู้จัก CSS Property

margin

padding

background-color

color

font-size

font-weight

border

text-align

1 thought on “CSS คืออะไร สอนเขียนภาษา CSS (เรียนแล้วนำไปใช้งานได้จริง)”