programming

html

css

import

include

javascript

1 more ...

[Edit]

HTML - how to add css to html?

2 contributors

7 contributions

0 discussions

16 points

Created by:

JustMike

3497

There are approaches ways to attach styles to HTML. Most common ways are link tag, style tag and inline style. This article focus on how to attach styles to HTML different.

Quick popular solutions:

// 1. Link to stylesheet file
<link rel="stylesheet" type="text/css" href="styles.css" />

// 2. Embeded style
<style>
  
    body {
      background: red;
    }

</style>

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

Bellow are presented different solutions with 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:

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:

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:

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:

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:

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; }'));
    // appending another rules

    document.head.appendChild(element);

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

Result:

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: