CODEWITHSUNDEEP
htmlcss
Reed
Reed

Reputation: 127

CSS External Code

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>

Upvotes: 1

Views: 66

Answers (1)

user4616966
user4616966

Reputation:

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.

Upvotes: 2

Related Questions