という３通りの出所があります。これら３つのスタイルシート間で宣言が衝突したり、或いは一つのスタイルシートの中であっても宣言が衝突する事があります。そういった場合に、最終的にどの指定が適用されるのか、その優先順位を決めるのがこの「カスケード処理」です。
この「カスケード処理」では、以下で説明する、
の順に処理されます。
カスケード処理では、まずスタイルシートの出所から優先順位が決められます。出所による順位は次のようになります。
《優先度》 「HTML文書作成者」>「ユーザ(利用者)」>「UA(ブラウザ等)の初期値」
つまり、３つの出所のうち「HTML文書作成者」によるスタイルシートが最も優先されます。ただし、各スタイルシートでスタイル指定をする時に、その宣言に「!important」を付けることによって、
《優先度》 「!important付きユーザ」>「!important付きHTML文書作成者」>「HTML文書作成者」>...
と、優先順位が変わります。（これはCSS2での仕様。CSS1では「!important付きHTML文書作成者」>「!important付きユーザ」>「HTML文書作成者」>...となっていました。）
また、「@import」によって取り込まれたスタイルシートは、その「@import」文があるスタイルシートと同じ出所となります。取り込まれたスタイルシートのスタイル指定と、その取り込み元となるスタイルシートのスタイル指定とが衝突した場合は、取り込み元の宣言が優先されます。
上で書いたように、「!important」を用いる事によってスタイル指定の優先順位が変わります。勧告では、この「!important」があることによって、特別な条件を必要とする人が文字を大きくしたり色を変えたりすることが出来るので、文書のアクセシビリティ(Accessibility)の向上につながる、としています。
p{font-size: x-large !important}
各スタイル指定のセレクタの詳細度（重み）を計算して、その値が大きいものほど優先されます。ここで、詳細度は、
「詳細度」= (id属性の数)*100 + (class属性の数)*10 + (要素名の数)*1
で求められます。ただ、これだけではよく分からないと思いますので例を挙げます。
li {} /* 要素名の数1。よって詳細度1 */
ul li {} /* 要素名の数2。よって詳細度2 */
ul.samp {} /* 要素名の数1。class属性の数1。よって詳細度11 */
ul li.samp {} /* 要素名の数2。class属性の数1。よって詳細度12 */
#ex1 {} /* ID属性の数1。よって詳細度100 */
また、style属性によるスタイル指定は詳細度100となります。
スタイル指定で優先度が同じものは、単純に位置が後にあるものが優先されます。例えば、
<head>
<link rel="stylesheet" type=text/css" href="sample.css">
<title>test</title>
<style type="text/css">
<!--
h1{color:silver}
-->
</style>
</head>
「sample.css」内で、
h1{color:red}
と指定されていた場合、どちらも出所が同じで詳細度も同じですから、h1要素の色はより後の指定である「silver」になります。
また、
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style type="text/css">
<!--
#sp{color:silver}
-->
</style>
</head>
<body>
<p id="sp" style="color:red">あれこれ</p>
</body>
と指定されていた場合、こちらも出所、詳細度ともに同じですから、後に指定されているstyle属性による指定が有効になり、「red」が有効になります。
例えば、HTMLのfont要素やalign属性など、スタイルシート以外を用いてのスタイル指定は、詳細度0（これはCSS2の仕様。CSS1では詳細度1）に相当するCSSのスタイル指定に変換され、その変換された指定はHTML文書作成者のスタイルシートの先頭にあるものとされます。（これによってスタイルシート以外でのスタイル指定は、スタイルシートのスタイル指定で上書きできます）