0

So I have been wracking my brain trying to figure out why my CSS file cannot be read by my Xampp server. I think everything is written correctly and all the references are where they should be but I'm not getting different results.

body {
  background-color: black;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>ETB</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/theme.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header ">
        <a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
        <ul id="navigation" class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
Michael Selinger
  • 17
  • 1
  • Have you checked the console output (`Ctrl+Shift+I` on Chrome) for an error message? What does it say? – Ken Y-N Sep 01 '17 at 01:14
  • Its very difficult to tell what exactly the issue you are having and what you mean by "im not getting different results", but one issue you have in your html is that you are including Bootstrap CSS *after* your css, so it will override any common styles. You should include your own theme CSS after Bootstrap. – FluffyKitten Sep 01 '17 at 01:16
  • alright, that was something I was experimenting with and i had noticed some differences. WHat i mean to say about "getting different results" is in fact that i am getting no results. Unless its inline css, it doesn't seem to have an effect on the outcome. but that you for that! – Michael Selinger Sep 01 '17 at 01:21
  • also no error messages come up. It reads the file just fine, it just doesn't seem to output the changes. – Michael Selinger Sep 01 '17 at 01:22
  • Are you testing both the bootstrap stylings and the theme.css stylings or only theme.css? I'd be curious if neither work or if only one does not work. – k2snowman69 Sep 01 '17 at 01:24
  • Take it a step at a time. Remove bootstrap. Does your stylesheet work without Bootstrap? If it does, cool, add Bootstrap back. What happens now? It should be easy to tell if there is a problem with your stylesheet import or if there is a conflict with the Bootstrap stylesheet. – Matt Sep 01 '17 at 01:34
  • I think you need to edit your question to clarify the problem. There seems to be general confusion over: (1) what is the code that you have included? i.e. is the CSS part of your html, it is your theme.css, or is it something else? (2) Is *any* of the css working? e.g., myself and @AlexBell thought it was just your theme.css that wasn't working but your comments make it sound like no CSS is being applied at all. It would help if you clarified your issue and also included the minimum code to reproduce the issue (e.g. does it still happen if you remove the js includes, just 1 css file etc) – FluffyKitten Sep 01 '17 at 01:35
  • SO is not the platform to solve this problem. Too many unknown issues, not enough information and too much back and forth. – Rob Sep 01 '17 at 01:57

6 Answers6

1

The bootstrap link is overriding your css link so just put the css link below the bootstrap and it will work.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="css/theme.css">
0

I had the same problem. I just decided to put the CSS code on the same document as my html code. All you need to do is type this:

<style>
  body {
   background-color:black;
  }
</style>

I assume you do, but just incase you do not know each html document can contain multiple <style> tags.

Bhavin Shah
  • 2,462
  • 4
  • 22
  • 35
Coderess
  • 21
  • 1
  • 7
  • FWIW while this is a potential solution, it doesn't directly address the question, and is generally bad advice-CSS should almost always be externalized for a variety of reasons. – Dave Newton Sep 01 '17 at 11:19
0

Put the link to your css/theme.css after all other references as shown below (it looks like the property was overridden by Bootstrap css):

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
Alexander Bell
  • 7,842
  • 3
  • 26
  • 42
0

There are two options here:

  1. When you are deploying, whatever the code you are using to deploy is either changing the path of theme.css, or it's not actually copying it over.
  2. Bootstrap.min.css is overriding your css styles (see answer by alex-bell)

Checking #1... I'm honestly not sure, never used your deployment system. Usually I would just check the files on disk and make sure I can access them. Another choice is wherever you access your .html, try accessing css/theme.css through your browser. It should attempt to download the file. If it doesn't attempt to download the file, this is likely your issue.

Checking #2 is easy. Simply open up the page in any browser (let's use chrome for this example) and open Web Developer tools. Inspect the body element, and you will see how specific styles are being applied or overridden.

k2snowman69
  • 1,849
  • 1
  • 14
  • 19
0

The problem is, I think, that the <body> is only the space between the open and close <body> tags, which is immediately overlaid by the <nav> bar, so the black is being set, it's just that you cannot see it. To set the whole page background, you can use this:

html
{
    background-color: black;
}

See this JSFiddle - the body rule does nothing, but the html rule sets the whole page bar the toolbar.

Ken Y-N
  • 14,644
  • 21
  • 71
  • 114
0

Get familiar with the Developer tools in your browser. They are very handy at helping solve these kinds of issues.

Using Chrome as an example hit f12 to bring up the developer tools

Go to the Network Tab and reload the page. Check that your css file is being loaded. I suspect not, as your path is css/themes/theme.css is going to resolve to http:\\yoursite.com\folder-where-the-page-is\themes\theme.css. You more than likely want to use /css/theme.css which will resolve to http:\\yoursite.com\themes\theme.css

Once you have confirmed you have the path correct using the Network Tab, you can use the Elements Tab to inspect the various elements of the page. Here you can see what styles are being applied to an element and where they are coming from.

Finally, and unrelated to the Dev Tools, learn about CSS Specificity

Jon P
  • 19,442
  • 8
  • 49
  • 72