diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx
index b8f010cea..9c73fd3df 100644
--- a/docs/1-trial-session/03-css/index.mdx
+++ b/docs/1-trial-session/03-css/index.mdx
@@ -105,7 +105,9 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
 
 ## 演習問題1
 
-下のような、文字色が黄色、背景色が好きな色 (この例では黒) の`Hello CSS!`をブラウザで表示してみましょう。使用するプロパティは`color`、`background-color`です。`style`属性を用いる方法と、CSSファイルを用いる方法の両方で試してみましょう。
+次のように、`Hello CSS!`と表示するページを作成してみましょう。
+
+`Hello CSS!`という文字列を表示し、`color`プロパティと`background-color`プロパティを使って、文字色を黄色、背景色を黒色にしてください。
 
 ![Hello CSS!](yellow-hello-css.png)
 
@@ -120,15 +122,22 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
     <title>Title</title>
   </head>
   <body>
-    <div style="color: yellow; background-color: black">Hello CSS!</div>
+    <div id="greeting">Hello CSS!</div>
   </body>
 </html>
 ```
 
-</Answer>
+```css title="style.css"
+#greeting {
+  color: yellow;
+  background-color: black;
+}
+```
 
 <ViewSource url={import.meta.url} path="_samples/yellow-hello-css" />
 
+</Answer>
+
 ## 演習問題2
 
 次のような条件を満たす要素を選択するセレクタは何でしょうか。
