วิธีแก้ไขสไตล์ด้วยการแก้ไข CSS สำหรับมือใหม่ที่เริ่มทำเว็บไซต์

สวัสดีครับ สำหรับบทความในวันนี้ เราจะมาพูดถึงวิธีแก้ไขสไตล์ด้วยการแก้ไข CSS สำหรับมือใหม่ที่เริ่มทำเว็บไซต์กันนะครับว่ามีวิธีการอย่างไร เพราะมือใหม่ที่เริ่มทำเว้บไซต์นั้นพอเริ่มทำเว็บไซต์มักจะมีจุดที่ต้องการแก้ไขแต่พบว่า ไม่สามารถแก้ไขการตั้งค่าได้ เนื่องจากธีมหรือระบบที่ได้มานั้นไม่มีจุดให้แก้ไขครับ ดังนั้นวันนี้ผมจะมาแนะนำวิธีการแก้ไขสไตล์ CSS ขั้นพื้นฐานว่าจะต้องทำการแก้ไขอย่างไรครับ

เริ่มแรกเลย สมมติว่าเราต้องการทำการแก้ไขในส่วนของสีคำว่า My Blog ตรงโลโก้ด้านขวามือตามภาพ ซึ่งเราไม่รู้ว่าจะต้องทำการแก้ไขโค้ดที่ไหน และเขียนโค้ดอย่างไร

ให้เราทำการคลิ๊กไปที่สามจุดด้านบนตรงมุมขวาของเบราเซอร์ ในที่นี้คือ Chrome ทำการเลือก More Tools และไปยัง Developer Tools ตามลำดับ เมื่อเราเลือกเมนูดังกล่าว จะปรากฏหน้าต่างหนึ่งขึ้นมาเป็นส่วนที่ให้เราทำการตรวจสอบโค้ดของหน้าเว็บไซต์นั้นๆ ครับ

หลังจากนั้นให้คลิ๊กไปที่เครื่องเครื่องหมายลูกศรในกรอบสี่เหลี่ยมของหน้าต่างที่พึ่งปรากฏขึ้นมา (จุดที่ 1) แล้วให้เลื่อนเมาส์ไปยังจุดที่ต้องการตรวจสอบทำการคลิ๊กซ้ายอีกครั้ง ณ จุดนั้น (จุดที่ 2) โค้ดจุดดังกล่าวก็จะแสดงออกมาว่า เขียน HTML และ CSS อย่างไรครับ (จุดที่ 3)

ในที่นี้เราต้องการเปลี่ยนสีของตัวอักษร เราจะเห็นว่า โค้ดที่ปรากฏดังนี้

.site-title a {
   color: inherit;
   display: block;
   text-decoration: none;
}

เราจะเห็นว่า ตอนนี้สี (color) ถูกบังคับให้อ้างอิงค่าก่อนหน้า (inherit) ซึ่งไม่รู้ว่าเป็นสีอะไร แต่เราจะบังคับให้จุดนี้เป็นสีแดง ดังนั้น เราจึงทดลองใส่คำว่า color: red ลงไปใต้ text-decoration ผลปรากฏว่า สีของตัวอักษรได้เปลี่ยนเป็นสีแดงซึ่งตรงกับที่เราต้องการ

ถึงขั้นตอนนี้แล้ว เราจะต้องทำการเปิดไฟล์ CSS ของเราครับ (ส่วนใหญ่ใช้ชื่อ style.css) ให้ทำการค้นหาตำแหน่งที่ชื่อ .site-title a แล้วทำการใส่โค้ด color: red; ด้านล่างเพิ่มเติมลงไปในปีกกาของ .site-title a ให้มีลักษณะดังนี้

.site-title a {
   color: red;
}

หลังจากเราทำการบันทึกค่า ตัวอักษรที่เราต้องการเปลี่ยนสีก็จะเปลี่ยนเป็นสีแดงครับ ก็เป็นการเสร็จสิ้นในส่วนของการแก้ไขสไตล์ด้วยวิธีแก้ไข CSS สำหรับใครยังไม่มีความเข้าใจในเรื่องของ CSS ว่า นอกจากสีแล้ว หากต้องการปรับขนาดตัวอักษร ความหนา สีของเส้น ระยะห่าง และอื่นๆ เราก็จำเป็นที่จะต้องศึกษา CSS เพิ่มเติมนะครับ แต่หากใครที่ชำนาญแล้วก็คงทำตามบทความนี้ไม่ยากเกินไปนะครับ และหากใครสนใจจะศึกษาเพิ่มเติมเกี่ยวกับ Developer Tools ก็สามารถไปดูของ Google ได้ที่ Chrome Dev Tools ครับ สำหรับบทความในวันนี้ก็มีเพียงเท่านี้ สวัสดีครับ..