Css styling html embedded code

When I embed a piece of html code, it seems that it won't be effected by the linked css file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>worldmapper BETA</title>
    <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <embed type="text/html" src="test.html">

  </body>
</html>

Solution

Correct. <embed> acts like <iframe> (just not so well defined, so you should use <iframe> instead).

You are loading a separate document in a sub-window.

For the CSS to apply, you need to link the CSS to that document.

Consider using a template system which you apply either server side or at build time instead. Then your single web page will consist of a single HTML document.