---
description: '#HelloFrontend #HelloErmine #HelloWorld2021'
---

# What is CSS?

## CSS คืออะไร ?

### CSS (Cascading Style Sheets)

&#x20;       เป็นภาษาคอมพิวเตอร์ ใช้ควบคู่กับภาษา HTML ทำหน้าที่ตกแต่งหน้าตาของเว็บไซต์ให้มีความสวยงาม เช่น การกำหนดสีพื้นหลัง สีตัวอักษร ขนาดพื้นที่แสดงผล ขนาดตัวอักษร และอื่น ๆ โดยมีเวอร์ชันปัจจุบัน คือ CSS3

&#x20;       โครงสร้างของ CSS จะประกอบไปด้วย tag หรือ attributes ของ HTML เป็นการระบุว่าตำแหน่งไหนที่เราต้องการทำ style ซึ่งใน CSS จะเรียกว่า selector โดยนำมาจากไฟล์ HTML ![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTSx1YUDMHOlJ6jxfY%2F0.png?generation=1627230033403413\&alt=media)

![ตัวอย่างการเขียน syntax ของ css](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MfcwzJOHRMgdXy5ejws%2F-Mfcyf3QaqByQtUk6KAJ%2Fimage.png?alt=media\&token=1bc892b2-d527-4ae2-bd60-8e9ee84ff51e)

### วิธีการเรียกใช้ CSS เเบบ external (เรียกจากไฟล์ภายนอก)

&#x20;        เราสามารถเขียนไฟล์ของภาษา CSS เเยกคนละไฟล์กับ HTML ได้เลย เพื่อให้สะดวกต่อการเเก้ไข หรือใช้ไฟล์ซ้ำ ในกรณีที่เราต้องกำหนดค่า CSS เป็นจำนวนมาก ๆ ในการเขียนหน้าเว็บไซต์ ซึ่ง CSS ประเภทนี้เรียกว่า External CSS โดยสามารถเรียกใช้ได้ ดังนี้

&#x20;ในหน้าของไฟล์ HTML กำหนด tag link ภายใน tag head โดยมีรายละเอียดข้างใน คือ

\<link rel="stylesheet" type="text/css" href=" _**path ไฟล์ของ CSS ที่ต้องการเรียกเอามาใช้** " >_ ยกตัวอย่างเช่น

```markup
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" type="text/css" href="testcss.css">
</head>
```

{% hint style="info" %}
การเขียนคำสั่ง CSS จะเขียน selector ผูกกับค่าจาก tag หรือ attribute ของ HTML เช่น id หรือ class วิธีการเรียกใช้งานนั้นจะแตกต่างกัน
{% endhint %}
