Primer lesson: สไตล์ชีตแบบเรียงซ้อน

Cascading Style Sheets (CSS) ในการพัฒนาเว็บ

Cascading Style Sheets หรือ CSS เป็นภาษาที่บอกหน้าเว็บว่าควรมีลักษณะอย่างไร CSS เพิ่มสี สไตล์ และเค้าโครงให้กับโครงสร้างธรรมดาของเว็บไซต์ เช่นเดียวกับการเลือกเสื้อผ้าเพื่อให้ดูดีและเรียบร้อย CSS ยังช่วยให้หน้าเว็บดูสวยงามและน่าดึงดูดอีกด้วย ในการพัฒนาเว็บ เราใช้ CSS เพื่อเปลี่ยนสี ขนาด และตำแหน่งของข้อความและกล่องบนหน้า บทเรียนนี้จะแนะนำคุณเกี่ยวกับพื้นฐานของ CSS ในภาษาที่เรียบง่าย เราจะเรียนรู้ว่า CSS คืออะไร เหตุใดจึงมีความสำคัญ และทำงานร่วมกับ HTML ได้อย่างไร

บทนำสู่ CSS

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

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

เหตุใดเราจึงใช้ CSS

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

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

CSS ทำงานอย่างไร

CSS ทำงานควบคู่กับ HTML โดย HTML เป็นรากฐานที่กำหนดว่าสิ่งต่างๆ จะอยู่ตรงไหนในหน้าเว็บ จากนั้น CSS จะเข้ามาเพิ่มสี แบบอักษร และรูปแบบ เมื่อเบราว์เซอร์โหลดหน้าเว็บ เบราว์เซอร์จะสร้างโครงสร้างด้วย HTML ก่อน จากนั้นจึงนำรูปแบบที่กำหนดไว้ใน CSS มาใช้

CSS เขียนเป็นชุดกฎเกณฑ์ โดยแต่ละกฎเกณฑ์จะมี 2 ส่วน คือ ส่วนเลือกและส่วนประกาศ ส่วนเลือกจะแจ้งให้เบราว์เซอร์ทราบว่าต้องกำหนดรูปแบบองค์ประกอบ HTML ใด ส่วนประกาศจะมีคำประกาศอย่างน้อย 1 คำประกาศ โดยแต่ละคำประกาศจะมีคุณสมบัติและค่า คุณสมบัติคือสิ่งที่คุณต้องการเปลี่ยนแปลง และค่าจะแจ้งวิธีการเปลี่ยนแปลง

