CSS3 Cascading Principals #3 External Styles

Date: May 3rd, 2011
Author: marcmitchell

Rounding out our cascading series is the external style sheet; a method that gets its descriptor because it’s not something that will actually be contained within your HTML document, but rather a separate file with the .CSS extension.
There are a couple of reasons you might want to break out your CSS file from your HTML document. For one, it allows you to select multiple style sheets, from which you can pick and choose styles from within your markup; and allows you to create multiple styles that are even further segmented. But perhaps the biggest windfall is that you can apply those style sheets across multiple pages, saving you the effort of having to re-create them in each of your HTML documents. Not only is this a tremendous time saver, but it also cuts down on potential mistakes that might be made across a large project.
Externals style documents also have the least clout in our CSS order-of-importance hierarchy, so if an in-line style or head style addresses an element, they will take precedence.

Link syntax.
<link rel=”stylesheet” type=”text/css” href=”style.css” />

Before your HTML document can begin pulling styles, however, you’re going to need to tell it where those styles are located. By linking your style sheets, the document knows to treat it as an extension of itself, and when then apply those styles just as if they appeared in the head of the document. Which is why, when we insert a <link> element, we place it in the head of our document. It works as kind of a placeholder for “styles yet to be determined”.
If you have multiple style sheets, you just repeat the process for each .CSS file that you’d like to call. You only need to include .CSS files that you are using for that particular document, and it’s important to make sure that there are no conflicts. If you have different style definitions that are attempting to alter the same element, the last style sheet you link to will be applied.
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support…

[ View Full Tutorial ]

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)
CSS3 Cascading Principals #3 External Styles, 0.0 out of 10 based on 10 ratings

Leave a Reply