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">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
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">
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">
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.
There are two options here:
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.
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.
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
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.
Related
[I've tried seemingly everything and nothing is working for this seemingly simple and mundane css and html. I'm using external css as I was told that's easier on a larger scale for later projects but right now I'm just learning basics. Before you ask, yes, they are both in the same folder and using developer tools I can see that it is properly linking, but it appears the browser isn't reading it and it just looks like a text doc. Running the code works perfectly through here so I don't understand what's wrong. I'm using safari on MacBook and have also tried chrome - should I use a different browser or?
Edit: As you can see in the images my user profile includes Null (part of my name) I believe that's what's messing with it, is there a way around that?
h1{
color: red;
}
p{
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>First Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>First code</h1>
<p>Welcome to my first set of code!</p>
</header>
<NAV>
<ul>
<li><a href "#">nice</a></li>
<li><a href "#">cool</a></li>
<li><a href "#">rad</a></li>
</ul>
</NAV>
<footer>
<p>Nice amiright?</p>
</footer>
</body>
</html>
There actually 2 ways to achieve that. The first Method has been already stated and that is to link the external CSS inside the head-element of your website:
<link type="text/css" rel="stylesheet" href="url to the external .css" />
The second method however has not been mentioned yet which imo is the better one. Create an own .css file and link your website to it. Then add following line at the very top of your css file. That allows you do overwrite or change specific element of the css that you might cant access on your own:
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
We have two various types of Href
Absolute Path [it's added through an External Link]
Relative Path [it's added through an Internal Link]
The way you wanted to have is definitely the first item of the above-mentioned issues.
It'd be like this:
<link rel="stylesheet" type="text/css" href="http://example.com/[Path]/file.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>JavaScript Basics</h1>
</div>
</body>
</html>
h1{
color: green;
}
Here are both my HTML and CSS. I am using the ATOM text editor on my Mac. Whenever I preview HTML it shows JavaScript Basics in the default black color,not in green from my css.
Try this one dude!
`<link href='style.css' rel='stylesheet' type='text/css'>
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
If you have access to a back-end language like PHP, you can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
I have added
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css/" />
in the index.html above tag. But my stylesheet is not working. my style.css code is:
body
{
background-color: #23314F;
}
main
{
margin: 0 auto;
width: 880px;
background: #FAFAFA;
}
What changes should be made?
The link provided is incorrect
href="http://blogsoc.org/mail1/style.css/
must be
href="http://blogsoc.org/mail1/style.css
without last /
Not too much discriptiv question.
But try removing last slash.
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css" />
"Not working" is a very vague description of the problem.
The only obvious issue is that main will select <main> elements which do not exist in HTML. We can't tell you what to change it to because can't see your HTML. I recommend reading selectutorial.
Since the question has been updated:
http://blogsoc.org/mail1/style.css/ gives me a 404 error. You need to provide a working URI to your stylesheet. http://blogsoc.org/mail1/style.css appears to be what you want.
I had that problem before. And I solved it. The problem was that I originally declared my page as a <frameset> in Eclipse. Even when I changed it, the problem persisted. I copy and pasted the page and tested in different browsers.
The source page was linking to the stylesheet on the browser perfectly. It was just not showing the style on my page.
I created a new page with no declaration and it works.
The `<link>` tag was not the problem.
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Test Title</h1>
this is a test page.
</body>
</html>
I know I can include CSS on my page like this:
<style>
.style{
..
}
</style>
How do I add an external stylesheet file in an HTML page?
In your HEAD, add:
<link rel="stylesheet" type="text/css" href="your_css_file.css">
the css file itself does not contain <style> tags.
The simplest way to do so is to add a stylesheet link to your document HEAD section:
<link rel="stylesheet" href="style.css" type="text/css">
Doing so will reduce the performance on the first load (since the system must request two files instead of one) but improve subsequent performance because the style sheet remains in cache for a while.
From StackOverflow's page:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5885" type="text/css">
I don't think it will improve speed much unless the same CSS file is shared across multiple webpages in your website (so the browser can cache it). Otherwise there's the penalty of creating an extra HTTP connection to retrieve the CSS.
Add the following line in the head of your html file
<link rel="stylesheet" type="text/css" href="path/to/your/style.css">
Then you can add styles in style.css like,
.classname{
...
}
And there is also inline style sheet, you can add it in the html line itself, for example
<a style="color:red;" href="#"></a>
You need to add this tag in the header section of your html file
<HEAD>
<link rel="stylesheet" type="text/css" href="giveThePathToYourStyle.css">
</HEAD>