คลาส HTML

จัดแบ่งประเภท HTML (ตั้งคลาส) เพื่อให้เราสามารถกำหนดสไตล์ CSS สำหรับคลาสของอิเล็มได้。

ตั้งค่าสไตล์เดียวกันสำหรับคลาสเดียวกัน หรือตั้งค่าสไตล์แตกต่างกันสำหรับคลาสที่แตกต่างกัน。

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>ลอนดอน</h2>
<p>
ลอนดอนเป็นเมืองหลวงของอังกฤษ。 
เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร, 
จับเนื้อที่มีประชากรเมืองมหานครมากกว่า 13 ล้านคน。
</p>
</div> 
</body>
</html>

ทดลองด้วยตัวเอง

อิเล็มบล็อคประเภท

อิเล็ม <div> ของ HTML คืออิเล็มบล็อคมันสามารถใช้เป็นตัวแทนของอิเล็ม HTML อื่นๆ ได้ด้วย。

ตั้งค่าคลาสของอิเล็ม <div> ที่ทำให้เราสามารถตั้งค่าคลาสเดียวกันสำหรับอิเล็ม <div> ที่เหมือนกัน:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>ลอนดอน</h2>
<p>ลอนดอนเป็นเมืองหลวงของอังกฤษ。</p> 
เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร, 
มีพื้นที่เมืองหลวงที่มีประชากรเกิน 13 ล้านคน。</p>
</div>
<div class="cities">
<h2>กรุงปารีส</h2>
<p>กรุงปารีสเป็นเมืองหลวงและเมืองที่มีประชากรมากที่สุดของประเทศฝรั่งเศส。</p>
</div>
<div class="cities">
<h2>กรุงโตเกียว</h2>
<p>กรุงโตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่น ศูนย์กลางของพื้นที่กรุงโตเกียวกว้างขวาง,</p>
และเมืองหลวงที่มีประชากรมากที่สุดในโลก。</p>
</div>
</body>
</html>

ทดลองด้วยตัวเอง

ประเภทสมาชิกในแถว

สมาชิก <span> ของ HTML คือสมาชิกในแถว สามารถใช้เป็นตัวจัดเก็บข้อความได้

การตั้งค่าคลาสของสมาชิก <span> สามารถตั้งค่ารูปแบบเดียวกันสำหรับสมาชิก <span> ที่เหมือนกันได้

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

ทดลองด้วยตัวเอง