在HTML中，我們可以使用style標簽來定義文檔內部的CSS樣式，但是當我們需要重用相同的樣式時，可以將樣式定義在外部的CSS文件中，然后通過JavaScript將它們引入到HTML文檔中。

// 引入外部CSS文件
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "style.css");
document.head.appendChild(element);

在上述示例中，我們使用JavaScript動態創建了一個link元素，然后將其添加到head標簽中，這樣就會自動將外部CSS文件中的樣式應用到網頁中。

外部CSS樣式的優點在于，它可以與多個網頁共享，減少了代碼的冗余，提高了代碼的可重用性，并且可以方便地在多個網頁中更改樣式，只需要修改一次CSS文件即可。

在CSS文件中，我們可以定義各種樣式效果，例如設置字體大小、顏色、背景色等，示例如下：

body {
background-color: #f0f0f0;
}
h1 {
color: blue;
font-size: 24px;
}

上述示例中，我們定義了body元素的背景色為#f0f0f0，將h1元素的顏色設置為藍色，并將其字體大小設置為24像素。

總之，使用外部CSS樣式可以提高代碼的可維護性和重用性，減少代碼冗余，并且可以方便地實現各種視覺效果，使網頁更加美觀。