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 1 year ago.
Improve this question
how can i link css in a html template?
Please help me, i can't figure it out, why the code don't function.
<!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>
</head>
<body>
<link rel="stylesheet" href="test.css">
</body>
</html>
Check if your css file exist in the same folder your html file. and put the link in the <head> or you could do your stying inside HTML but for good practices ALWAYS put your style files away from 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>
<!-- <link rel="stylesheet" href="test.css">-->
<!--<style>
/*or you could put test.css style*/
</style>-->
</body>
</html>
There are a few ways to incorporate CSS to your HTML template.
1. Inline CSS: In this method you add a style attribute to your HTML tag, in your HTML template's code.
For example:
<h1 style="font-size:20px; color: blue;">Hello World</h1>
2. Internal CSS: Using internal CSS, you can incorporate styling in the HTML's head section using the style tag.
For example:
<style>
h1 {
font-size:20px;
color: blue;
}
</style>
3. External CSS: This is probably what you are looking for. In your folder, add an external sheet i.e. a "styles.css" file. You can add all your CSS styling in this file just as you would add in between the style tag in the head section.
While using this method, the most important thing to do is linking your CSS file to your HTML file by adding the following line of code to your head section:
<link rel="stylesheet" href="style.css">
And that should do it!
Related
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>
I have 2 files.
1.index.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="./main.css">
</head>
<body>
<div>Hello World</div>
</body>
</html>
main.css
div::after{
content: "123";
color: red;
font-size: 20px;
}
When I opened it, it shows like this:
I don't know why 123 is in the wrong place.
You are using live-server which injects additional content, including div elements into the page.
Your CSS select all div elements.
You could change your selector to be more specific (e.g. to select divs that are members of a particular class and then add a matching class attribute to the div you want to select).
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.