CSS: Add Style to HTML

By Xah Lee. Date: . Last updated: .

3 ways to add css

3 ways to add css to html files.

External style sheet

To add css file in html, add

<link rel="stylesheet" href="filename.css" />

inside html head tag.

this is most useful if you want to apply style to entire website.

<head>
 <link rel="stylesheet" href="my-style.css" />
 <title>My Title</title>
</head>

In-page style

Style for whole page

use html style tag to insert css rules in a html file.

if you want the style to apply to whole page, place it inside head tag.

<head>
 <title>untitled</title>

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

</head>

Style for an HTML element region

style tag can be combined with css scope feature, so it can be placed inside any html element, and has effect only in that region.

Inline style

Css style can be inserted to any html element by the html style attribute.

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

CSS Basics