Languages
[Edit]
EN

HTML - how to add css to html?

16 points
Created by:
JustMike
28980

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

Most commonly approaches are: using link tag, style tag and  style attribute.

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>

This article is like overview of different approaches 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.

    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