<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
You will notice that this tag is a self-closing tag that makes use of the res, type and href attributes. When referencing a CSS file, the res and type attributes will always remain the same. The href attribute, however, just like we have seen previously with our hyperlinks, will contain a path to your css file. Remember the usual rules of absolute/relative links apply here, so ensure that your path is correct if you nest your.css file within a subfolder.
This approach is favourable as it keeps the codebase in one single file which makes writing and maintaining the CSS code much easier going forward. It also means we only have to update our code in one place and have it propagate across multiple webpages. This approach does have its drawbacks, however, and is not always ideal, or necessary. Having the css file as a separate resource means that the browser has to request an additional asset (the.css file), which will have a small impact on the speed at which your page loads. Though this difference may be incredibly small, milliseconds can really count on larger production websites.
Internal style sheets are used for embedding CSS rules directly to a webpage. This is useful if your webpage has a small number of rules that apply only to that page; instead of including the unique styles in the main css file that is used across your entire website, you can save space in your.css file by moving these unique styles directly into the relevant webpage. This is nice and simple to do as well – we simply add an opening and closing HTML <style> tag to the head of our webpage and put our styles in there. An example can be seen below: