<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>an infinite endeavor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
The CSS is a separate file, and I've been searching for hours for a solution.
https://i.stack.imgur.com/3GdHj.png
This is troubleshooting, so I will give you three viable answers.
Maybe your css file is not in the same directory as your HTML file.
If you are loading this locally, remember to write the ENTIRE file location ex: C://User/desktop/styles.css
If none work, think about just copypasting the entire css code and putting it inside a tag.
Is your CSS file in a CSS folder? If so do not forget to add css/ to entering your CSS folder.
<link rel="stylesheet" href="css/style.css">
or try like this
<link rel="stylesheet" href="/style.css">
Related
i am trying to link a stylesheet in another file. I've tried everything, copied it from multiple websites. But it doesen't seem to work. The css doesen't load any way. This is probably a really dumb mistake somewhere. Maybe it just needs another pair of eyes. The css works fine, what is causing problems is the link tag. What i noticed is, when i try to go to http://localhost:8080/styles.css it gives me Cannot GET /styles.css in plain text. I've tried modifying the permissions of the files, doesen't work. The filename is correct.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test zabezpečení prohlížeče</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1 id="page-title">Test zabezpečení prohlížeče</h1>
</body>
</html>
I am trying to link my CSS and HTML. My CSS file is in static folder where as index file in templates folder.
code : Header of index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI App</title>
<link href="C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
</head>
Even after providing it's proper path, I am unable to link them.
Try using below way, it is almost similar of what you've used but you need to know how to locate the external file.
If you have a file in a location which is outside from the project folder then you can try something like this:
<link href="file:///C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
OR
if you know about how absolute and relative path works then below is what you can try:
<link rel="stylesheet" type="text/css" href="./yourDirectory/yourFile.css"
My advice to you is to create a folder in your project and add that stylesheet file into that folder and refer that path in the html.
Kindly go through this path for better understanding of absolute and relativepath.
Is there any possible way to make injected html use only my own written css without making all lines !important? because some html parts inherit style from existing website css file.
Try using more specificity to add weight to the CSS you are declaring. For example, if your injected HTML has a class for the first parent it could be: .injected .things. Do note that ID's have more weight over class.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You can try this:
Keep your (css file) at the bottom of all other (css files)
in this case you don't need to put important in your style.css file
like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Index</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
Please see attached image:
I have my index page head section as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" />
<title></title>
</head>
Until this morning, the page always used to load fine. But I noticed this morning that css isn't loading at all. I checked the locations of css files. It seems to be correct. Can anyone suggest whats wrong?
There may be a problem with your browser calling the local bootstrap CSS file.
Try requesting the bootstrap CSS via CDN by using:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
And then troubleshoot your local CSS file.
Hope this helps!
Your code looks fine, try playing with the css file path. You may not need the "bootstrap-3.2.0-dist." Typically css is just css/bootstrap.min.css if it's located in a CSS folder and your index file is in your root directory.
I'm working on a website right now, the homepage links up with the CSS as normal and displays fine. The about page for no apparent reason is not connecting to the style.css, the same header links are there as the homepage has, apart from an additional two stylesheets just to get two web-fonts to work. Can someone have a look and see any issues with this.
I've copied everything within the pages header.
INDEX
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
ABOUT
<!DOCTYPE html>
<html>
<head>
<title>The Naked Radish</title>
<meta name="description" content="The Naked Radish">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/jennasue-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
<link href="css/quickendjerk-webfont/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
</head>
Index - http://www.jordancharters.co.uk/nakedradish
About - http://www.jordancharters.co.uk/nakedradish/about.html
This is your stylesheet: it is in a different language. Specify either of the following:
HTML
<meta charset="utf-8">
CSS
#charset "UTF-8";
UPDATE.. It seems as though you are using a relative URL for the stylesheet.. both pages are in different folders.. try setting an absolute URL? Let me know if that works.
Use this: <link href="http://www.jordancharters.co.uk/nakedradish/css/style.css" rel="stylesheet" media="screen">
It... looks like you've got some kind of encoding glitch on your about page, which is making browsers think that the CSS is encoded in a way that it isn't. Here's a brief excerpt of what my browser thinks your CSS says, when loaded as part of the about page:
⼪⁓瑹汥⁒敳整⼊牴楣汥Ⱐ慳楤攬楧畲攬潯瑥爬敡摥爬杲潵瀬敮甬慶Ⱐ獥捴楯渠笊।楳灬慹㨠
It kind of goes on like that for a while. The raw network response for the html isn't much better:
ÿþ<�!�D�O�C�T�Y�P�E� �h�t�m�l�>�
Although it appears that the browser can compensate for that part - you'll notice there's a DOCTYPE html hiding in between those garbage characters. And then it switches encodings or something partway through, and starts looking perfectly normal.
I thinks it loads but It's the Unicode problem ,set The unicode in your your HTML , and save your CSS again with standard Unicode