Angular 4 Local CSS File Gives 404 Error - html

I have the following in my head element of my index.html in my Angular 4 App:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Plant Simulator</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- link rel="stylesheet" href="styles.css" type="text/css" -->
<link rel="stylesheet" href="//demo.productionready.io/main.css">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
If I use the local path to the styles.css file, I can see from my browser console that it always throws a 404 error saying styles.css is not found as shown in the screenshot below:
Any ideas as to why is this? It works fine if I load the css from the CDN, but I want to have it rendered locally!

Related

CSS not linking in html

I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>

CSS is not working, What I do, I checked all parts and also do hard refresh but it is not working?

This is my index.html file. This is head part of result.html and the name of css is result.css which is in same folder
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="./result.css" type="stylesheet" type="text/css">
<title>Document</title>
Your link tag should be like this:
<link href="./result.css" rel="stylesheet" type="text/css">
It seems you've accidently typed type="stylesheet" instead of rel="stylesheet"
Take a look at the reference : https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

CSS won't link to HTML, tried everything

I've tried everything! My CSS file is in my root folder, every HTML file works fine.
<!DOCTYPE html>
<html>
<head>
<title>Kyra Moonrae Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
There is a HTML error. Just add > after initial-scale=1.0".

iOS safari add to home screen of my angular web app icon coming as screenshot instead of apple-touch-icon

When I'm trying to add my angular web app as a shortcut to my home screen from my iOS safari it is coming as a screenshot of my app page, although I added an apple-touch-icon link to my index.html. where my image is 150*150 size and a png. below is my HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insights</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="src/assets/icons/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="manifest" href="manifest.webmanifest">
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
After some research found that it is my bad having src in the below line.
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
changed it to the below worked
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon-150x150.png">

Allow a HTML file which requires external files to be used in Electron

How would you make this HTML file use the css file while being run in electron?
<!DOCTYPE html>
<html>
<head>
<title>First electron html app</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
</html>
Try this: <link rel="stylesheet" type="text/css" href="styles.css">