listWeb Development 101
แนะนำโลกของ CSS
สารบัญ
สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video
CSS คืออะไร ?
CSS ย่อมาจาก Cascading Style Sheet ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML ให้สวยงามยิ่งขึ้น ความสวยงามทั้งหมดเรียกว่าเกิดจาก CSS ทั้งหมดเลยก็ว่าได้
Basic Structure ของ CSS เบื้องต้น
การเปิด tag ของ CSS เราจะทำภายใต้ tag <head></head> จะทำได้ 2 วิธีคือ
1. ใส่ style ใน tag <style></style>
html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document 2</title>
<style>
/* comment code แบบนี้ */
/* ใส่ style ตรงตำแหน่งนี้ */
</style>
</head>
</html>2. import .css ไฟล์ด้วย tag <link>
สร้างไฟล์มาหนึ่งไฟล์ (สมมุติชื่อ styles.css สร้างไว้ใน folder เดียวกัน) แล้ว import file เข้ามาผ่าน tag <link>
html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document 2</title>
<!-- import style เข้ามาโดย href ระบุ path ของ file -->
<link rel="stylesheet" href="styles.css">
</head>
</html>ซึ่งใน Session นี้เราจะยังคงใช้วิธีที่ 1 ก่อนเพื่อให้้เกิดความเคยชิน CSS ก่อน (ก่อนที่เราจะย้าย file กันอีกที)