CSS 是現代網頁設計的重要基石。Web 標准要求使用 CSS 來格式化和造型網頁。其輕量級的特性，大大超越以往諸如表格之類的布局方法。
CSS 並沒有想象中的難以捉摸。以下是一些利用 CSS 創建造型設計元素的技巧和技術，也包括一些結合 JavaScript 或 XHtml 以擴展網站功能的案例，適合作為學習 CSS 的基本指南。當然對於經驗豐富的設計師，同樣值得閱讀。
1. 布局和用戶界面技術
當前 CSS 主要應用於創建頁面布局。利用 CSS 創造頁面布局和用戶界面，有幾乎無限的可能性。下面是一些更有趣的技術。
The simplest way to horizontally and vertically center a DIV
本文介紹用 CSS 方法使 DIV 縱向或橫向居中。雖然有很多通過父 DIV 和子 DIV 實現居中的代碼，但這個特殊方法僅使用一個 DIV 元素，並且簡單得多。
New CSS Sticky Footer - 2009
一個棘手的完全跨浏覽器兼容的頁腳技術，兼容 Google Chrome 浏覽器，並且不需要空 DIV 輔助。
Simple Page Peel Effect with jQuery & CSS
此教程結合 jQuery 和 CSS 創建網頁剝離效果。大多數網站都使用 Flash 來實現這種效果。因此如果不熱衷於 Flash 技術，這會是一個不錯的選擇。
Equal height boxes with CSS
一個使用 CSS 創建等高欄式布局的基本實例，徹底拋棄表格布局的代碼冗雜與混亂。
Adaptable vIEw - how do they do it?
讓用戶手動改變網站的表現，似乎可以大大提高網站的易用性和用戶粘度。本教程將介紹如何為網站實施和部署浏覽器適應技術。
CSS: The All-Expandable Box
一個創建自適應 CSS 容器的教程。容器會自動向各個方向擴大，以適應所包含的內容，而不只是垂直增長。適用於用戶可控字號導致使 CSS 容器撐開的情況。
Four Methods to Create Equal Height Columns
一個使用 CSS 創建等高列的教程，共涉及四個不同的技術。兼容所有主流浏覽器（甚至 IE6 浏覽器）。
Vertical Centering With CSS
這篇文章包括各種使 CSS 元素垂直居中於網頁的最佳技術。同時也介紹了如何利用這些技術，創建一個簡單小巧的垂直居中的站點。
CSS vertical center using float and clear
使用浮動 (float) 和清除 (clear) 創建垂直居中的 CSS 容器，甚至兼容 IE5 版本。
Cross-Browser Inline-Block
本教程涵蓋在多重內容情況下，創建一個內聯塊 (inline-block) 布局的方法，而不打破布局的完整性。
The CSS “Ah-ha!” Moment
談論大多數設計師，在其職業生涯的某個時候發出 "Ah-Ha!" 感歎的時刻。以及一些重要的關於 CSS 容器布局的靈感突現。
An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
本文給出了關於 CSS 層，相對和絕對定位。以及 Z-Index 屬性的全面概述。
The CSS Overflow Property
詳解了 CSS 溢出屬性的工作流程。包括可見 (visible)，隱藏 (hidden)，滾動 (scroll)，自動 (auto)，以實例說明逐一說明。
Absolute, Relative, Fixed Positioning: How Do They Differ?
分析容易混淆的絕對 (absolute)，相對 (relative)，固定位置 (fixed) 之間的差異性，詳細說明各個屬性的區別。
display: inline-block
介紹在不同的樣式中創建內聯塊 (inline-block) 的方法，並兼容不同的浏覽器環境。
2. 導航和菜單技術
良好的導航是網站中非常重要的一部分。良好的導航既方便用戶使用，也補充和完整了網站的其他設計元素。以下是一些關於創建導航的技巧和提示，使其兩者兼備。
Create dropdown menus with CSS only
一份創建 CSS 下拉菜單的完整教程，該方法快速而且易於實施。
Simple scalable CSS based breadcrumbs
在網站上使用面包屑導航，可以方便訪問者浏覽。本教程介紹了一種創建基於 CSS 的，可伸縮面包屑導航的方法。
Horizontal Sub-nav with CSS & jQuery
一份關於使用 CSS 技術創建橫向導航子菜單的完整教程。如果希望正常工作於 IE6 浏覽器，可能需要執行一些 jQuery 代碼。
CSS Step Menu
建立一個階梯式菜單（也稱為“向導菜單”）可能會非常棘手，特別是當它需要根據實際應用做出一些改變的時候。本文給出了創建該類菜單的實例。
The Tabbed Breadcrumb Navigation
一份關於創建面包屑導航，並格式化為標簽式的全面教程。
Apple’s Navigation bar using only CSS
該教程說明如何創建一個類似蘋果網站的導航欄，僅僅使用 CSS 和 Html 代碼（不附加任何圖片）。
Sitemap Celebration
一款跨浏覽器兼容（即使是 IE5 版本），並且基於嵌套列表的網站地圖 (Sitemap) 風格。
Nice CSS menu with feed reader icons list
使用 CSS 創建一個供稿 (Feed) 閱讀器圖標菜單。可以方便地適用於其他類型的菜單。
Multi-level Menus with jQuery and CSS
使用純 CSS 以及 CSS/JS 創建多級聯動菜單的技術集錦。也涵蓋了更先進和富有創造性的實例。
3. 圖像風格和畫廊
在網頁設計中，圖片造型是一個經常被忽視的因素。以下這些精選的的技術和技巧，將幫助你糾正和改善這種情況。
Centering images with CSS
一些關於圖片居中的基本資料，使用 CSS 控制而不是過時的純 Html 布局。
Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript
一份關於如何在博客上，建立各種圖片邊框樣式的完整綱要。使用 JavaScript 和 CSS 技術相結合。
Sexy Music Album Overlays
為圖像畫廊增加更多風格樣式的教程，文章使用專輯封面的制作過程作為一個實例。
Create CSS pin balloons with ease
這是一個強大的技術，從簡單的錨點標記，擴大過渡到為圖像增加引腳氣球、氣泡提示或地圖標示。
Create an Image Rotator with Description (CSS/jQuery)
一份關於如何使用 CSS 和 jQuery 技術建立圖片旋轉/畫廊的教程。本文將創建一個干淨的界面，用於顯示一般的或組合的圖像廊。
5 Popular CSS Speech Bubbles
收集了使用 CSS 創建氣泡提示的 5 個不同的技術（有些純粹用 CSS 實現）。
How to Make a Threadless Style T-Shirt Gallery
創建一種類似 Threadless 網站的圖像畫廊效果，以字幕或覆蓋圖片或縮略圖的頂部。功能的實現技術值得借鑒。
CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)
基於 CSS 樣式表打造針對打印用途和屏幕顯示優化的圖像。
Beautiful new CSS: box-shadow
關於利用 CSS 創建容器陰影效果的教程，德文網站。
4. 版式設計技術
CSS 擅長於版式設計。無論是字體類型，重量還是顏色，都需要使用 CSS 來定義。以下是一些指南，幫助你創建更好的網頁版式。
Truetype, Font Variants and Antialiasing
一篇關於使用 Truetype 字體的文章，分析了為何有時字體顯示效果不像所期望那樣的原因。
Styling Ordered Lists with CSS
使用 CSS 創建一個極具吸引力的有序列表。
Beautiful fonts with @font-face
關於 @font-face 屬性的基本使用教程，以及如何在網頁設計中插入 Truetype 字體。
Forgotten possibilitIEs of :first-letter in CSS
關於 CSS 中的 :first-letter 屬性的使用，俄文網站。
8 Definitive Web Font Stacks
基於確切字體格式的 8 個通用 CSS 字體集，以幫助設計人員決定網站版式設計，選用適當的字體集，並調整到需要的合適效果。
Mike’s Experiments - CSS: Perspective Text
一個創建文字角度效果的有趣實例（即使文字塊的底部看起來更接近頂端）。
Fonts for web design: a primer
一份適用於網頁設計師的版式設計指南，包括字體類型的選擇及其合適的用法。
CSS text-shadow Fun: Realtime Lighting Demo
使用 CSS 的文字陰影屬性結合 JavaScript 技術，來創建一個發光效果實例。
Rendering Quotes With CSS
一份關於在 CSS 中使用引號 (quotes) 標記的指南，包括如何創建適合不同語種的標准引號。
Six Ways to Style Blockquotes
使用 CSS 為 XHtml 中的 blockquote 標記定義樣式的多種方法。
Make OL list start from number different than 1 using CSS
教你如何自定義有序列表起始數字的簡明教程。
Use CSS to Override Default Text Selection Color
這篇文章介紹使用任何顏色為文字設置高亮顏色的方法。
CSS Drop Cap Effect
為文章內容設定首字下沉的 CSS 方法，尤其適用於雜志型或書籍型網站。
5. 圖標，按鈕和鏈接
圖標，按鈕和鏈接在許多網頁上經常是被忽視的因素。但是實際上它們也會對整體設計產生巨大的影響。以下是一些使網頁造型更佳的資源。
Add Progressive Icons to Your Site Using :after pseudo-element
此教程說明如何為鏈接添加圖標描述，按照不同文件類型指定不同圖標（如 PDF 或 ZIP 文檔）。
Super Awesome Buttons with CSS3 and RGBA
關於使用 CSS3 和 alpha 混合技術創建按鈕的教程。
Scalable CSS Buttons Using PNG and Background Colors
使用 PNG 圖像創建橫向或縱向的可伸縮菜單。該技術能實現優雅降級，即便使用 IE6 浏覽器仍可看到按鈕（只是沒有了 PNG 圖像）。
Add File Type Icons next to your links with CSS
為鏈接添加文件類型圖標的教程。
22 CSS Button Styling Tutorials and Techniques
一份涉及 20 多個技術的全面資源清單。關於如何使用 CSS 創建不同形狀，不同尺寸的圖標。
CSS Tricks’ Link Nudge
創建當鼠標停留時的縮進菜單效果的教程。
Sanscons
一些可以使用 CSS 重設圖標顏色的圖標集。
英文原稿：Mastering CSS, Part 1: Styling Design Elements | Smashing Magazine
翻譯整理：精通 CSS 造型設計元素 | 芒果