I am by no means a web developer so forgive me if i am missing something blindly obvious.
I am playing around with making a custom php wordpress page and can’t resolve an issue i am incurring where the css from my style.css file isn’t being pulled in for the footer after converting from html to php (works fine in plain html and css).

All css from the style.css file works until it reaches the footer, then the css simply isn’t read. I can’t seem to find any obvious faults in my css or how I’ve called the footer.php file into the index.php file with

I have also tried disabling all WordPress plugins with no luck in fixing my issue.

Any help as to why my footer css isn’t being called in will be much appreciated.

My header.php file:

<!DOCTYPE html>


<html lang="en" <?php language_attributes(); ?>>

    <head>

        <meta charset="utf-8">

        <meta name="vieport" content="width=device-width, initial-scale=1">

        <meta name="viewport" content="width=device-width" />

        <!-- ///////////////////////////// Title ///////////////////////////// -->
        <title>
            <?php bloginfo('title'); ?>
        </title>

        <!-- font-family: 'Antic', sans-serif; -->
        <link href="https://fonts.googleapis.com/css?family=Antic" rel="stylesheet">

        <!-- ////////////////////////////// JavaScript Imports /////////////////// -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <link href="<?php bloginfo('style.css')?>" rel="stylesheet" type="text/css" >
        <link type="text/css" rel="stylesheet" href="http://www.psldev.co.uk/cedars/wp-content/themes/testfromvid-1/style.css" />


    </head>




             <!-- ////////////////////////////Header ////////////////////////// -->



            <!-- //////////////////////////// Navigation ////////////////////////// -->
        <header>
                <div id="navcontainer" class="navcontainer">
                    <div id="nav" class="nav">
                        <ul>
                            <li><a href="index.html">Home </a></li>
                            <li><a href="projects.html"> Projects </a></li>
                        </ul>
                    </div>
                </div>


         <!-- //////////////////////////// main Banner ////////////////////////// -->


            <div class="banner">
                    <div class="bannerContent">
                        <div class="mainTitle clearfix animated fadeInDown" id="mainTitle">
                            <!-- Title -->
                            <h1>Title</h1>
                            <!-- Introductory Paragraph -->
                            <p id="p1" class="p1 animated fadeIn">Established in 1963</p>
                        </div>

                    </div>
            </div>


         <!-- //////////////////////////// Banner Content ////////////////////////// -->

             <div class="mainContentWrap">  </div>

         </header>

My index.php file:

<!-- //////////////////////////// main Body ////////////////////////// -->

<?php define( 'WP_USE_THEMES', false); get_header(); ?>
    <body>
        <div class="main">
            <div class="container3col">
                <div class="regbio clearfix">
                    <div class="theteam">
                        <div class="teamWrap">
                            <div class="servicesheader">
                                <h3>Services</h3>
                            </div>
                            <div class="call-outs-container">
                                <div class="call-out">
                                    <div class="textcontelem">
                                        <h2>Domestic</h2>
                                        <p>Some of the services carried out can include but are not limited to rewiring, new installations, extensions and intruder alarms.</p>
                                    </div>
                                </div>
                                <div class="call-out">
                                    <div class="textcontelem">
                                        <h2>Commercial</h2>
                                        <p>The services carried out within a commercial environment include shop fittings, alterations and emergency calls.</p>
                                    </div>
                                </div>
                                <div class="call-out">
                                    <div class="textcontelem">
                                      <h2>Industrial</h2>
                                      <p>Industrial Services include installation and maintenance, emergency breakdowns and emergency lighting.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mainbody">
                <div class="bodyContWrapper">
                    <!-- ///////////////////   bio ///////////////////////// -->
                </div>
                <div class="whoarewe">
                    <h2>Who are We?</h2>
                    <p>Cedars Judo Club was started in 1963 as an evening class held in one of the rooms at the old ‘Cedars' house on Shilton Road in Barwell. After several moves due to the club out growing it's venues it eventually ended up in the main sports hall at the Heath Lane Acadamy in Earl Shilton. It's now one of the largest clubs in the area with 200 square metres of mat area.</p>
                    <p>We believe that most sports are great for kids and adults. However judo has got to be among the best of them all. Maybe we are biased but we think judo is rather special and unlike many sports it really is something that everyone can do, no matter what size, shape or age you are. Because of the vast range of techniques and ways of doing each technique, everyone can find something to suit them.</p>
                </div>
                <div class="postsElem">
                    <?php if ( have_posts() ) : ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                    <div class="post-header">
                        <div class="date"><?php the_time( 'M j y' ); ?></div>
                        <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                        <div class="author"><?php the_author(); ?></div>
                    </div><!--end post header-->

                    <div class="entry clear">
                        <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
                        <?php the_content(); ?>
                        <?php edit_post_link(); ?>
                        <?php wp_link_pages(); ?>
                    </div><!--end entry-->

                    <div class="post-footer">
                        <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
                    </div><!--end post footer-->
                    </div><!--end post-->

                    <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
                    <div class="navigation index">
                    <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
                    <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
                    </div><!--end navigation-->
                    <?php else : ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <?php get_footer(); ?>
    </body>


