How is it possible that my whole website works normally without the css file with all the styles? I have this line in the header:
<link rel="stylesheet" type="text/css" href="styles.css" />
I deleted the only styles.css file from the server, but nothing changed. If I delete that line from the header then there are no styles (as expected)
At one point I noticed that none of the css changes I make have any effect, so I made sure that i'm not doing something dumb like editing or referencing the wrong file and that there are not 2 copies of it for some reason. If I change other html files, then I can see the effects, but not the styles file.
I can force it to work by renaming the css file, but I don't really want to do that.
Has anyone seen this happen before?
This is because caching of the CSS. So try clearing the cache of the browser.
You can prevent the CSS caching by below way
<link rel="stylesheet" type="text/css" href="style.css?v=1" />
Using PHP you can do this trick
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Related
I am starting to learn HTML, CSS etc by following a project video. I am using Atom and have followed the video step by step but for some reason Atom does not seem to want to recognise my stylesheet. It isn't altering anything.
<link rel="stylesheet" href="/css/style.css">
try adding a dot before in the href like
<link rel="stylesheet" href="./css/styles.css" />
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
I created the CSS folder and named it. I added this to my header in HTML but the changes aren’t happening.
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css" />
You mentioned you've created a CSS folder. Then include that folder name in the href
<link rel="stylesheet" type="text/css" href="CSS_FOLDER_NAME/haiku-styles-shaun.css" />
Probably your CSS file isn't in the same directory as your HTML file, you provided the wrong name of your CSS file (also check that your CSS file's extension is .css). Solve these and try again.
You have to include each file you need separately.
e.g.:
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myButton.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myPhoto.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myFooter.css" />
Most user don't need all their style definition at the same time. To save bandwidth you have to choose.
You said that you created a folder but you didn't write it on the path. Try adding the css folder before the file name like this:
<link ref="stylesheet" type="text/css" href="folder/file.css" />
Furthermore I suggest you to include versioning in your css to avoid browser caching when you refresh. To do that every time you update your css change the number at the end in the link:
<link ref="stylesheet" type="text/css" href="folder/file.css?v=1" />
The <link> tag is used to link to external style sheets. You have to use something like this :
<link rel="stylesheet" type="text/css" href="Folder-Name/Stylesheet-Name.css">
Make sure that your href address is setup properly otherwise it won't load in your HTML page .
Note: The element is an empty element, it contains attributes only.
Note: This element goes only in the head section, but it can appear any number of times.
In HTML the <link> tag has no end tag. In XHTML the tag
must be properly closed.
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 was handed a site to update at my job that utilizes one template file. I have made changes to both the template file and the index file as well as several CSS files. What happens when I launch the website live is that the sites contents appear without any styling/functionality. I believe I have linked to all the correct styling links in my head sections because in Dreamweaver the sites render perfectly fine in both Firefox and IE. I'm in a jam at my job. Any help is appreciated! Thanks
UPDATE: I selected the option from Dreamweaver's Modify menu: "Apply template to page" which corrected some of the CSS reference issues. The page renders perfectly now in IE 9 but still no styling whatsoever in Firefox. Any ideas from anyone? I'm completely stuck now. Thanks for all the answers so far!
Open Firefox developer tools, check the Network tab for any 404s, particularly on .css files. If there are any, that means it can't access the file.
The permissions on a directory could be wrong, the webserver (nginx/apache) might not be able to access it, or you may have linked it incorrectly (is your website in a subfolder or at the root of the domain? do your links need leading slashes?).
The path to the CSS files are incorrect, set them correctly (Absolute or Relative)
<link href="file://///hqdaa0n02731-06/wtc$/css/bs_paper/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen, min-device-width, resolution" />
<link href="file://///hqdaa0n02731-06/wtc$/js/plugins/css/bootstrap-accessibility_1.0.3.css" rel="stylesheet" type="text/css" />
<link href="file://///hqdaa0n02731-06/wtc$/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="file://///hqdaa0n02731-06/wtc$/css/wtc_home_3box_pic_option.css" rel="stylesheet" type="text/css" />
<link href="file://///hqdaa0n02731-06/wtc$/css/yamm_2014.css" rel="stylesheet" type="text/css" />
Should be like this:
ABSOLUTE
<link href="http://www.wtc.army.mil/css/yamm_2014.css" rel="stylesheet" type="text/css" />
RELATIVE
<link href="/css/yamm_2014.css" rel="stylesheet" type="text/css" />