CSS External Code

Question

When I add my external css file, it is only showing the navigation bar and not the top with the site title and background color. When I preview it with the HTML and CSS files together everything appears just fine. The CSS and HTML file are in the same file manager, so that is not the issue. Can't seem to figure out why when I separate the css and html file only some of the css appears. Any help would be appreciated. I am pretty sure I am overlooking something.

I have added the code and screen prints of what my code should look like and what it does look like here - https://estandcorp.wordpress.com/. I have also included the HTML/CSS and External Link below. Again, thanks for any help.

HTML Code

<head>
<link rel=”stylesheet” type=”text/css” href=”headermaster.css”>
</head>

<h3 class="full-width">
<div class="headtext">
<div class="header">Title</div>
</h3>
</div>

<div class="navbar">
<nav>
  <div class="a"><a href="#">Home</a>
  <div class="a"><a href="#">Blog</a>
  <div class="a"><a href="#">Pricing</a>
  <div class="a"><a href="#">About Us</a>
  <div class="a"><a href="#">Contact Us</a>
  <div class="a"><a href="#">Login/Register</a>
</nav>
 </div>
 </div>
 </div>
 </div>
 </div>

Here is the CSS

<head>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/   
 -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <! 
[endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<!-- Set the viewport width to device width for mobile -->

  <style>
  .header {
   position: absolute;
   height: 95px;
   right: 0;
   top: 0;
   left: 0;
   padding: 1rem;
   background-color: #3399CC;

  }

.headtext {
 text-align: left;
 right: 0;
 top: 0;
 left: 0;
 font-size: 200%;  
 color: #FFFFFF; 

 }

 .navbar {
  position: absolute;
  margin-top: 100px;
    padding-top: 10px;
 padding-bottom: 25px;
 padding-right: 25px;
 padding-left: 25px;
 right: 0;
 left: 0;
 text-align: center;
 background-color: #efefef;

  }

 .a {
    padding: 15px;
    display: inline;
   }

   /* unvisited link */
   a:link {
    color: black;
    }

   /* visited link */
  a:visited {
  color: black;
   }

  /* selected link */
  a:active {
   color: black;

    }

   </style>

To add to Ty Programs answer: Also, the href="headermaster.css" might be wrong. Ensure it is the correct path relative to the location of the html file. — aguertin
– aguertin, Commented Jan 29, 2017 at 0:54

user4616966 · Accepted Answer · 2017-01-29 00:52:38Z

2

There are no HTML tags in a CSS file. Remove the <Style> tags. A CSS file is just the raw CSS code, no HTML. Also, remove the HTML comments.

answered Jan 29, 2017 at 0:52

user4616966

Sign up to request clarification or add additional context in comments.

1 Comment

Reed Over a year ago

thank you! I knew I was doing something stupid just couldn't figure out why half was working and not the other half.

Collectives™ on Stack Overflow

CSS External Code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related