</html <?php language_attributes(); ?>>

My footer.php file:

<footer class="footercont" id="footer">
     <div class="footerwrap">

        <div class="footertitle">
            <h2>Tell Us What You Want</h2>
        </div>

        <div class="footermain">
            <p>If you like what you see, please get in contact with us straight away!</p>
        </div>

        <div class="emailus">
            <div class="btn1">
               <a href="#">Contact Us</a>
            </div>
        </div>

        <div class="copyright">
            <p>Copyright&copy;2016</p>
        </div>

    </div>
</footer>

My style.css file:

* {
    box-sizing: border-box;
    font-family: 'Antic', sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

/* /////////////// Navigation ////////////// */

.navcontainer {
    position: fixed; 
    width: 100%;
    background-color: #991357;
}

.nav ul li {
    list-style-type: none;
    display: inline-block;
    float: left;
    padding: 20px;


}

.nav ul li a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 30px;
}

#navcontainer {
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 1.5s;
}

@media (min-height: 579px) {
    .navcontainer {
        z-index: 10;
    }
}

/* /////////////// End Navigation ////////////// */

/* /////////////// Banner ////////////// */

.banner {
    padding-top: 5%;
    width: 100%;
    height: 60vh;
    background-color: #0066CC;


    text-align: center;
    color: #FFFFFF;
    padding-left: 10%;
    padding-right: 10%;
}


.bannerContent {
    height: inherit;
    padding-top: 15%;
}


h1 {
    font-size: 60px;
    font-weight: lighter;
}


h2 {
    font-size: 40px;
    font-weight: lighter;
}

.p2 {
    font-size: 30px;
}

.mainbody {
    padding-left: 20%;
    padding-right: 20%;

    text-align: center;
}

.whoarewe p {
    font-size: 20px;
    padding-bottom: 5%;
}

.postsElem {
    min-height: 70vh;
    border: solid 1px;
    margin-bottom: 5%;
}
/* /////////////// End Banner ////////////// */

/* //////////////////////////////////////////////////////main content /////////////////////////////////////// */

.theteam {
    padding: 0px;
    margin: 0px;
    height: inherit;
    text-align: center;
    overflow: hidden;
    min-width: 300px;
    /*background-color: #0776A0;*/
    /*background-color: #217C7E;*/
    background-color: #4086AA;
}

.teamWrap {
    margin-bottom: 20px;
    width: 100%;
    align-content: center;
    color: #FFFFFF;
}


.call-outs-container {
    max-width: 1400px;
    margin: 0px auto 0px auto;
    color: #FFFFFF;
}

.call-out {
    box-sizing: border-box;
    margin-bottom: 0px;
    padding-bottom: 20px;
    flex-basis: 30%;
}

.textcontelem {
        padding-left: 10%;
        padding-right: 10%;
}

@media (min-width: 1200px) {
    .RegElem {
        display: flex;
        justify-content: space-between;
    }

    .call-outs-container {
        display: flex;
        justify-content: space-between;
  }
    .textcontelem {
        padding-left: 0%;
        padding-right: 0%;
    }
    .call-out {
        /*background-color: #0776A0;*/
        /*background-clip: #217C7E;*/
        background-color: #4086AA;
    }
}

/* //////////////////////////////////////////end main content///////////////////////////////////////////// */


/* ////////////////////////////////////////////// footer /////////////////////////////////////////// */


.footercont {
    width: 100%;
    min-height: 400px;
    height: auto;
    background-color: #991357;

    text-align: center;
    align-content: center;
    font-family: 'Antic', sans-serif;
    color: #FFFFFF;
}

.footerwrap {
    padding-top: 30px;
    padding-bottom: 30px;

     width: 100%;
    min-height: 400px;
    height: auto;
    background-color: #991357;

    text-align: center;
    align-content: center;
    font-family: 'Antic', sans-serif;
    color: #FFFFFF;
}

.emailus {
    margin-top: 2%;
    margin-bottom: 2%;
}

.btn1 {
    text-align: center;
    width: 200px;
    height: 50px;
    margin: auto;
    text-align: center;
    background-color: #991357;
    border: solid 1px #FFFFFF;
    color: #FFFFFF;
    font-size: 30px;
    line-height: 50px;
}

.btn1 a {
    font-family: 'Antic', sans-serif;
    text-decoration: none;
    color: #FFFFFF;
    font-style: normal;
}


.btn1:hover a {
        color: #991357;
}

.btn1:hover {
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 1s ease 0s;
}

@media (min-width: 769px) {

    .btn1 {
        line-height: 100px;
        width: 300px;
        height: 100px;
    }
    .btn1 a {
        font-size: 30px;
    }

}


/* ////////////////////////////////////////// end footer /////////////////////////////////////////// */


/*************************
Clearfix
*************************/

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

Read more here: converted html to php wordpress footer css not working


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: