title: Add CSS to iframe elements using the page .css file
body: <p>First of all, it seems  like there are a lot of posts with the same kind of title, but none of them is focusing on the problem I am facing. That is the reason why I opened this new question, and I hope the title is explicit enought. </p>
  
  <p>I am working on a text-editor on my own, and I was using a <code>&lt;textarea&gt;</code> at first, but I wanted to add various styles to the elements I was writing. After reading a lot of topics about it, I decided to change my <code>&lt;textarea&gt;</code> for an <code>&lt;iframe&gt;</code>.</p>
  
  <p>Before trying anything new with design or whatever, I would like to have the same behaviour with this <code>&lt;iframe&gt;</code> and my previous <code>&lt;textarea&gt;</code>. But I am facing an issue :</p>
  
  <p>My <code>&lt;iframe&gt;</code> element is in a page, <em>index.html</em>, which is linked with a CSS file, <em>style.css</em>. I am able to change the global <code>&lt;iframe&gt;</code> design (like width, height, border...) of the frame in <em>style.css</em>, but I can't add a special design to the elements <strong>inside</strong> the <code>&lt;iframe&gt;</code> with properties I added in my <em>style.css</em>.</p>
  
  <p>I saw in the inspector that the iframe has a <code>#document</code> before any tag
  <a href="https://i.stack.imgur.com/w1iMh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w1iMh.png" alt="Here is the #document tag"></a></p>
  
  <p>But even if I tried to add this strange tag to the CSS, the style is not applied to the elements I want to change. </p>
  
  <p>So to be concise, my question is this one : <em>Is it possible to add some style to elements inside an iframe in the stylesheet file of the host page ?</em></p>
  
  <p>Here are some relevant parts of my code, which shows what I would like to do : add a custom font to the <code>&lt;p&gt;</code> tags inside the <code>&lt;iframe&gt;</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
    var frameElement = document.getElementById("text-field");
    var doc = frameElement.contentDocument;
    doc.body.contentEditable = true;
  }  </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
   margin : 0px;
   background : #f5f5f5;
   font-family: 'Roboto', sans-serif;
  }
  
  input:focus, textarea:focus {
   outline: none;
  }
  
  .text-editor {
   min-width : 800px;
   width : 1200px; 
   max-width : 1600px;
   min-height : 400px;
   height : 850px;
   max-height : 850px;
   background : #f0f0f0;
   box-shadow : 0px 1px 4px #ccc;
   margin : auto;
   overflow:auto
  }
  
  .text-editor .text-field {
   display : block;
   background-color : white;
   min-height : 300px;
   height : 600px;
   max-height : 600px;
   width : 90%;
   margin : auto;
   padding : 5px;
   border: 1px solid #ccc;
  }
  
  .text-editor .text-field #document html body {
   font-family: 'Source Code Pro', monospace;
   font-size : 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
   &lt;head&gt;
    &lt;title&gt;A Text Editor Project&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="CSS/style.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
    
    &lt;div class="text-editor"&gt;
     &lt;iframe class="text-field" id="text-field" src="about:blank" contenteditable="true"&gt;
     
     &lt;/iframe&gt;
    &lt;/div&gt;
   
   &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>