Languages
[Edit]
EN

HTML - how to add css to html?

16 points
Created by:
JustMike
26120

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:

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

    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.
    Native Advertising
    50 000 ad impressions - 449$
    🚀
    Get your tech brand or product in front of software developers.
    For more information contact us:
    Red dot
    Dirask - friendly IT community for everyone.

    â€ïžđŸ’» 🙂

    Join