I start a Angular App and it works fine but it doesn't appl the stylesheet style.css in the same fooder with index.html (src). Any idea why?
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="stylesheet" href="style.css">
</head>
<body>
<i></app-root>
</body>
</html>
style.css
/* You can add global styles to this file, and also import other style files */
body {
background-color: black;
color: white;
}
The background stays white and the letters black until I add the style in the head of the index.html file.
In angular, any asset you add you need to add its reference in angular.json file also. You will find "styles": [ ] in angular.json. You can add your stylesheet reference there.
to fix this change the type='text/css' to type='stylesheet'
type equal to stylesheet stands for css files, import for any source.
text/css is commonly used for use head declarations, as you say.
For me it works if I import it in a CSS file instead. E.g.
#import '#angular/material/prebuilt-themes/indigo-pink.css';
Related
I can't see a reason why it is not linked.
The html file content
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>site</title>
<link href="code_styles.css" rel="stylesheet" />
</head>
</html>
the css file content
#charset "utf-8";
body{
background-color: aquamarine;
}
Check if the your CSS file is in the same directory as the HTML file. If no, then link it properly
you need to add a ./
<link href="./code_styles.css" rel="stylesheet" />
First check that css file is it css format or not then check your css file is in the same directory otherwise you have to mention path clearly.Also remove that "/"in end of the element.
<link href="code_styles.css" rel="stylesheet">
I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">
I'm looking to start coding in Atom and I am having trouble getting things started. I can't seem to connect my style.scss to the index.html. This is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel"stylesheet" type="text/css" href="style.min.css">
<title>Document</title>
</head>
<body>
<h1>This is a square</h1>
<div class="square"></div>
</body>
</html>
and this is what I have in my style.scss which when complied makes style.min.css
//Variables
$lightblue: #b8fdfb;
//CSS
.square {
width: 100px;
height: 100px;
background-color: $lightblue;
}
This is all that shows up in my local server
You cannot attach SASS to HTML. You first need to compile it first to CSS & then link it to your HTML using <link> tag in the header. Like:
<link rel="stylesheet/css" type="text/css" href="style.min.css" />
You need a preprocessor to convert SASS into CSS. You can use many tools such as Webpack, Prepros, etc.
Have a look at this reference. Hope this helps!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm starting to build a webpage using Bootstrap 3 (latest version) and for some reason I can't seem to add a background image.
The coding is correct, all files are in their proper folders, etc.
Finally I decided to create another webpage with the exact coding the only difference is that my css stylesheet is not in the css folder. I refresh and the background image appears. When i move the css file back into the css folder, the image is gone.
What is happening? the name of the file is correct, I have added the correct path and I added some other styling besides the background image and they seem to be working perfectly whether or not the css file is in or out of the folder.
HTML WHERE CSS FILE IS IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
</html>
HTML WHERE CSS FILE IS NOT IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
CSS:
body {
background: url(background.jpg) no-repeat center center;
}
.container {
color: black;
font-weight: bold;
font-size: 2em;
}
Root FOlder
If you move the css file to the css folder the image url in the css file should be changed too. If your css file is in the css folder and image is in the root directory then the image url should be
background: url(../background.jpg)
Means go up one folder and search for image.
Hello I am trying to set an image as a background using a css file in an index.html, however I use the css declaration the image will not be displayed even if you put it on html, can you please help me figure it out, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Solution</title>
<style>
body{
background: url("img/notarde.png")
}
</style>
</head>
<body>
HI
</body>
</html>
CssFile
body{
background: url("img/notarde.png")
}
If you have your style in <style></style> it is not needed to add the same content in a CSS file to do it.
However, if you wants to use an external CSS file you can add this line between the <head></head> :
<link rel="stylesheet" type="text/css" href="THE_PATH_OF_YOUR_FILE">
Your code works, it must be the path of the image that went wrong.
See it here
You need to include the stylesheet in the index.html file.
<link rel="stylesheet" type="text/css" href="[your css file path]">
I hope that helps :D
Have you referenced the CSS file in your HTML Page?
<link rel="stylesheet" type="text/css" href="mystyle.css">
Specify the CSS file name and path in href like href="CSS/filename.css"
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Solution</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
HI
</body>
</html>