Given that the WYSIWYG editor uses an <iframe>
and an <iframe>
is its own document, your CSS won't doesn't apply to the contents of the <iframe>
.
When you use an <iframe>
the resulting DOM structure looks a little like this...
<html>
<head>
<title>iframe example</title>
<link type="text/css" rel="stylesheet" href="outer.css" />
</head>
<body>
<div>
The contents of the outer document!
<iframe>
<html>
<head>
<title>iframe example</title>
<link type="text/css" rel="stylesheet" href="inner.css" />
</head>
<body>
<div>
The Contents of the iFrame!
</div>
</body>
</html>
</iframe>
</div>
</body>
</html>
... and the rules defined in outer.css
don't apply to the contents of the <iframe>
, and the contents of inner.css
don't apply to the outer document.