---
# System prepended metadata

title: DAY2 - 建立並插入第一個 CSS 檔案
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章']

---

# DAY2 - 建立並插入第一個 CSS 檔案

### 如何插入 CSS 在網頁上呢？

- 於 HTML 檔案中，head 標籤內輸入:

  小秘訣: 在安裝完 emmet 後，可以輸入 `link:css` + **tab**

  快速展開，即可快速生成。
```
// 並建議在開啟一個專門放置 CSS 檔案的資料夾，路徑如下:

 <head>
        <link rel="stylesheet" href="css/style.css" />
 </head>
```

### 路徑建立完畢以後，於 vs code 新增一個 CSS 檔案:

1. mac: command + N 選擇 CSS

2. 第一個 CSS 語法，**color**:

```
// HTML:

<h1>我的第一個CSS練習</h1>
```

```
// CSS:

h1 {
  color: blue;
}
```

![](https://i.imgur.com/RcFqk61.png)


###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章`