3 Ways to Include CSS in HTML

HeatherCSS, HTML, Tutorial0 Comments


“How do I include CSS in my HTML webpage?”

It’s a common question web developers find themselves asking at some point, and understandably so. Often novice web developers will find reach a point where they’ve gained a good understanding of HTML and CSS programming languages, but won’t understand exactly how the two fit together.

So how do we include our newly written CSS styles into an HTML webpage?

It turns out, there are actually 3 different ways to include CSS in HTML. Let’s take a look at each of these methods:

1. Using External Style Sheets

The first and most common way to add CSS to HTML is to use an external style sheet. It’s called an external style sheet because the CSS file is separate (external) to the HTML file that’s referencing it. When you’re linking CSS to HTML in this way, you’ll have two different files: one HTML file, and one CSS file.

To add the CSS to the HTML file, you’ll use a  <link> tag in the head portion of your HTML file. This link tag will tell your HTML file where to find your CSS file, and apply its styling rules to your webpage.

For example, let’s assume we have a folder that contains our HTML webpage and a CSS file called “styles.css”. Our HTML will need to include the link tag like this:

Since you’ve linked your HTML file by referencing the external stylesheet “styles.css”, all of the CSS style rules it contains will be applied to your HTML file.

Note that you can use either an absolute or relative path to reference your external stylesheet.

2. Adding CSS to the HTML File

Another way to include CSS in HTML is to write your CSS styling rules directly within your HTML file. Using this method, you would only have a single HTML file – no external stylesheet would be necessary.

Just as before, we want to include our CSS within the  <head> section of our webpage. This time though, instead of linking to an external style sheet, we’ll write our CSS within two  <style> tags. Let’s take a look at how this works:

As you can see above, we’ve creating a CSS rule directly in our HTML file that will apply to any  <h1> elements in our webpage. With this added code, any of these headings in our HTML file will now have blue text.

3. Using Inline CSS in an HTML File

Finally, CSS rules can be applied to elements directly by adding a  style="" attribute to an element’s opening tag. This will cause the styles to be applied only to that single element.

Please note that this isn’t considered a “best practice” way to apply CSS. Ideally only classes and ID attributes should be referenced to style HTML, and not written into the HTML itself. However, it’s perfectly find to use in a pinch, and especially helps when you’re still learning CSS styling.

In this inline CSS example, our first heading will have a green background applied to it, since the style attribute can been written directly into the  <h1> opening tag. However, this style will not be applied to our following paragraph, since this lies outside of the  h1 element.

With these 3 methods in your arsenal, you’ll have no problems linking your CSS and HTML files, and will be creating beautiful webpages in no time flat!

Still have questions? Leave a comment below and I’ll do my best to help! Happy coding!

Leave a Comment