Beginning ASP.NET 4.5 in CSharp and VB Opsylum

86 x CHAPTER 3 DESIGNING YOUR WEB PAGES
Choosing among External, Embedded, and Inline Style Sheets
Because you have so many options to add style sheets to your site, what’s the best method to use? In
general, you should give preference to external style sheets over embedded styles, which in turn are
preferred over inline styles. External style sheets enable you to change the appearance of the entire
site through a single file. Make one change to your external style sheet file, and all pages that use
this style sheet pick up the change automatically.
However, it’s perfectly acceptable to use embedded and inline styles as well in certain circumstances.
If you want to change the look of a single page, without affecting other pages in your site,
an embedded style sheet is your best choice. The same applies to inline styles: if you only want to
change the behavior of a single element in a single page, and you’re pretty sure you’re not going to
need the same declaration for other HTML elements, you could use an inline style.
An important thing to consider is the way that the various types of style sheets override each other.
If you have multiple identical selectors with different property values, the one defined last takes precedence.
For example, consider a rule defined in an external style sheet called Styles.css that sets
the color of all tags to green:
h1
{
color: Green;
}
Now imagine you’re attaching this style sheet in a page that also has an embedded rule for the same
h1 but that sets a different color:
h1
{
color: Blue;
}
With this code, the color of the actual tag in the page will be blue. This is because the embedded
style sheet that sets the color to blue is defined later in the page, and thus overrides the setting in
the external file. If you turn the styles around like this,
h1
{
color: Blue;
}
the heading will be green, because the setting in the external style sheet now overrules that of the
embedded style.
The same principle applies to inline styles. Because they’re defined directly on the HTML elements,
their settings take precedence over embedded and external style sheets.
It’s also good to know that CSS generally overrules attributes on HTML elements. For example, if
you have a CSS rule that sets the width and height of an image, the height and width attributes