CSS for a form called inside an iframe tag

Question

I have home page and one another form page. I have designed a form in my form page. This form is getting called inside an iframe of my home page when I click a navigation button. I have separately designed a CSS file for the form and included it in my header part but when I click on the link and my form shows up inside the frame of the home page it seems to have not included the CSS file for the form. It just shows a simple form without any styles whereas I have already included the CSS file for the form.

This is my code:

.center {
 margin: auto;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
}

.form-horizontal{
 margin-top: 3%;
 }

.form-group, fieldset {
 margin: 6px 0;
 }

label.control-label {
 display: inline-block;
width: 120px;
vertical-align: top;
}

.required {
 color: red;
 }

.sub-head{
text-align: center;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
width: 100%;
}

 input[type=submit] {
 width: 50%;
 padding: 12px 20px;
margin: 8px 0;
color: #00cc66;
 box-sizing: border-box;
}

input[type=reset] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
color: #00cc66;
box-sizing: border-box;
}

<div class="container">

<div class="main">

    <iframe id="formframe" name="formframe" allowTransparency="true" frameborder="no"style="display: none;"></iframe>

    <iframe id="viewframe" name="viewframe" allowTransparency="true" frameborder="no" style="display: none;"></iframe>

    <script type="text/javascript">
        $().ready = function() {
            
            $('#viewframe').hide();

            $("#reg").click(function() {
                $('#formframe').show();
                $('#viewframe').hide();

            });

            $("#view").click(function() {
                $('#formframe').hide();
                $('#viewframe').show();

            });

        }();

    </script>
    <br class="clear" />

</div>


<?php include('includes/config.php'); ?>

<link rel="stylesheet" type="text/css" href="css/Registration.css">
<script type="text/javascript" src="js/script.js"></script>

<form class="form-horizontal center" action="RegistrationAction.php">

<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="title">Title:</label>
    <div class="col-sm-5">
      <select name="title" id="title">
        <option value="m/s">M/S</option>
        <option value="mr">MR</option>
        <option value="mrs">MRS</option>
        <option value="miss">MISS</option>
      </select>
    </div>
  </div>
</div>

<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="party_name">Party Name:<span class="required">*</span></label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="party_name" placeholder="Enter party name" name="party_name" required="yes" maxlength="40">
    </div>
  </div>
</div>

<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="name2">Name2:</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="name2" name="name2" maxlength="40">
    </div>
  </div>
</div>

<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="name3">Name3:</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="name3" name="name3" maxlength="40">
    </div>
  </div>
</div>

<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="address">Address:<span class="required">*</span></label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="address" placeholder="Enter address" name="address" required="yes">
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <label class="control-label col-sm-5" for="address1"></label>
      <div class="col-sm-5">
        <input type="text" class="form-control" id="address1" name="address1">
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <label class="control-label col-sm-5" for="address2"></label>
      <div class="col-sm-5">
        <input type="text" class="form-control" id="address2" name="address2">
      </div>
    </div>
  </div>
</div>

<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="postal">Postal Code:<span class="required">*</span></label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="postal" placeholder="Enter postal code" name="postal" required="yes" maxlength="6" onkeypress="return isNumber(event);">

    </div>
  </div>
</div>

<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="country">Country:<span class="required">*</span></label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="country" name="country" value="INDIA" disabled>
    </div>
  </div>
</div>
<p class="sub-head">Contact Details</p>
<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="tel">Telephone(Ex- 033228800000):<span class="required">*</span></label>
    <div class="col-sm-5">
      <input type="tel" class="form-control" id="tel" name="tel" maxlength="15" required onkeypress="return isNumber(event);">
    </div>
  </div>
</div>
<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="mobile">Mobile:<span class="required">*</span></label>
    <div class="col-sm-5">
      <input type="tel" class="form-control" id="mobile" name="mobile" maxlength="10" required onkeypress="return isNumber(event);">
    </div>
  </div>
</div>  
<div class="form-group">
  <div class="row">
    <label class="control-label col-sm-5" for="email">Email:<span class="required">*</span></label>
    <div class="col-sm-5">
      <input type="email" class="form-control" id="email" name="email" maxlength="50" required>
    </div>
  </div>
</div>

<div class="form-group">
  <div class="row">        
    <div class="col-sm-offset-2 col-sm-5">
      <input type="submit" value="Submit">
    </div>

    <div class="col-sm-offset-2 col-sm-5">
      <input type="reset" value="Reset">
    </div>
  </div>
</div>

Answer 1

First of all iFrame won't load an external CSS, iFrame have its own header. Try assigning a Class/ID to the iFrame and include the css in your file by keeping this id/class as a parent selector.

Answer 2

A document loaded in an iframe is a separate document.

A stylesheet applied to the parent document does not affect a document loaded into an iframe.

You need to <link> the stylesheet to the document that you want it to apply to.