Languages
[Edit]
EN

HTML - add css to html

19 points
Created by:
Palpys
764

In this article, we would like to show how to add styles to HTML code (how to add CSS to HTML).

The most popular approaches are: using link tag, style tag and  style attribute.

Quick solutions:

1. Link to stylesheet file (*.css file):

<link rel="stylesheet" type="text/css" href="/path/to/styles.css" />

Hint: put it to <head> element.

2. Embedded styles:

<style>

    body {
        background: red;
    }

</style>

Hint: put it somewhere in the source code.

3. Inline styles:

<p style="font-size: 20px; color: brown;">Brown text ...</p>

 

This article is like an overview of different approaches with examples.

Practical examples

1. Link to stylesheet file example

index.htm file:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  Red web page...
</body>
</html>

styles.css file:

body {
    background: red;
}

Result:

Link to stylesheet file example.
Link to stylesheet file example.

2. Embed CSS (style tag) example

index.htm file:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
  
    body {
        background: red;
    }

  </style>
</head>
<body>
  Red web page...
</body>
</html>

Result:

Embed CSS (style tag) example.
Embed CSS (style tag) example.

3. Inline styles example

index.htm file:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body style="background: red;">
  <p style="font-size: 20px; color: brown;">
    Red web page...
  </p>
</body>
</html>

Result:

Inline styles example.
Inline styles example.

4. Import of stylesheet file example

index.htm file:

<!doctype html>
<html>
<head>
  <style>

    @import 'styles.css';

  </style>
</head>
<body>
  This is red web page...
</body>
</html>

styles.css file:

body {
    background: red;
}

Result:

Import of stylesheet file example.
Import of stylesheet file example.

5. JavaScript CSS file injection example

index.htm file:

<!doctype html>
<html>
<body>
  <p>This is red web page...</p>
  <script>
  
    var element = document.createElement('link');

    element.addEventListener('load', function() {
        document.body.innerHTML += '<p>Styles loaded!</p>';
    });

    element.addEventListener('error', function() {
        document.body.innerHTML += '<p>Styles error!</p>';
    });

    element.setAttribute('rel', 'stylesheet');
    element.setAttribute('href', 'styles.css');

    document.head.appendChild(element);

  </script>
</body>
</html>

styles.css file:

body {
    background: red;
}

Result:

JavaScript CSS file injection example.
JavaScript CSS file injection example.

6. JavaScript Embed CSS (style tag) injection example

index.htm file:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <p>This is red web page...</p>
  <script>
  
    var element = document.createElement('style');

    element.appendChild(document.createTextNode('body { background: red; }'));
    // Add more rules here ...

    document.head.appendChild(element);

  </script>
</body>
</html>

Result:

JavaScript style tag injection example.
JavaScript style tag injection example.

7. JavaScript inline styles example

index.htm file:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body id="page">
  <p>This is red web page...</p>
  <script>
  
    var element = document.getElementById('page'); // or document.body

    element.style.background = 'red';
    element.style.color = 'brown';
    //element.style.cssText = 'background: red; color: brown;';

  </script>
</body>
</html>

Result:

JavaScript inline styles example.
JavaScript inline styles example.

    Alternative titles

    1. HTML - how to attach css to html?
    2. HTML - how to add css file to html?
    3. HTML - how to add style file to html?
    4. HTML - how to attach style file to html?
    5. HTML - different ways how to attach style to html?
    6. HTML - different ways how to add style file to html?
    7. HTML - how to include css to html?
    8. HTML - how to import css to html?
    9. HTML - how to import style to html?
    Donate to Dirask
    Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
    Join to our subscribers to be up to date with content, news and offers.

    HTML

    Native Advertising
    🚀
    Get your tech brand or product in front of software developers.
    For more information Contact us
    Dirask - we help you to
    solve coding problems.
    Ask question.

    ❤️💻 🙂

    Join