Page Title

CSS: Cascading Style Sheets

One aspect of the "cascade" in CSS involves understanding external vs. embedded vs. inline styles.

External: An external style sheet is a file with a .css extension that can be applied to as many pages as desired using the HTML link element.
An example: <link src="styles.css" rel="stylesheet">
Note that Sololearn does not use the <link> element given we are working in a special Sololearn environment that automatically links the CSS you write in the CSS window with the HTML code in the HTML window. But in the real world, you will want to put as many styles in the external style sheet as possible so that you can write a single CSS file that can be applied to as MANY pages in your web site as desired! Updating an external style sheet updates ALL pages that are linked to it!!
Embedded: An embedded style sheet is applied to ONE page using the HTML <style> element. Use an embedded style sheet when your styles apply to ONLY that page. An example is provided in the <head> section of this HTML window using the <style>...</style> element.
Inline: Inline styles are applied to only ONE html element on ONE page using the HTML style="css declaration" attribute such as style="color: #ff0;" in the previous <dt> element. Use inline styles extremely sparingly. They are difficult to read given they are intermixed with the HTML on the page, and are also extremely time consuming and difficult to maintain! An example is provided in the <span> element in this definition.

The Cascade...

The style that is closest to the content "wins." So if an inline, embedded, and external style sheet all set the font color for an <h1> element, for example, the inline style would win!

Your Choice of External vs. Embedded vs. Inline is Important!

But do not use inline styles unless you have a VERY good reason to do so given their inherent disadvantages. Put all styles in your external style sheet to leverage your ability to reuse, validate, and maintain the appearance of your web site! If you use external styles you will be able to reskin a web site very quicky! If you use inline styles you'll have a royal mess.

See csszengarden.com for a wonderful demonstration of the power of CSS!

CSS: External vs. Internal vs. Inline cascade