ユーザーは、User-Agent（ユーザーエージェント）の設定で、制作者スタイルシート, ユーザースタイルシート, デフォルトスタイルシートの中で好みのスタイルを選択することができます。通常、User-Agent（ユーザーエージェント）の中でも視覚ブラウザはデフォルトのスタイルシートを内蔵しており、それを HTML文書に当てはめて表示しています。そして、制作者スタイルシートやユーザースタイルシートは、デフォルトのスタイルシートを上書きすることができます。どのスタイルシートも、セレクタと宣言ブロックのルールセットがいくつも並べられ、順序立てられたリストになっています。そして、CSS の 正式名称である Cascading Style Sheets の Cascade とは、順序立てられたリストという意味で、スタイルシートが段階的に継承していく働きを表しています。そして順序立てられたリストの中で、セレクタや記述されている位置の違いなどにより、段階化の順序（スタイルシートの指定が反映される優先順位）が異なってきます。
前述の通り、CSS には、制作者スタイルシート, ユーザースタイルシート, デフォルトスタイルシートの 3つがあります。視覚ブラウザの環境設定で、どのスタイルシートを文書のレイアウトに当てはめるかを設定することができますが、特に指定がなければデフォルトでは、ユーザスタイルシートよりも制作者スタイルシートの方が優先順位が上で、さらに、制作者スタイルシートとユーザースタイルシートは、視覚ブラウザの内蔵しているデフォルトスタイルシートよりも優先順位が高くなります。つまり、3種類のスタイルシートを同時にレイアウトに当てはめた場合、制作者スタイルシート, ユーザースタイルシート, デフォルトスタイルシートの順で指定を上書きして反映します。
たとえば、デフォルトスタイルシートの文字色が black でも、ユーザースタイルシートで white が指定されている場合、デフォルトスタイルシートの black の指定がユーザースタイルシートの white の指定によって上書きされます。さらに、そこに制作者が文書内にスタイルシートを組み込んでいて、文字色に red の指定を行っている場合、ユーザースタイルシートの white の指定は、制作者スタイルシートの red の指定によって上書きされ、最終的な文字色は red が反映されることになります。
文書に制作者スタイルシートを組み込む方法には、次の 4つがあります（指定が上書きされる優先順で示しています）。
たとえば、link要素で参照したスタイルシートのファイルの中に @import で別のスタイルシートファイルを参照しており、そこに文字色を black に指定していても、link要素で参照したスタイルシートのファイルに文字色を white にする指定がある場合、@import で参照したスタイルシートの black の指定は、link要素で参照したスタイルシートの white の指定によって上書きされます。さらに、文書内に style要素でスタイルシートを組み込んでいて、文字色に red の指定を行っている場合、link要素で参照したスタイルシートの white の指定は、style要素の red の指定によって上書きされます。そして、さらに各要素に対して直接、style属性で文字色が blue に指定されている場合、style要素の red の指定は、各要素に直接指定されている style属性の blue の指定によって上書きされ、当該要素における最終的な文字色は blue が反映されることになります。
セレクタ（selector）が具体的であればあるほど、スタイルは上書きして反映されます。通常の要素名だけをセレクタにした場合よりも、特定の要素の子要素としてセレクタにした場合や、class属性や id属性で、同じ要素名でも詳細な区分けが行われたセレクタほど優先順位が高くなります。
ul { color : black ; }
li { color : black ; }
ul li { color : red ; }
li.ex { color : green ; }
.ex { color : blue ; }
li#ex { color : maroon ; }
#ex { color : gray ; }
......
<ul>
<li>ul li { color : red ; } が反映される</li>
<li class="ex">li.ex { color : green ; } が反映される</li>
<li id="ex">li#ex { color : maroon ; } が反映される</li>
</ul>
上記の例では、ul要素と li要素は、black になっていますが、ul要素の子要素である li要素に対して red の指定があるため、通常の li要素は、red が反映されることになります。また、ex というクラス名で具体化することによって、li.ex要素には、green が反映されます。続いて、li要素がつけられていない ex だけのクラス名のセレクタがありますが、li.ex としている方が具体的であるため、li.ex が優先されます。ID名の部分も同じで、li#ex要素は、maroon が優先して反映されます。
Cascade とは、順位立てられたリストであるように、CSS では、セレクタと宣言ブロックのルールセットをいくつも並べたリストの中で、同じセレクタがある場合は、あとに並べられているものほど優先され、指定が上書きされます。つまり、リストの中で位置があとになっている指定ほど、優先順位が高くなります。
h1 { color : black ; }
h1 { color : red ; }
h1 { color : blue ; }
たとえば、上記の場合は、一番後に記述されている "h1 { color : blue ; }" の指定が優先され、h1要素の文字色は blue が上書きして反映されます。
セレクタ（selector）による優先順位とスタイルシートのルールセットが並べられたリストの中での位置による優先順位に関係なく、強制的に指定のスタイルを優先させたい場合には、セレクタの宣言ブロックをセミコロン（;）で閉じる前の部分に "!important" を前置します。これにより、ユーザースタイルシートを制作者スタイルシートよりも優先させることもできます。
ul,li { color : black !important; }
ul li { color : red ; }
li.ex { color : green ; }
.ex { color : blue ; }
li#ex { color : maroon ; }
#ex { color : gray ; }
h1 { color : black !important; }
h1 { color : red ; }
h1 { color : blue ; }
具体的なセレクタになる li.ex要素や li#ex要素が存在しても、また h1要素もすべてセレクタ（selector）やリストの中での位置に関係なく強制的に文字色は black が反映されます。ユーザースタイルシートに "!important" を使うことで、制作者スタイルシートのスタイルを上書きすることもできます。