I am trying to make an html news letter (email template). Can I attach a CSS file to this template? Will it work properly?
No you can add only on inline css like
<div style="color:#000">Hello</div>
look like this sample
<html>
<head>
<title>
<!--mohammad reza ashouri :megacoder999#gmail.com -->
</title>
<style>
<!--
p { color:#009900;
font-family:"comic sans ms",sans-serif; }
h1 { color:#660000; font-size:12pt; }
-->
</style>
</head>
<body>
<h1> email template </h1>
<p>I am a very basic emaol template.</p>
......
</body>
</html>
Related
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! :)
I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:
// index.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
// page_style.css
body {
body stuff
}
css_nav_thing {
src: (url="menu.html")
position: stuff;
margin: stuff'
}
.content_div {
position: stuff;
margin: stuff;
andstuf: stuff;
}
// nav_menu_style.css
body {
stuff: stuff;
]
a {
color: #374;
andstuff: stuff;
}
// content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// some_other_content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Or can we do this with a <link src="menu.html" /> tag???
Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!
If it is possible...how would I do it?
Use Jquery
menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
some_other_content_page.html
<html>
<head>
</head>
<body>
<div id="includedContent"></div>
//some_other_content_page.html content
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("menu.html");
});
</script>
</body>
</html>
Download Jquery
.load() documentation
I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<--THIS IS WHERE YOUR MENU GO-->
<?php include 'menu.php';?>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
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>
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")