How To Add CSS

To add CSS (Cascading Style Sheets) to your HTML document, you have a few different options. Here are the common methods:

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

Inline CSS
Internal CSS
External CSS

Inline CSS:

Inline style are applied directly within the HTML tags using the style attribute.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Inline Styles Example</title>
</head>
<body>
  <p style="color: blue; font-size: 18px;">This is a paragraph with inline css.</p>
</body>
</html>

You can click on above box to edit the code and run again.

Output

This is a paragraph with internal styles.

Internal CSS

Internal styles are defined within the <style> tag in the HTML document's <head> section.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Internal Styles Example</title>
  <style>
    p{
      color: red;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with internal styles.</p>
</body>
</html>

You can click on above box to edit the code and run again.

Output

External CSS:

External styles are placed in a separate CSS file and linked to the HTML document using the <link> tag in the <head> section.

styles.css:

Example

/* styles.css */
p {
  color: green;
  font-size: 22px;
}

You can click on above box to edit the code and run again.

Output

index.html:

Example

<!DOCTYPE html>
<html>
<head>
  <title>Internal Styles Example</title>
     <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>This is a paragraph with internal styles.</p>
</body>
</html>

You can click on above box to edit the code and run again.