在前端開發中，CSS樣式表扮演著重要的角色。學生應該學會如何在HTML文件中嵌入CSS樣式表，以及如何使用它們來定制網頁的樣式。以下是一個簡單的教學設計，旨在幫助學生了解CSS樣式表的基礎知識。
第一步是創建一個HTML文件，這個文件將會是我們教學的使用范例。學生需要了解如何在
標簽中創建一個標簽，加載外部CSS樣式表文件。具體代碼如下：<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
接下來，我們需要創建一個CSS樣式表文件。學生需要知道如何為不同的HTML元素設置不同的樣式，以及如何使用類和ID選擇器來為特定的元素設置樣式。以下是一些樣式選擇器的示例：
body {
background-color: #f2f2f2;
}
header {
background-color: #333;
color: white;
}
h1 {
font-size: 36px;
}
p {
font-size: 18px;
line-height: 1.5;
}
.special {
background-color: yellow;
}
#important {
font-weight: bold;
}最后一步是在HTML文件中使用這些CSS樣式。為了啟用一個CSS樣式，我們可以在HTML元素上使用“class”或“id”屬性，并將其設置為CSS樣式表中的類或ID選擇器之一。以下是一個使用CSS樣式的例子：
<header class="special"> <h1 id="important">我的網站</h1> <p>歡迎來到我的網站，這個網站用于教學CSS樣式表。</p> </header>
以上是一個簡單的教學設計，它可以幫助學生開始學習CSS樣式表的基礎知識。當然，還有許多其他的CSS樣式表知識可以學習，例如盒子模型、浮動、清除浮動等。