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).
Related
I'm trying to reference a nested class within my html, which is under <body>. The issue is, is that if I were to reference body by itself in css, the background would appear. However if I try to reference my class under body, it doesn't appear. I've tried referencing it with a . before the class name which still doesn't work. Code below:
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">
<link rel="stylesheet" href="main.css" />
<title>vxsqi-lib</title>
</head>
<body>
<div class="backgroundimage"></div>
</body>
</html>
CSS
.backgroundimage {
background-image: url("backgroundimage/dark-night-mountains-4k-e3.jpg");
background-size:cover;
background-color: white;
}
You can try this,
div.backgroundimage {
background-image: url("backgroundimage/dark-night-mountains-4k-e3.jpg");
background-size:cover;
background-color: white;}
Edit second options because wrong :(
This must be work. Let me know if doesnt
I was going through the MDN page for Using Templates and Slots where it mentions while citing an example of using <template> within a Shadow DOM that (emphasis mine):
And because we are appending its contents to a shadow DOM, we can
include some styling information inside the template in a
element, which is then encapsulated inside the custom element. This
wouldn't work if we just appended it to the standard DOM.
My understanding from this statement is that <style> tags within <template> work only in a shadow tree but upon trying an example of doing the same and appending the <template> to the standard DOM, I see that it works (tried in Chrome, Mozilla, and Safari)
<!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>
<template id="template">
<style>
span {
color: blue;
}
</style>
<span>Span from template</span>
</template>
</body>
<script>
const template = document.getElementById('template');
const templateContent = template.content;
document.body.appendChild(templateContent);
</script>
</html>
I also thought that it might be referring to appending a standalone <style> tag to the standard DOM for which I tried this snippet which too seemed to work fine
<!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>
<div>Test</div>
</body>
<script>
const style = document.createElement('style');
style.innerHTML = `
div {
color: blue;
}
`;
document.body.appendChild(style);
</script>
</html>
I'm guessing my inference is incorrect(or are the docs incorrect?). What limitation is that statement actually referring to?
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!
I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>
Your div is of 0 height - background-image doesn't give it any height.
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!