Summary of the problem
The following image is a description of bootstrap icon.
I don't know how to use "Code point".
Unicode: U+F120
CSS: \F120
JS: \uF120
HTML: 
For Using HTML code point, All you need is just set the the font-family of your element(or your body) to 'Bootstrap-icons' and then everything will work.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<style>
.test
{
font-family:'Bootstrap-icons';
}
</style>
<body>
<div class="test">

</div>
</body>
</html>
I managed to find how to use CSS of "code point".
Add following html into the head element of document.
Set font-family to be Bootstrap-icons.
And you can use css code point \F120 to fill the value of content property.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<style>
h3::before {
font-family:'Bootstrap-icons';
content:'\F120';
}
</style>
The otheres (Unicode, JS, HTML) are still ununderstood.
Thank you for reading my broken English! :)
Related
I have a css class .menu-bar.
<style>
.menu-bar { width: 100%; text-align: center; }
</style>
If I place the class in external stylesheet, it won't load ( has no effect in html file ).
If I place the class in local stylesheet (in head tag), it only works if the class is also defined in the external stylesheet. I know this, because I removed the class from external stylesheet and the local class did nothing. My observations have been, this is being caused by text-align. What is going on?
My implementing code:
<div class="menu-bar">
<div> Content </div>
</div>
My intention is to place my css code in external stylesheets. In this scenario, I am having to duplicate this code which seems to demean the point of having external stylesheets. Any thoughts would helpful.
I personally Use VS code as far I can see your problem is that you are not able to link your external stylesheet (CSS file) If You use vs code you can use this.
Maybe some problem in the live server or anything if the code doesn't work the problem maybe something else.
Correct me if I am wrong!
MY CODE
<!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>
<div class="container">
<div class="menu-bar">
<div>
<p>Content *Text align - center Text horizontally*. </p>
</div>
</div>
</div>
</body>
</html>
CSS CODE (External Sheet)
.menu-bar{
width: 100%;
height: 100%;
text-align: center;
background-color: aqua;
}
Click me to view result
The external CSS code did not run because you did not import it in your HTML.
Add this to the start of your HTML:
<link rel="stylesheet" href="PATH_TO_CSS.css">
I'm trying to include CSS in Phoenix templates (EEx) so that I can define components (that render on the server) that not only include HTML but also their own CSS. For that I would like to include a tag with the CSS for that template (component) hoping it would be injected in the <head> but that's not what happen. I made a few experiences and wasn't able to achieve that (weird enough when I did that my webpage didn't break and I could see <head> and <style> tags inside the <body>).
A sample templateXYZ.html.eex code could be:
<style>
.main {color: red;}
</style>
<div class="main">
<!-- Html code goes here -->
</div>
Note that the main goal of this is to allow me to write all the "component" code in one template (Html, CSS and Javascript - with the later there's no problem so I'm omitting it in the example/question) in a way that I only need to place the template in the proper place inside my other templates (rendering a template inside another template is also not a problem) and do nothing more (like as when I have a separated CSS file and need to import it in the <head>).
As a comparison, I can do what I want in the client side with raw Javascript that places my <style> and HTML in the DOM like this:
function f_auxButton(imgpath,id){
if (document.getElementById('auxButtonId')){} // <style> is only created on first component instanciation to avoid duplication
else {
$('<style id="auxButtonId">\
.auxButton {\
width: 25px;\
height: 25px;\
margin: 10px;\
}\
<\style>').appendTo("head")}
return '<img src="'+imgpath+'" class="auxButton" id="'+id+'">'
Then I just have to call <script>f_auxButton(arg1,arg2)</script> where I want to place the HMTL and I get it (plus the <style> tag that goes into the <head>.
So, is there a way of doing this?
app.html.eex
<!doctype html>
<html>
<head>
<title></title>
<%= render_existing view_module(#conn), "_styles.html", assigns %>
</head>
<body>
<div class="main">
<%= render_existing view_module(#conn), "_component.html", assigns %>
</div>
</body>
</html>
/web/templates/shared/_components.html.eex
<%= render MyApp.PageView, "_styles.html" %>
<img src="<%= static_path(MyApp.Endpoint, "/path/example.png")%>", class="auxButton">
/web/templates/page/_styles.html.eex
<style>
.auxButton {width: 25px;height: 25px;margin: 10px;}
</style>
Final Result
<!doctype html>
<html>
<head>
<title>My App</title>
<style>
.auxButton {width: 25px;height: 25px;margin: 10px;}
</style>
</head>
<body>
<div class="main">
<img src="/path/example.png" class="auxButton">
</div>
</body>
</html>
i dont see that my web page is changing according to the style defined in the css file. when i added the same in html file, it is working. can someone please help. dont know what is wrong.
below is my simple html file
<html>
<head>
<title>css</title>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
test
</head>
</body>
</html>
below is my css file.
<style>
body
{
background-color:lightblue;
}
</style>
<style>
body {
background-color:lightblue;
}
</style>
is not a right way to write a .css file.
Remove those style tags from your .css file and check again.
Also,
Make sure your .html and .css files are on the same path
(In order to make things work without changing the link tag in your html head
Just noticed:
Your body tag is INSIDE your head tag. Which is incorrect.
Right way to do so is,
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Change css file as: Remove <style> </style>
body
{
background-color:lightblue;
}
Also correct the format of html as
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
This works for Me. Make sure your html and css both the files should be in same folder.
Try this.
HTML-
<html>
<head>
<title>css</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
test
</body>
</html>
CSS-
body {
background-color: lightblue;
}
You wrapped the head tag around everything. And a link tag should always be placed between head tags and not in the body tag.
your code should be like the example below. All the rest seems fine.
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Css should be like this:
body {
background-color:lightblue;
}
always css link in head section, u can also see the path of the file, Do not use type attributes for style sheets (unless not using CSS),Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers
type="text/css"
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
hello
</body>
</html>
You are using wrong CSS syntax. In a CSS file, there are no <style></style> tags, they are just rules. So you should have:
body
{
background-color: lightblue;
}
Also, you should link your CSS file into the <head> tag, it is better for your file's organization.
I'm doing something like this however, the word world won't appear. having that rule declare in the head css, it works fine.
can anyone explain this to me?
<span id="aa" style="#aa::after{content=" world";}">hello</span>
No. The style attribute only defines style properties for a given HTML element. Pseudo-classes are a member of the family of selectors, which don't occur in the attribute.
The style attribute doesn't accept selectors. It only accepts the rules to apply to the current element. You can't do this with a style attribute.
Working jsFiddle Demo
You must separate your CSS from your HTML:
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<style>
#aa:after {
content: 'world';
}
</style>
</head>
<body>
<span id="aa">hello</span>
</body>
</html>
It's also better to create a file with .css extension, for example styles.css,
and put the style in it:
#aa:after {
content: 'world';
}
And in your HTML, link to this file:
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<span id="aa">hello</span>
</body>
</html>
Be sure that your html and css file are in the same folder.
The style attribute applies styles to the current element; it cannot contain complete style sheet rules with selectors.
Although the selector in this case happens to match the same element, if it were possible, you would also be able to do this, which would make very little sense:
<div id="one" style="#two { display: none; }"></div>
... much content ...
<div id="two">Huh?</div>
ive been watching a tutorial that has told me to change the background color of a webpage by using:
body {background-color:red;}
however when i try and load the page in google chrome the background remains white?
This is my full code:
<!doctype html>
<html> <!--Document START-->
<head> <!--Head START-->
<title>Page Title</title>
<style type="text/css"> <!--CSS START-->
body { background-color:red }
</style>
</head>
<body> <!--Body START-->
<h1>Page Title</h1>
</body>
</html>
The problem is you have an html comment within your css.
<style type="text/css"> <!--CSS START-->
Remove the <!--CSS START--> and it will work fine.
If you want to add comments within css then you can use /* */, e.g:
<style type="text/css">
/* CSS START */
This works for you.
body {
background:red;
}
Ahhh yes, the problem is you have a html comment in the css, so it will not work after: –
Should be:
body { background-color:red; }
(You forgot the ; after "red")