CSS External Stylesheets – Giving CSS its own file

CSS

0 Comments

External stylesheets allow you to put your CSS code in its own file.

Example

<!doctype html>
<html>
    <head>
        ...

        <link rel="stylesheet" href="/css/style.css">
    </head>

    <body>
        ...
    </body>
</html>
Including external stylesheets (Line 6)
External stylesheets can be loaded with the <link> tag (in the <head> section of your HTML file). Don't use the <style> tag in external stylesheets (that's HTML, and it's only used if you're putting CSS directly in the HTML file).

It's usually better to put your CSS in its own file

Most of your CSS will be used on many pages of your site. You don't want to have to paste the same code on multiple pages (and have to keep the code in sync as you make changes).

CSS files don't change often and can be cached (saved) by the browser. This means the CSS files usually won't need to be downloaded again, which makes pages load faster.

Leave a Comment