diff --git a/src/pages/html/020-css.mdx b/src/pages/html/020-css.mdx
index 4908585..5420b5f 100644
--- a/src/pages/html/020-css.mdx
+++ b/src/pages/html/020-css.mdx
@@ -16,7 +16,8 @@
 代わりに、CSS (Cascading Style Sheets) を使って見た目を整えていきましょう。
 
 CSSは、HTMLに装飾を加えるための言語です。  
-`<style>`タグの中に書くことで、HTMLの見た目を自由に変更できます。
+装飾を加える方法はいくつかありますが、そのうちの1つは`<style>`タグの中に書く方法です。  
+これにより、実際の見た目を自由に変更できます。
 
 例として、buttonタグの見た目を変えてみました。
 
@@ -168,6 +169,46 @@
 }
 ```
 
+## その他のCSSの書き方
+
+### linkタグで外部のCSSを読み込む
+
+CSSはHTMLファイルの中に直接書くだけでなく、外部ファイルとして分けて管理することもできます。  
+拡張子は`.css`で、`<link>`タグで読み込みます。
+
+このCSSファイルは、`<style>`タグの中に書くときと同じ書き方をします。
+
+```css title="path/to/styles.css"
+button {
+  background-color: purple;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+}
+```
+
+<br />
+
+```html title="path/to/index.html"
+<link rel="stylesheet" href="./styles.css">`
+<button>装飾されたボタン</button>
+```
+
+`href`は、読み込むCSSファイルのパスを指定します。  
+`rel`は、読み込むファイルがCSSであることを示すために`stylesheet`を指定します。
+
+### タグに直接スタイルを書く
+
+ほぼすべてのHTMLタグには、`style`属性を使って直接スタイルを書くこともできます。  
+これはスタイルを当てた要素だけに適用され、他の要素には影響しません。
+
+```html
+<button style="background-color: orange; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
+  直接スタイルが書かれたボタン
+</button>
+```
+
 ## 名称
 
 検索エンジンなどで調べるときに便利なように、今回出てきた用語の名称をまとめておきます。