This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by wolfie
over 9 years

CSS within HTML and as a separate file.

When CSS tags can be added within the HTML file itself using style<> tag

Ex: <>style p { color: purple; } </>style

What is the purpose or when it is absolutely necessary to use CSS as a separate file to support the HTML page?

Answer 53c6ee7f80ff33d6a9004616

9 votes

Permalink

When is it necessary to use external CSS files? Always. What is the purpose? To prevent repetition and cloning errors.

One style sheet, one file, many web pages tied to it with <link>. This is the power of external style sheets. They can be applied to an entire site, or a large part of one. They can allow any page to load any plug-in so long as they link to the associated style sheet.

When we create a webpage with embedded styles, which is what <style></style> is, those style rules can only apply to that single document. Once the page is gone, so too are all the styles that came with it. If we wish to clone that page to create a new one with similar layout and styles, we must clone the embedded styles, as well. Say we then make a couple a small changes to the style rules. Now this style sheet is nearly the same as the one it is cloned from, but not exactly the same. Months down the road we decide to clone a page and this time we take the second clone, not the original page. Now we have two pages with different style rules than the original.

You see where this is going, eh? Not only are we piling up on duplicate style sheets, we are bulking up our site with needless excess. If all pages are drawing from the same external style sheet, cloning them (spinning off new pages) is a breeze. They will all look like spitting images of each other.

There are occasions where a page will have the fit and finish of the site, but may have one or two special rules that do not/will not ever be used anywhere else on the site. In this case, we would link to the site styles, and either embed the custom styles in this page, or create a custom style sheet that we link to after the main style sheet is loaded.

I say after, because no doubt the custom styles have changed some of the site styles. In order for those changes to hold sway, they must appear farther down the cascade (if they have the same specificity) or have greater specificity than the rules they are overriding.

CSS related terms to explore: selector, cascade, specificity, inheritance. Also, external, embedded and inline styles:

<head>
<title>Three ways to apply style rules</title>
<link rel="stylesheet" href="styles.css" title="external style sheet">
<style>
    /* embedded style sheet */
    h1 {
        font-size: larger;
    }
</style>
</head>
<body>
    <h1 style="font-size: 2em">Inline style on top level heading</h1>
</body>

The above illustrates the three basic methods for applying style rules. Note that the inline rule will override the embedded rule (it has way higher specificity) and the embedded rule will override the default style rule (assuming same specificity) because it is lower down in the cascade.

Ask questions if you are still not quite up to speed with this.

points
Submitted by Roy
over 9 years

3 comments

wolfie over 9 years

Thank you Roy. For such a detailed answer. Now I can understand the purpose of external CSS file and style rule clearly.

Alex W about 9 years

Very helpful thank you.

lilwezzy232 over 8 years

Thanks next time im going to do the truffle shuffle for you!!!!