ตัวอย่างเช่น หากต้องการกำหนดสีพื้นหลังของหน้าเป็นสีฟ้าอ่อน คุณสามารถเขียนกฎเกณฑ์ที่มีลักษณะดังนี้:

 <code>ร่างกาย {
    สีพื้นหลัง: สีฟ้าอ่อน;
</รหัส>

กฎง่ายๆ นี้จะเปลี่ยนพื้นหลังของหน้าทั้งหมด

ไวยากรณ์พื้นฐานของ CSS

กฎ CSS พื้นฐานมีรูปแบบง่ายๆ คือ แสดงตัวเลือกและกลุ่มคุณสมบัติและค่าต่างๆ รูปแบบจะมีลักษณะดังนี้:

 <code>ตัวเลือก {
    ทรัพย์สิน : มูลค่า;
</รหัส>

ที่นี่ ตัวเลือก จะเลือกองค์ประกอบ HTML ที่จะกำหนดเป้าหมาย คุณสมบัติ คือสิ่งที่คุณต้องการเปลี่ยนแปลง และ ค่า คือวิธีที่คุณต้องการเปลี่ยนแปลง

ตัวอย่างเช่น หากคุณต้องการให้ข้อความในย่อหน้าทั้งหมดเป็นสีน้ำเงิน คุณต้องเขียนดังนี้:

 <รหัส>พี {
    สี : น้ำเงิน;
</รหัส>

กฎนี้จะบอกเว็บเบราว์เซอร์ว่าองค์ประกอบ <p> (ย่อหน้า) ทุกอันควรมีข้อความสีน้ำเงิน

ตัวเลือก CSS

ตัวเลือก CSS ช่วยให้คุณเลือกองค์ประกอบบนเว็บเพจที่จะได้รับผลกระทบจากกฎสไตล์ได้ มีตัวเลือกหลายประเภท และแต่ละประเภทจะทำงานแตกต่างกันเล็กน้อย

ตัวเลือกประเภท: ตัวเลือกนี้จะกำหนดเป้าหมายไปที่องค์ประกอบทั้งหมดที่มีประเภทเฉพาะ ตัวอย่างเช่น <code>p {}</code> จะเลือกย่อหน้าทุกย่อหน้าในหน้า
ตัวเลือกคลาส: ตัว เลือกนี้จะกำหนดเป้าหมายไปที่องค์ประกอบที่มีแอตทริบิวต์คลาสเฉพาะ ใน HTML ให้เขียน <code><p class="greeting"></code> และใน CSS ให้กำหนดเป้าหมายด้วย <code>.greeting {}</code>
ตัวเลือก ID: ใช้สำหรับองค์ประกอบที่ไม่ซ้ำกันบนหน้า องค์ประกอบอาจมีแอตทริบิวต์ ID เช่น <code><h1 id="header"></code> ใน CSS คุณสามารถกำหนดสไตล์ให้กับองค์ประกอบนั้นด้วย <code>#header {}</code>

ตัวเลือกต่างๆ เหล่านี้ช่วยให้คุณกำหนดรูปแบบส่วนต่างๆ ของเว็บเพจได้อย่างหลากหลาย ช่วยให้คุณกำหนดองค์ประกอบต่างๆ ได้อย่างแม่นยำและตัดสินใจว่าควรให้องค์ประกอบเหล่านั้นมีลักษณะอย่างไร

คุณสมบัติและค่า CSS

CSS มีคุณสมบัติต่างๆ มากมายที่คุณสามารถใช้กำหนดรูปแบบหน้าเว็บได้ คุณสมบัติแต่ละอย่างช่วยให้คุณเปลี่ยนแปลงลักษณะเฉพาะของรูปลักษณ์ขององค์ประกอบได้ คุณสมบัติทั่วไปบางประการได้แก่:

สี: กำหนดสีของข้อความ
สีพื้นหลัง: กำหนดสีพื้นหลังขององค์ประกอบ
ขนาดตัวอักษร: เปลี่ยนขนาดของข้อความ
ระยะขอบ: เพิ่มช่องว่างด้านนอกองค์ประกอบ
padding: เพิ่มช่องว่างภายในองค์ประกอบ รอบๆ เนื้อหา

คุณสมบัติ CSS แต่ละอย่างจะตามด้วยค่า ตัวอย่างเช่น หากต้องการให้ข้อความมีสีแดง คุณสามารถเขียนดังนี้:

 <รหัส>พี {
    สี : แดง;
</รหัส>

กฎง่ายๆ นี้ทำให้ย่อหน้าทั้งหมดมีข้อความสีแดง คุณสมบัติ สี ควบคุมว่าข้อความจะปรากฏอย่างไร และค่า สีแดง จะบอกว่าข้อความจะเป็นสีอะไร

Cascade และการสืบทอดใน CSS

คำว่า “cascading” ใน CSS หมายถึงสไตล์สามารถไหลจากกฎหนึ่งไปยังอีกกฎหนึ่งได้ หากกฎสองข้อนำไปใช้กับองค์ประกอบเดียวกัน ลำดับจะตัดสินว่ากฎใดจะชนะ ซึ่งคล้ายกับการวางบล็อกซ้อนกัน โดยบางครั้งบล็อกหนึ่งจะครอบคลุมบางส่วนของอีกบล็อกหนึ่ง

กฎทั่วไปข้อหนึ่งก็คือ สไตล์ที่เขียนไว้ภายในองค์ประกอบ HTML โดยตรง (เรียกว่าสไตล์อินไลน์) จะแทนที่สไตล์ในไฟล์ CSS ของคุณ กฎอีกข้อหนึ่งก็คือ หากมีการกำหนดสไตล์ให้กับองค์ประกอบหลัก องค์ประกอบย่อยขององค์ประกอบดังกล่าวอาจสืบทอดสไตล์นั้นได้ เว้นแต่จะมีคำสั่งเป็นอย่างอื่น

ตัวอย่างเช่น หากคุณตั้งค่าสีข้อความของ <div> เป็นสีเขียว ข้อความภายใน <div> ก็มักจะปรากฏเป็นสีเขียวด้วยเช่นกันเนื่องจากการสืบทอด วิธีนี้จะช่วยรักษาการออกแบบที่สอดคล้องกันบนเว็บเพจ

สีและแบบอักษร CSS

ด้วย CSS คุณสามารถเปลี่ยนสีได้หลายวิธี คุณสามารถใช้ชื่อสีทั่วไป เช่น แดง น้ำเงิน และ เขียว นอกจากนี้คุณยังสามารถใช้รหัสเลขฐานสิบหก เช่น <code>#FF0000</code> สำหรับสีแดง หรือค่า RGB เช่น <code>rgb(255, 0, 0)</code> ได้อีกด้วย

ฟอนต์เป็นส่วนสำคัญอีกประการหนึ่งของ CSS ฟอนต์ก็เหมือนกับรูปแบบลายมือที่คุณเลือกใช้ในสมุดบันทึก ใน CSS คุณสามารถเปลี่ยนตระกูลฟอนต์ ขนาด น้ำหนัก และรูปแบบได้ ตัวอย่างเช่น หากคุณต้องการให้ย่อหน้าของคุณปรากฏใน Arial คุณสามารถใช้:

 <รหัส>พี {
    ฟอนต์: Arial, sans-serif;
</รหัส>

กฎนี้จะแจ้งให้เบราว์เซอร์แสดงข้อความในรูปแบบแบบอักษร Arial หากมี และใช้แบบอักษรอื่นที่คล้ายคลึงกันหากไม่มี

การเปลี่ยนสีและแบบอักษรด้วย CSS ช่วยให้ข้อความอ่านง่ายขึ้นและทำให้เว็บเพจของคุณดูน่าสนใจยิ่งขึ้น

โมเดลกล่อง CSS

CSS Box Model เป็นวิธีหนึ่งในการทำความเข้าใจว่าส่วนต่างๆ ขององค์ประกอบต่างๆ ถูกจัดเรียงอย่างไรบนหน้า องค์ประกอบแต่ละส่วนก็เปรียบเสมือนกล่อง โดย Box Model ประกอบด้วยสี่ส่วน ดังนี้

เนื้อหา: นี่คือพื้นที่ที่มีข้อความและรูปภาพของคุณ
Padding: คือช่องว่างรอบ ๆ เนื้อหาภายในกล่อง
เส้นขอบ: เป็นเส้นที่ล้อมรอบช่องว่างและเนื้อหา
ระยะขอบ: คือช่องว่างภายนอกเส้นขอบที่แยกองค์ประกอบออกจากองค์ประกอบอื่นๆ

ลองนึกภาพภาพถ่าย ภาพถ่ายคือเนื้อหา แผ่นรองที่ล้อมรอบภาพถ่ายก็เหมือนแผ่นรอง กรอบที่ยึดทุกอย่างเข้าด้วยกันคือขอบ และพื้นที่รอบกรอบคือระยะขอบ ด้วยแบบจำลองนี้ คุณสามารถมั่นใจได้ว่าทุกส่วนของการออกแบบของคุณมีพื้นที่และความสมดุลที่เหมาะสม

เค้าโครงและการวางตำแหน่ง CSS

CSS ไม่เพียงแต่ช่วยเรื่องสีและแบบอักษรเท่านั้น แต่ยังช่วยจัดเรียงองค์ประกอบต่างๆ บนเว็บเพจได้อีกด้วย ซึ่งเรียกว่าการจัดวางและตำแหน่ง ด้วย CSS คุณสามารถเลือกได้ว่าจะให้แต่ละองค์ประกอบปรากฏที่ใดบนเพจ

มีหลายวิธีในการควบคุมเค้าโครงของเว็บเพจ ได้แก่:

การแสดงผล: คุณสมบัติจะกำหนดว่าองค์ประกอบจะปรากฏอย่างไรในเค้าโครง ตัวอย่างเช่น <code>display: block;</code> จะทำให้องค์ประกอบมีบรรทัดของตัวเอง ในขณะที่ <code>display: inline;</code> จะทำให้องค์ประกอบอยู่ในบรรทัดเดียวกันได้
ตำแหน่ง: คุณสมบัตินี้กำหนดประเภทของวิธีการกำหนดตำแหน่งที่ใช้สำหรับองค์ประกอบ ค่าสามารถเป็น static , relative , absolute หรือ fixed ตัวอย่างเช่น <code>position: relative;</code> จะย้ายองค์ประกอบสัมพันธ์กับตำแหน่งปกติ
Flexbox: Flexbox เป็นวิธีที่ทันสมัยในการจัดเรียงรายการในแถวหรือคอลัมน์ ช่วยให้การจัดตำแหน่งองค์ประกอบต่างๆ ง่ายขึ้น

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

ตัวอย่างโค้ด CSS

นี่คือตัวอย่างการทำงานร่วมกันของ HTML และ CSS ตัวอย่างโค้ดนี้แสดงหน้าเว็บแบบเรียบง่ายพร้อมรูปแบบบางอย่าง:

 <รหัส><!DOCTYPE html>
<html>
<หัวเรื่อง>
  <สไตล์>
    ร่างกาย {
      สีพื้นหลัง: สีฟ้าอ่อน;
    -
    h1 {
      สี : กรมท่า;
      ขนาดตัวอักษร: 24px;
    -
    พี {
      สี : เขียว;
      ขนาดตัวอักษร: 18px;
    -
  สไตล์
</หัว>
<เนื้อหา>
  <h1>หน้าเว็บแรกของฉัน</h1>
  <p>นี่เป็นเว็บเพจเรียบง่ายที่ออกแบบโดยใช้ CSS</p>
</เนื้อหา>
</html></code>

โค้ดนี้จะสร้างเว็บเพจที่มีพื้นหลังเป็นสีฟ้าอ่อน ข้อความส่วนหัวเป็นสีน้ำเงินเข้ม และข้อความย่อหน้าเป็นสีเขียว CSS ภายในแท็ก <code><style></code> จะแสดงวิธีเขียนและใช้กฎ

วิธีการเชื่อมโยง CSS กับ HTML

คุณสามารถเพิ่ม CSS ลงใน HTML ได้ 3 วิธีหลัก โดยแต่ละวิธีมีการใช้งานที่แตกต่างกันไปขึ้นอยู่กับสถานการณ์:

CSS แบบอินไลน์: CSS เขียนโดยตรงในองค์ประกอบ HTML โดยใช้แอตทริบิวต์ <code>style</code> ตัวอย่างเช่น: <code><p style="color: blue;">Hello</p></code> จะเปลี่ยนสีข้อความของย่อหน้าเดียวนี้เป็นสีน้ำเงิน
CSS ภายใน: กฎ CSS เขียนไว้ภายในแท็ก <code><style></code> ในส่วนหัวของเอกสาร HTML วิธีนี้มีประโยชน์เมื่อคุณกำลังทำงานกับเว็บเพจหนึ่งหน้า
CSS ภายนอก: กฎ CSS จะถูกวางไว้ในไฟล์แยกต่างหาก โดยปกติจะมีชื่อว่า <code>style.css</code> คุณลิงก์ไฟล์ CSS กับ HTML ของคุณด้วยแท็ก <code><link></code> ตัวอย่างเช่น: <code><link rel="stylesheet" href="style.css"></code> วิธีนี้ทำให้สามารถนำรูปแบบเดียวกันไปใช้กับหลายหน้าได้อย่างง่ายดาย

วิธีการภายนอกเป็นวิธีที่นิยมใช้กันมากที่สุดในการพัฒนาเว็บแบบมืออาชีพ เพราะช่วยให้ HTML เป็นระเบียบเรียบร้อย และให้คุณอัปเดตสไตล์ข้ามหน้าต่างๆ ได้ในคราวเดียว

ประโยชน์ของการใช้ CSS

CSS มีประโยชน์มากมายหลายประการ ต่อไปนี้คือประโยชน์บางประการของการใช้ CSS ในการพัฒนาเว็บ:

การแยกเนื้อหาและรูปแบบ: HTML ทำหน้าที่ควบคุมเนื้อหาและโครงสร้าง ในขณะที่ CSS ทำหน้าที่ควบคุมรูปลักษณ์และการออกแบบ การแยกส่วนนี้ทำให้การอัปเดตเว็บไซต์ง่ายขึ้น
ความสามารถในการนำกลับมาใช้ใหม่: เมื่อคุณสร้างกฎ CSS แล้ว คุณสามารถใช้กฎนั้นกับองค์ประกอบต่างๆ มากมายในหน้าต่างๆ ได้ ซึ่งจะช่วยประหยัดเวลาและทำให้ทุกอย่างสอดคล้องกัน
ปรับปรุงประสิทธิภาพการทำงานของเว็บไซต์: ด้วย CSS ในไฟล์แยกต่างหาก เบราว์เซอร์สามารถโหลดสไตล์ได้อย่างรวดเร็วและแสดงเว็บเพจของคุณได้รวดเร็วยิ่งขึ้น
การออกแบบที่สอดคล้องกัน: CSS ช่วยให้แน่ใจว่าทุกหน้าบนเว็บไซต์ของคุณดูคล้ายคลึงกัน ซึ่งสร้างประสบการณ์ที่ดีขึ้นให้กับผู้ใช้เนื่องจากพวกเขาสามารถเข้าใจและนำทางไซต์ของคุณได้อย่างง่ายดาย
การบำรุงรักษาที่ง่ายดาย: เมื่อคุณจำเป็นต้องเปลี่ยนรูปแบบ คุณจะต้องอัปเดตไฟล์ CSS เพียงไฟล์เดียวเท่านั้น แทนที่จะต้องอัปเดตไฟล์ HTML หลายไฟล์ วิธีนี้จะทำให้การจัดการเว็บไซต์ง่ายขึ้น

การใช้ CSS เปรียบเสมือนการมีกล่องเครื่องมือพิเศษ เครื่องมือแต่ละชิ้นในกล่องเครื่องมือจะช่วยให้คุณปรับปรุงรูปลักษณ์ของเว็บเพจได้อย่างง่ายดาย เมื่อคุณฝึกฝนไปเรื่อยๆ คุณจะเห็นว่า CSS มีประสิทธิภาพเพียงใดในการสร้างเว็บไซต์ที่สวยงามและเป็นมิตรต่อผู้ใช้

CSS ในโลกแห่งความเป็นจริง

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

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

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

สรุปประเด็นสำคัญ

นี่คือประเด็นหลักที่เราเรียนรู้เกี่ยวกับ CSS:

คำจำกัดความ: CSS ย่อมาจาก Cascading Style Sheets และใช้สำหรับกำหนดรูปแบบให้กับเว็บเพจ
บทบาทในการพัฒนาเว็บ: CSS ทำให้เว็บไซต์ดูน่าสนใจโดยการเพิ่มสี แบบอักษร และเค้าโครง
โครงสร้างพื้นฐาน: กฎ CSS ใช้ตัวเลือกและบล็อกการประกาศซึ่งคุณสมบัติจะถูกตั้งค่าด้วยค่าต่างๆ
ตัวเลือก: ตัวเลือกประเภท คลาส และ ID ช่วยกำหนดเป้าหมายองค์ประกอบ HTML ที่เฉพาะเจาะจง
คุณสมบัติและค่า: CSS ใช้คุณสมบัติเช่น สี สีพื้นหลัง และระยะขอบ เพื่อควบคุมด้านต่างๆ ของการออกแบบเว็บเพจ
การเรียงซ้อนและการสืบทอด: กฎต่างๆ สามารถแทนที่กันได้และสไตล์สามารถส่งต่อจากองค์ประกอบหลักไปยังองค์ประกอบย่อยได้
โมเดลกล่อง: องค์ประกอบ HTML ทุกองค์ประกอบจะถูกจัดการเป็นกล่องที่มีเนื้อหา การเติม ขอบ และระยะขอบ
เค้าโครงและการวางตำแหน่ง: CSS มีวิธีการจัดเรียงองค์ประกอบต่างๆ บนหน้าโดยใช้คุณสมบัติเช่น การแสดงผล ตำแหน่ง และ Flexbox
วิธีการใช้ CSS: CSS สามารถใช้ได้ทั้งแบบอินไลน์ ภายในส่วนหัว หรือภายนอกผ่านสไตล์ชีตแยกต่างหาก
ประโยชน์: CSS แยกเนื้อหาจากการนำเสนอ ช่วยให้สามารถนำกลับมาใช้ซ้ำได้ และทำให้มั่นใจได้ว่าการออกแบบมีความสอดคล้องกันทั่วทั้งเว็บเพจ

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

ฝึกฝนและสังเกตเว็บไซต์ที่คุณชื่นชอบอยู่เสมอ สังเกตว่ามีการใช้รูปแบบต่างๆ เพื่อดึงดูดความสนใจของคุณและสร้างประสบการณ์ที่น่าพึงพอใจ เมื่อเวลาผ่านไป คุณจะเห็นว่า CSS มีประสิทธิภาพเพียงใดในการเปลี่ยนโครงสร้าง HTML ธรรมดาให้กลายเป็นหน้าเว็บที่ดึงดูดสายตา

สไตล์ชีตแบบเรียงซ้อน