linkingWithCSS

<!DOCTYPE html>
<head>
  <meta charset="uf-8">
  <meta name="viewport" content="user-scalable=no">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0; padding: 40px; font-family: monospace;}

/* inline style */
    *[style] {
      border: 2px dotted red;
    }
    
    /* blank link target */
    a:not([href]),a[href="#"],a[href=""],a[href*="javascript:void"] {
      background: lightGray;
    }
    
    /* image with no alt text */
    img:not([alt]), img[alt=""] {
      border: 2px dotted red;
      opacity: 0.8;
    }

/* Missing document language */
    html:not([lang]), html[lang=""] {
      border: 10px solid red;
    }
    
    /* setting for error field for head */
    head {
      font-family: monospace;
      display: block;
      border: 1px solid lightGray;
      padding: 20px 10px 10px;
      width: 100%;
      position: absolute;
      transition: opacity 0.5s;
      background: rgba(255, 255, 255, 0.9);
    }
    head:hover {
      opacity: 0;
    }
    head:before {
      content: "<head>";
      font-size: 10px;
      background: gray;
      color: white;
      position: absolute;
      left: 0;
      top: 0;
    }
    
    /* charset must be set as UTF-8 */
    meta[charset]:not([charset="UTF-8"]) {
      display: block;
      color: red;
    }
    meta[charset]:not([charset="UTF-8"]):before {
			  content: "charset is not set \"UTF-8\" correctly"
    }

/* charset must be first-child of head element */
    meta[charset]:not(:first-child) {
      display: block;
      color: red;
    }
    meta[charset]:not(:first-child):before {
			  content: "charset is not placed beginning of <head>"
    }

/* charset must be first-child of head element */
    meta[name="viewport"][content*="user-scalable=no"],
    meta[name="viewport"][content*="maximum-scale"],
    meta[name="viewport"][content*="minimum-scale"] {
      display: block;
      color: red;
    }
    meta[name="viewport"][content*="user-scalable=no"]:before,
    meta[name="viewport"][content*="maximum-scale"]:before,
    meta[name="viewport"][content*="minimum-scale"]:before {
			  content: "viewport must be scalable"
    }

/* form element */
    input:not([name]),
    select:not([name]),
    textarea:not([name]) {
      display: block;
      border: 4px solid red;
    }
    
    /* form without action */
    form:not([action]),
    form[action=""],
    form[action="#"] {
      display: block;
      border: 1px solid red;
    }

/* form without method */
    form:not([method]),
    form[method]:not([method="get"]):not([method="post"]) {
      display: block;
      border: 1px solid red;
    }

/* empty interactive elements */
    button:empty,
    a:empty {
      border: 1px solid red;
    }
    button:empty:before,
    a:empty:before {
      color: red;
      content: "empty";
    }

</style>
</head>

<body>
  <a name="anchor"></a>
  <p style="color: red;">paragraph <a href="javascript:void(0)">with</a> style attributes</p>
  <img src="" width="200" height="300">
  
  <form action="/" method="POS" id="sampleform">
    <input type="hidden">
    <input type="text">
    <textarea>textarea</textarea>
    <select>
      <option selected>option-1</option>
      <option>option-2</option>
      <option>option-3</option>
    </select>
    <button></button>
  </form>
</body>

https://d3js.org/d3.v4.min.js