Ways to include CSS on your website

CSS stands for Cascading Style Sheets. It’s important to keep the full name in mind because the way CSS works is it ‘cascades’ like a waterfall. This means your browser interprets CSS from the top of the page, to the bottom of page.

A lot of beginner-frustration with CSS stems from not realizing how CSS how the potential to overwrite itself.

There are three different ‘ways’ you can add CSS to your website, and each of these ways have special rules that, once you learn them, things start to make a lot more sense!

Note: If your website uses iFrames, the rules are a little bit different. iFrames can only 'see' the CSS that is included on the page being framed (known as the 'origin' page). 

Inline

Inline CSS is inside of your HTML tags. CSS that is included inline is executed before the other methods. It looks like this:

<div style="color:red; background-color:black; padding:10px;">Welcome to my website!</div>
Code language: HTML, XML (xml)

This is considered one of the least optimal ways to add CSS, because you need to remember specifically which lines of code you added it to.

At the bottom of your HTML file

You can also include some CSS at the end of your HTML file, although it needs to be inside of style tags. This is because HTML files automatically parse everything as HTML unless you explicitly state it is a stylesheet (which is what the style tags are for). Here is an example of how that would look:

<style> .body { background-color:black; color:white; } </style>
Code language: HTML, XML (xml)

When you include CSS at the bottom of your HTML file, it only applies to that particular page. This can be useful sometimes when you want a particular style just on one page, but it does tend to make things a little trickier to manage.

This CSS is interpreted before the styles in our external stylesheet, but after any CSS that comes on the HTML page before it.

In its own .CSS file

Finally, the ‘recommended’ way to include your CSS is through an external stylesheet. This just means the CSS exists in a separate file, one ending in .css.

You do not need style tags on your stylesheet.

You can include an external stylesheet by adding a line of code in between your head tags:

<head> <link rel="stylesheet" href="styles.css"> </head>
Code language: HTML, XML (xml)

The above example assumes that style.css is in your root or main folder. The same area as your index.html homepage.

You can adjust the link to find where the CSS file is located. See my links and images tutorial for more information.



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.

Leave a Comment