自從HTML 4.0出現以後，引入了“層疊樣式表”(CSS),於是網頁制作者能夠隨心所欲地對自己的網頁進行外觀和動態的設計，並且使網頁具有交互性。其實動態Html（DHtml）並不是一種專門的技術，而是Html技術的一個綜合，說白了就是一種技巧，但往往是這樣或那樣的小技巧使我們的網頁變得更加好看、實用。好了，廢話少說，下面開始以實例來說明動態HTML在網頁設計中的應用。
例1 使用<style>和</style>標志對修飾文本
<html>
<head>
<title>DHtml舉例1</title>
<style><!--
h2 {font-family:"宋體";font-size=12pt;text-align:center;color:blue}
-->
</style>
</head>
<body>
<h2>被修飾文本</h2>
</body>
</html>
本例中，我們使用了<style>和</style>標志對來修飾文本，請留意藍色字，<style>和</style>標志對是加在<head>和</head>標志對之間的，而加上<!--和-->是為了讓不支持<style>和</style>標志對的浏覽器跳過樣式表，否則可能會出錯。本例先對<h2></h2>標志對中的文本樣式在<style>和</style>標志對中進行定義，於是在後邊<h2></h2>中就依樣式表定義的內容對文本進行修飾。font-family定義字體，font-size定義字體大小，text-align定義文本對齊方式，color定義前景顏色。
除此之外，我們還可以采用另一種方法來實現。請看下邊的例子。
例2 直接用style屬性修飾文本
<html>
<head>
<title>DHtml舉例2</title>
</head>
<body>
<h2 style="font-family:'宋體';color:blue;font-size:12pt;text-align:center">被修飾文本</h2>
</body>
</html>
請務必注意font-family後是用單引號來定義字體的（font-family:'宋體'）。好了，現在您已經初步掌握了樣式單的用法了，現在我們開始讓您的主頁動起來，請看下邊的例子。
例3 使用鼠標觸發事件和動態樣式表改變文本
<html>
<head>
<title>DHtml舉例3</title>
</head>
<body>
<h2 onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='underline'" style="font-size:12;text-align:center">請將鼠標移到上面！</h2>
<br>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'">我是變色龍！</h3>
</body>
</html>
在這個例子中,當您把光標放在文字上時,onmouseover事件將被觸發，於是執行其後的style定義，此時文字下加了一條直線（this.style.textDecoration='underline'的作用），this用來指代當前的對象，即<h2></h2>標志對。當您把光標移開文字時onmouseout事件被觸發，此時文字下的直線消失了（this.style.textDecoration='underline'的作用），這樣網頁就有了動態的效果。同理，我們可以通過觸發鼠標事件來改變文本的顏色，如上例中的第二行黑體字所示。
再次提醒讀者，在使用樣式單的時候一定要注意格式。比如，在<style></style>標志對中進行樣式單定義時應使用text-decoration:underline，而不是用textDecoration='underline'來修飾文本，後者是用於事件觸發中的（如onmouseover或onmouseout事件）。許多CSS屬性的名字中都有連字符(像text-decoration)，但是連字符在許多腳本語言（如JavaScript）中是不合法的標識符，因此，在HTML或樣式表中指明CSS屬性的時候用連字符命名方式，但在作為一個腳本屬性時，就必須去掉連字符，並將它後面的第一個字母大寫。例如：
text-decoration變為textDecoration、background-color變成backgroundColor、margin-top變成marginTop。
您可能想用鼠標點擊文本來改變其的顏色，要做到這一點很簡單，只要在onclick事件中定義樣式即可，onclick的用法與onmouseover、onmouseout相似。請看下邊的例子。
例4 使用onclick動態改變字體的顏色
<html>
<head>
<title>DHtml舉例4</title>
</head>
<body>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'" onclick="this.style.color='blue'">變色看到了嘛！</h3>
</body>
</html>
在這一例子中，當您把鼠標移動到文字上時，文字顏色變為紅色，當鼠標離開文字時，文字顏色變為綠色，當在文字上單擊鼠標時，文字顏色變成了藍色。
下面是我用樣式單制作的一個自認為比較漂亮的Html文件。
例5 “輕松自學動態HTML”的圖形標志
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHtml舉例5</title>
<style>
<!--
body {font-family:"宋體";font-size:9pt;color:#00aaff}
h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)}
h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt}
-->
</style>
</head>
<body bgcolor="#000000">
<br>
<table align="center" border="0" width="27%" bgcolor="#000000" cellpadding="12">
<tr>
<td width="168"><h2 class="top">輕 松 自 學 動 態 HTML</h2>
<h2 class="bottom"><span style="font-size:50pt;color:lime"><i>t</i></span>
each youself DHtml</h2>
</td>
</tr>
</table>
</body>
</html>
例5的效果如下圖，請注意例子中的藍色部分，class屬性是用來定義標志對使用的樣式類，如<h2 class="top">……</h2>指定了 <h2></h2>標志對中使用樣式類“top”，而“top”則是在<style></style>標志對中定義的。