Copied to clipboard

Including CSS on your website

There are three different ways you can include CSS on your website. There are a few things to know about how this impacts the behavior of the CSS.

Inline

Inline CSS is written inside of your HTML tags. 

<div style="color:red; background-color:black; padding:10px;">Welcome to my website!</div>

This CSS only applies to the page that you used it on. Any CSS put inline will overwrite any identical styles included elsewhere in the file or external stylesheet.

In your HTML file

Another option is to put the styles in the HTML file you are editing, between <style></style> tags.

<style>
.body {
    background-color:black;
    color:white;
}
</style>

Like inline, this only applies to the HTML page that you put this code on.

You can place this anywhere on your HTML page, but it's recommended to put <style></style> tags in the <head></head> area.

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

In an external stylesheet

Linking to a stylesheet externally makes it easy to use a single stylesheet across multiple pages. When linking to a stylesheet externally, you do not need <style></style> tags.

This code always goes inside of your <head></head> tags on the HTML file you'd like to include the stylesheet on.

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

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