Questions: When should i use the external stylesheet?

Hi @edwardcodes! Thank you for opening this question! 😊

There are 3 primary reasons for using an external stylesheet:

Separation of content & structure (markup) from design & layout.
Maintainability of styles without having to update HTML pages
Performance / page load times - external stylesheets can make pages load faster for a website that has many pages, loading the styles once is a good idea.

Having said that, there is a trend towards "Functional CSS" see: github.com/dwyl/learn-tachyons which means you use "lego-like CSS individual attribute building blocks" to create your styles and "inline styles" with many front-end frameworks which "compile" the entire "application" ("app") into a single JavaScript file including HTML templates, JS "logic" and Styles! This used to be (widely) considered an "Anti-pattern" because when you want to change one Style the entire application needs to be "re-compiled" and the end-user needs to re-download the entire "bundle" which can often be 2Mb+ (in the case of an Angular or React app...) which means that

Conclusion

People learning HTML & CSS should always learn all 3 methods of including CSS Styles:

On-page styles (defined above or below the content) using the <style> tag e.g:

<p class="red"> My Red Text </p> 
<!-- somewhere  in the same HTML doc  --> 
<style> 
.red { color: red; }
</style>

External stylesheet a separate file that is included in the <head> of the HTML document.
In-line styles defined within the HTML element e.g: <p style="color: red">My Red Text</>

Each of these methods has a distinct and valid use-case. e.g:

On-page styles: an HTML Email Template when you want a specific "look & feel" for an email you are sending to someone.
External stylesheet: for a website that has many pages and you want them all to look the same, but you only want to make a single change when the presentation, layout or colorscheme needs to be updated; this is typically a "Content Rich" website which is managed through a "Content Management System" ("CMS") where "non-technical" people add articles, news or "posts" regularly, but they don't update the CSS.
In-line styles: a "Single Page" (Web) Application (often abbreviated to "SPA") which has a high degree of user-interaction and most of the "App" is written in JavaScript (or Elm...) and "compiled" into a single file (all the structure, logic and styles are treated as one thing!)

@edwardcodes please let us know if this answers your question? if you found additional info/insight while researching it, please share links so the community can learn! Thanks! (keep the questions coming!) 😉

hi @edwardcodes External stylesheets allow you to completely separate your CSS from your HTML. Here the style is included in one or more css files and reference from your HTML using the LINK tag:

Link Tag Stylesheet Attributes The link tag has the following attributes:

rel – the relationship of the link to the document href – in this case the location of the stylesheet to be included type – the type of file it is (in our case text/css) media – for what media the stylesheet is to be included screen – normal computer browser – on screen print – on paper (printer friendly) aural – for speech synthesizers embossed – intended for Braille printers all – intended for all types of media The benefits of using an external style sheet are:

everything is stored within a single file. once changed/updated, the changes are reflected on all other pages that reference the stylesheet. this makes it easier to maintain larger websites. pages load quicker once the main CSS file has been cached. as a result bandwidth goes down. effectively, you’re able to change the entire look and feel of a website through a single file. Thanks.

dwyl / learn-html5

Questions: When should i use the external stylesheet? #33

Conclusion