HTML Styles

แอตทริบิวต์ (Attribute) style ใช้สำหรับเพิ่มสไตล์ให้กับ องค์ประกอบ (Element) เช่น สี รูปแบบฟอนต์ ขนาดตัวอักษร และอื่น ๆ เพื่อกำหนดลักษณะการแสดงผลของเนื้อหาในหน้าเว็บ

I am normal

I am red

I am blue

I am big

HTML Style Attribute

สามารถตั้งค่าสไตล์ขององค์ประกอบ (Element) ได้ด้วยแอตทริบิวต์ style โดยมีโครงสร้างดังนี้

				
					<tagname style="property:value;">

โดยค่าภายใน "" คือคู่ของคุณสมบัติ (property) และ ค่า (value) จาก CSS

สีพื้นหลัง

คุณสมบัติ CSS background-color กำหนดสีพื้นหลังสำหรับ HTML Element

				
					<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

ตั้งค่าสีพื้นหลังสำหรับ 2 Element ที่แตกต่างกัน

				
					<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

สีข้อความ

คุณสมบัติ CSS color กำหนดสีข้อความสำหรับ HTML Element

				
					<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

รูปแบบฟ้อนต์

คุณสมบัติ CSS font-family กำหนดรูปแบบฟ้อนต์ที่จะใช้สำหรับ HTML Element

				
					<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

ขนาดตัวอักษร

คุณสมบัติ CSS font-size กำหนดขนาดข้อความสำหรับ HTML Element

				
					<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

การจัดตำแหน่งข้อความ

คุณสมบัติ CSS text-align กำหนดการจัดตำแหน่งข้อความแนวนอนสำหรับ HTML Element

				
					<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

สรุปบท

ใช้ style Attribute สำหรับกำหนดสไตล์ให้กับองค์ประกอบใน HTML
ใช้ background-color สำหรับสีพื้นหลัง
ใช้ color สำหรับสีข้อความ
ใช้ font-family สำหรับเลือกใช้รูปแบบฟอนต์
ใช้ font-size สำหรับขนาดข้อความ
ใช้ text-align สำหรับจัดข้อความ