Where is CSS?

There are 3 places you can put CSS.

Inline CSS

Place your CSS within the content of an HTML page. Here's an example of inline CSS:

<p style="color: red;">hello world</p>

Which would create the following element:

hello world

Any HTML element can have a CSS style inserted inside it. The style is a kind of attribute, similar to the href attribute in links.

Avoid Inline CSS
Inline CSS mixes the content and style of your web page, which makes it harder to maintain your code, so it should generally be avoided. However, sometimes it's convenient to quickly edit the appearance of an HTML element on the spot, and what's the worst that can happen?

(Inline CSS can also be useful when demonstrating CSS, so it will be used in some examples in this tutorial.)

External CSS file

Usually, you should use an external CSS file to add CSS to a web page. This keeps your content and styles separate, and makes it easy to share CSS between different pages. Here's how to use external CSS: