Style Types
There are a number of different style types, ranging from the default styles set up by your browser (and any user styles you may have applied in your browser to override its defaults), through inline or embedded styles, to external style sheets. The styles defined have a hierarchy of precedence, from low to high.
Default Styles
The styling with the lowest level of precedence is the default styling applied by a web browser. These styles are created as a fallback for when a web page doesn’t have any styles defined; they are intended to be a generic set of styles that will display reasonably well in most instances.
Pre-CSS these were the only styles applied to a document, and only a handful of them could be changed by a web page (such as font face, color, and size, plus a few element sizing arguments).
User Styles
User-defined styles have the next-highest precedence; they are supported by most modern browsers but are implemented differently by each. If you would like to learn how to create your own default styles for browsing, use a search engine to enter your browser name followed by “user styles” (for example, “Firefox user styles” or “IE user styles”). Figure 18-2 shows a user style sheet being applied to Microsoft Internet Explorer.
If a user style is assigned that has already been defined as a browser default, it will then override the browser’s default setting. Any styles not defined in a user style sheet will retain their default values as set up in the browser.
External Style Sheets
Styles assigned in an external style sheet will override any assigned either by the user or by the browser. External style sheets are the recommended way to create your styles because you can produce different style sheets for different purposes, such as styling for general web use, for viewing on a mobile browser with a smaller screen, for printing purposes, and so on. Just apply the one needed for each type of media when you create the web page.
Internal Styles
Internal styles, which you create within <style>...</style> tags, take
precedence over all the preceding style types and so can be used to
override the styling in any external style sheets loaded in at the same
time. At this point, though, you are beginning to break the separation
between styling and content.
Inline Styles
Lastly, inline styles are where you assign a property directly to an element. They also have the highest precedence of any style type, and are used like this:
<a href="http://google.com" style="color:green;">Visit Google</a>
In this example, the link specified will be displayed in green, regardless of any default or other color settings applied by the browser or by any other style sheet, whether directly to this link or generically for all links.
Note
When you use this type of styling you are breaking the separation between layout and content, and therefore it is recommended that you do so only when you have a very good reason.