CSS: Add CSS to HTML

By Xah Lee. Date: . Last updated: .

3 ways to add CSS

3 ways to add CSS to HTML files.

Inline style (for single html tag)

If you want to specify a style only for one particular HTML tag in a HTML file, you can embed a attribute style=val inside the tag, like this:

<p>… this is <span style="color:red">RED</span></p>

In-page style (for single html file)

If you want to use CSS only for a single file, you can embed it in HTML file's header using the <style> tag, like this:

<head>

<style>
p {color:red}
</style>

<title>My Title</title>

</head>

This will make all “p” (paragraph) elements red.

External style sheet (for entire site)

To add CSS in your HTML file, do like this:

…
<head>
<link rel="stylesheet" href="mystyle.css" />
<title>My Title</title>
</head>
…

In the above example, whenever the HTML file is loaded, it will load the file mystyle.css. The <link …> line must be inside the “head” tag.

If you use the above for all your files, then you can control your whole site's appearance by modifying the single CSS file.

CSS Basics