CSS是層疊樣式表(Cascading Style Sheets)的縮寫，是一種用于控制網頁樣式和布局的語言。通過使用CSS，我們可以對網頁的文本、圖形、樣式和布局進行樣式化，使網頁更加美觀和易于閱讀。
下面是一個使用CSS設計網站頁面的代碼示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS設計網站頁面</title>
<style>
/* 設置頁面背景色為藍色 */
body {
background-color: #999999;
color: #fff;
}
/* 設置頁面標題的字體和大小 */
h1 {
font-size: 28px;
font-weight: bold;
}
/* 設置段落文本的字體和大小 */
p {
font-size: 18px;
font-weight: bold;
}
/* 設置圖片的上傳樣式 */
input[type="file"] {
border: none;
margin: 10px;
padding: 5px;
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 5px;
}
/* 設置導航欄樣式 */
nav {
background-color: #fff;
border-radius: 5px;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #999999;
text-decoration: none;
}
/* 設置響應式設計樣式 */
@media screen and (max-width: 768px) {
h1 {
font-size: 16px;
}
p {
font-size: 14px;
}
nav {
list-style: none;
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
}
</style>
</head>
<body>
<h1>歡迎來到我的網站！</h1>
<p>歡迎來到我的網站，這里有一些示例文章供您參考。</p>
<nav>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
<li><a href="#">文章3</a></li>
</ul>
</nav>
</body>
</html>
上述代碼中，我們首先引入了CSS樣式表，并對CSS的樣式進行了定義。在CSS中，我們使用了@media查詢語句，用于根據設備寬度的不同而調整樣式。在@media查詢中，我們定義了三個條件，分別是“screen and (max-width: 768px)”，用于設置響應式設計，當屏幕寬度小于等于768像素時，頁面的樣式將保持不變。
通過上述代碼，我們可以將一個簡單的網站頁面的樣式化，使其更加美觀和易于閱讀。當然，我們也可以根據需求進行更加復雜的樣式化，使網站更加個性化。