Internal + External Stylesheets

Is it possible to have both internal and externa stylesheets for the same web page?

If so, does one have priority over the other?

Yes, it is possible, but you should avoid the
former as though it was the plague covid 19 :rofl:

What is wrong with internal stylesheets?

First off, I am working on a simple project right now with maybe only a dozen web pages, so in that case it is probably less of a sin, right?

But even for larger websites, I was wondering if i could have common styles in an external stylesheet, and then styles specific to a particular web page be internal to that web page?

Again, I haven’t coded HTML and CSS in years, so trying to get back in the swing of things!

All external style sheets are cached which means even though the linked stylesheet is in every subsequent web page only one stylesheet is loaded. This makes subsequent web page rendering just a little bit faster. Same applies to external JavaScript files.

As far as priority is concerned the the C in CSS stands for cascading and the last CSS tag has priority.

Try a simple test by setting two different background-colors and see which one is rendered.

You lost me. You mean set a different color on the same element in both an internal and external stylesheet and see what happens?

Create a stylesheet and add the following lastline in the stylesheet to ensure it overwrites any previous declaration:

body {background-color: cyan;}

In your web page heading link the stylesheet followed by this:

<style>
/* existing styles */
body {background-color: lime;}
</style>

Call the web page and notice the background color.

Repeat the above but have the linked stylesheet after the inline style and spot the difference.

1 Like

@John_Betong,

Very cool!

I learn something every day from you! :+1:

1 Like