Skip to main content

แนะนำโลกของ CSS

basic-css สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video

CSS คืออะไร ?​

intro-1

CSS ย่อมาจาก Cascading Style Sheet ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML ให้สวยงามยิ่งขึ้น ความสวยงามทั้งหมดเรียกว่าเกิดจาก CSS ทั้งหมดเลยก็ว่าได้

Basic Structure ของ CSS เบื้องต้น​

การเปิด tag ของ CSS เราจะทำภายใต้ tag <head></head> จะทำได้ 2 วิธีคือ

1. ใส่ style ใน tag <style></style>​

<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>

สร้างไฟล์มาหนึ่งไฟล์ (สมมุติชื่อ styles.css สร้างไว้ใน folder เดียวกัน) แล้ว import file เข้ามาผ่าน tag <link>

<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 กันอีกที)