CSS styles are usually defined in external stylesheet files, loaded in the head of an HTML document with link tags. (See example below.) They are applied to a page in the order in which they are called. If a single element has two separate style rules applied to it, the attributes that do not conflict are applied together. If the attributes do conflict, any styles defined in the first file loaded may be overwritten by style changes in the next file, and so on. For example, this code would apply the color and font-size attributes specified in the first rule to all paragraphs, including those modified by the second and third rule, but the third rule overwrites the color attribute:

.example p {color:#363;font-size;0.75em;}
.example p.decorative {font-style:italic;}
.example p.urgent {color:#f00;}

<div class="example">
<p>This is a normal paragraph</p>
<p class="decorative">This is a decorative paragraph</p>
<p class="urgent">This is an urgent paragraph</p>
</div>

This permits us to make useful cascades by creating a generic reset.css file with rules that make all the semantic HTML elements look the same across different browsers, and loading that file first. Then we can load progressively more specific rules in separate files for the site-specific CSS rules, and then the page-specific CSS rules. Each of these sets of rules will inherit the attributes from previously defined rules.

CSS may also be declared directly in the head of an HTML file, by placing the CSS rules between style tags, as well as directly within the HTML element by adding a style=“…” attribute. Styles defined within the page overwrite styles imported from external files, and styles defined within an element, overwrite any previously defined styles. Using these forceful techniques can make your code very brittle, and should be avoided.