พื้นฐานการเขียน CSS เบื้องต้น Property ที่ใช้งานบ่อย

สำหรับค่า Property ของการเขียน CSS นั้นมากมายหลากหลาย ซึ่งผู้ที่สนใจสามารถหาอ่านได้ทั่วไป แต่ส่วนตัวที่ใช้งานบ่อยๆ จะประกอบด้วย

• font-size = ขนาดตัวอักษร
• color = สีตัวอักษร
• background = พื้นหลัง
• float = การไหลต่อกัน
• overflow = การครอบทั้งหมด
• width = ความกว้าง
• height = ความสูง
• margin = ระยะห่างจากขอบไปทางด้านนอก
• padding = ระยะห่างจากขอบถึงเนื้อหาด้านใน

ตัวอย่างการใช้งาน Property "float"

โค้ด HTML + CSS : ไหลตามกันไปทางซ้ายทั้งหมด

<div id="left-only">
  <div class="left-one">
    <p>← box one</p>
  </div>
  <div class="left-two">
    <p>← box two</p>
  </div>
  <div class="left-three">
    <p>← box three</p>
  </div>
</div>

#left-only .left-one,
#left-only .left-two,
#left-only .left-three {
  float: left;
  padding: 2em;
}

การแสดงผล

โค้ด HTML + CSS : ไหลไปทางซ้าย และ ไหลไปทางขวา อย่างละอัน

<div id="overall-box">
  <div class="left-one">
    <p>← left box</p>
  </div>
  <div class="right-one">
    <p>right box →</p>
  </div>
</div>

#overall-box .left-one {
  float: left;
  padding: 2em;
}
#overall-box .right-one {
  float: right;
  padding: 2em;
}

การแสดงผล