พื้นฐานการทำงานกับภาษา CSS

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

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

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

ไฟล์สไตล์จะต้องมีนามสกุล .css เพื่อเชื่อมต่อไฟล์ดังกล่าวกับหน้า HTML ภายในแท็ก head ควรเขียน โครงสร้างดังนี้:

<link rel="stylesheet" href="fileName.css">

ในตัวอย่างถัดไป ไฟล์ HTML ของเราเชื่อมต่อกับ ไฟล์ CSS styles.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			This is a paragraph with text.
		</p>
	</body>
</html>

สร้างและเชื่อมต่อไฟล์ styles.css ไปยังทุกหน้าของคุณ