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?
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 working on an HTML project for school, and I'm trying to add a custom font from Google Fonts. After selecting the font I wanted, Google gave me the code to add to my project to be able to get the font, but I'm getting an error. The error says, "Named entity expected. Got none." Below is the code I'm using for the title of my webpage.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style> font-family: 'Monsieur La Doulaise', cursive;
</style>
<title><span>The Oasis</span></title>
</head>
</html>
Invalid HTML and style definition
Title does not have markup
You need to wrap your font statement so it applies to an element in the body CSS Syntax
Your validator is overly strict.
This code will validate here https://validator.w3.org/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Oasis</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style>
h3 {
font-family: 'Monsieur La Doulaise', cursive;
}
</style>
</head>
<body>
<h3>The Oasis</h3>
</body>
</html>
You are getting that error because & is a special character in HTML: It starts an entity. In older versions of HTML following it with text that wasn't the name of an entity was an error. HTML 5 is more forgiving. The tool you are using to error check your HTML expects you to replace it with & (the named entity for an ampersand character).
In addition:
font-family: 'Monsieur La Doulaise', cursive; is a CSS rule, you need to put it inside a rule-set (which tells the browser which element(s) to apply it to).
You need an element to apply it to (your example code lacks the mandatory <body> element and any content that would be displayed in it).
<span> elements are forbidden inside <title> elements (as are all other elements).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Monsieur La Doulaise', cursive;
}
</style>
<title>The Oasis</title>
</head>
<body>
<p>Example</p>
</body>
</html>
This is really pretty basic stuff. You should probably read an introductory guide to CSS before trying to solve specific problems with the tool.
I tried every configuration settings like CODE STYLE > FILE AND CODE TEMPLATES or HTML FORMAT SETTINGS ,but no matter what I did I can never reform this ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
what I want is as below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
My code style format for HTML is:
HTML Code formatting is configured in Settings | Editor | Code Style | HTML; to get the desired result, you need to remove html and body from Do not indent children of: list in Other tab:
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!