I am trying to embed css style sheet in one of the html but its not working.Can anyone help me out ,your help would be appreciated.
Following is the cide which i have tried.
Css:
<head>
<title>Embedded Style Sheets</title>
<style type=”text/css”>
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
-->
</style>
</head>
HTML:
<html>
<head>
<title>Embedded Style Sheet </title>
<link rel=”stylesheet” type=”text/css”
href=”D:\SelfStudy\HTML\16-Embedded.css” />
</head>
<body>
<p>This page is using an emebedded style sheet... </p>
</body>
</html>
Remove all HTML markup from the CSS file. It should contain only what you now have between <!-- and --> (without those constructs). In the HTML document, fix the link tag as follows, assuming that the CSS file is in the same directory:
<link rel="stylesheet" type="text/css"
href="16-Embedded.css" />
Your .css file should just be the styles like:
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
The css file shouldn't have the html tags or you can add the styles to the head of the html file where it is being used.
http://www.w3schools.com/css/css_howto.asp
I think you are trying to embed an external CSS source file. You know we can embed css in html in three ways and they are:
1. External
2. Internal and
3. Inline
I think here you are trying to embed the first one.
To do so firstly you have to create a file with .css extension and it may be something like you mentioned 16_embeded.css. In this file you have to put just the CSS code not any HTML tags. That means you should put just the following code into your 16_embeded.css file.
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
Now you have to create another file with the extension .html and then put the HTML code portion you mentioned above in this file(.html). Hope it's working well.
Please check the href portion where you are giving the file name is correct or not. Here I should mention that your HTML code portion is correct if the css file path is correct.
Thanks
Related
I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;500&display=swap" rel="stylesheet">
<style type="text/css">
.topRight {
position:absolute;
top:0;
right:0;
}
.data-body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7
}
.option, .span {
font-size: 14px;
}
.p {
font-weight: 300;
font-size: 16px;
color: #333333;
line-height: 1.22;
}
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
</style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
</div>
<div>
${databody}
</div>
</body>
</html>
the variable databody is being set from the backend. It has content like
<h1>Something</h1>
<h2>foo bar</h2>
css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.
How can I get this working.
It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.
Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.
.h1 means that you want to select all class="h1" elements.
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
You can select the <h1> directly and apply css to it via h1{...}
It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.
There are couple of issues here.
The css for html tags should be named without the preceding dot.
For example .h1 should be h1
Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.
If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.
So the solution here is ${databody} should be ${databody?no_esc}
More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping
I have the Inter font. I got it from Google Fonts. But It can't be shown. Seems like arrow doesn't see the font. You can see it.
Instead of the same arrow on Google Inter Font page
css:
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Inter', sans-serif;
}
</style>
</head>
html:
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
What is wrong?
if you want to use custom fonts you should copy these fonts to your project folder, after that use this code of CSS to add them to your document
#font-face {
font-family: Inter;
src: url(sansation_light.woff);
}
replace this src with your font address you copy in your project
just use this code:
It's work for me
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">
<style>
body{
font-family: Inter, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
div{
font-family: Inter;
font-weight: 400;
font-style: normal;
font-size:x-large;
}
</style>
</head>
<body>
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
</body>
</html>
So I've checked out another question being answered on this and attempted this on my own. I want to use the Lobster two font and I'm not sure what I'm doing wrong.
Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Cogna</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<table id="site">
<tr>
<td id="Cogna">Cogna</td>
<td style="border: 2px solid black; border-collapse: collapse;">a</td>
</tr>
<tr>
<td style="border: 2px solid black; border-collapse: collapse;">a</td>
<td style="border: 2px solid black; border-collapse: collapse;">a</td>
</tr>
</table>
</body>
</html>
CSS:
#font-face {
font-family: 'Lobster Two';
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}
#Cogna {
font-family: 'Lobster Two', Times, serif;
font-size: 5em;
border: 2px solid black; border-collapse: collapse;
padding: 18pt;
width: 20%
}
#site {
border-collapse: collapse;
width: 100%;
}
I know I've asked it to replace with Times New Roman if it can't find the font, but I really want to use the font.
Any help would be great. Thanks.
Edit: this is the exact link to the font: https://fonts.google.com/specimen/Lobster+Two.
Referencing a link to the font is fine, but downloading the font is preferable. I did mine according to this answer.
Go to https://google-webfonts-helper.herokuapp.com/fonts
Pick the font(s) you want and download the files
Drop in the generated CSS from the page, and reference the CSS file in your HTML like so:
<link rel="stylesheet" href="path/to/styles.css">
Google is friendly enough to give you a step by step guide on how to use their fonts.
More details on their wiki
2 Method in order to add Google font :
Standard :
Add this in the head of your html file <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
CSS:
Apply the family to which ever elements you choose in your style.css file such as:
h1 {
font-family: 'Lobster', cursive;
}
I think you need to change this
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
into thissrc: url("http://fonts.googleapis.com/css?family=Lobster+Two");
Try including the font using this:
#import url('https://fonts.googleapis.com/css?family=Lobster+Two');
instead of
#font-face {
font-family: 'Lobster Two';
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}
use this in your html file: <link href="https://fonts.googleapis.com/css? family=Lobster+Two" rel="stylesheet">
add this in your css where you want to apply the font there
font-family: 'Lobster Two', cursive;
try this .. good luck :)
In the style sheet use
#import url('https://fonts.googleapis.com/css?family=Lobster+Two');
Then where you want to apply the font:
font-family: 'Lobster Two', cursive;
im just beginner at CSS, so i have a problem i wrote a simple code, IE shows correctly, but Firefox didint, how can i solve this problem? whats wrong with the code? Thank you. As i say, im beginner so sorry for stupid questions. :)
here is the code
h3 {
color: "blue";
font-size: "20px";
font-family: "verdana"
}
p {
color: "white";
background: "blue";
font-family: "helvetica";
text-indent: "1 cm"
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
First is CSS I called it stiliai.css, secon is html called index.html
Remove the quotes wrapping your colors. Quotes are not required while specifying colors.
Change
h3 {color:"blue"; font-size:"20px"; font-family: "verdana"}
to
h3 {color:blue; font-size:"20px"; font-family: "verdana"}
Your issue is with your use of " within your css. These are not needed:
h3 {
color: blue;
font-size:20px;
font-family: verdana
}
p {
color: white;
background: blue;
font-family: helvetica;
text-indent: 10px; /*cm are not commonly used in css*/
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
Your use of " would only be necessary when you're using the likes of html.
They are not used in css files.
<!DOCTYPE HTML>
<HEAD>
<style type="text/css">
#font-face { font-family: Blah; src: url('../fonts/WillyWonka.ttf');
}
span.header {
font-family: 'palatino linotype', palatino, serif;
font-size: 36px;
font-weight: bold;
font-variant: small-caps;
color: white;
text-decoration:none;
padding: 20pt;
}
span.content {
font-family: 'Blah', arial, serif;
font-size: 36pt;
}
#contacttable {
position:absolute;
left:20%;top:15px;
}
#contacttable td {
position:absolute;
}
</style>
</HEAD>
<BODY bgcolor="black">
<Table id="contacttable">
<tr>
<td>
<span class="header"> Title of Section </span>
<hr />
<br><br><br>
<span class="content"><font color="red">l</font><font
color="orange">o</font><font color="yellow">w</font>
...
for some reason changing the font has made it not work. any help? (source http://theriverbendstreetbeach.org/nads/misc/showyou.html )
Remember that CSS url paths are relative to the CSS file (or in this case the html that declares the CSS).
By saying url(../fonts/WillyWonka.ttf) your are instructing the browser to look one directory up from the HTML, and then down into the fonts folder:
http://theriverbendstreetbeach.org/nads/fonts/WillyWonka.ttf
And it would seem your font file is actually located at:
http://theriverbendstreetbeach.org/fonts/WillyWonka.ttf
So for this particular HTML file, I would change the url path to url(../../fonts/WillyWonka.ttf);
As posted by Shad in comments, your font is missing from http://theriverbendstreetbeach.org/nads/fonts/WillyWonka.ttf.
You can easily debug these kinds of problems yourself by using a tool such as Fiddler: http://www.fiddler2.com/fiddler2/
It is a proxy that shows you all of the requests, and their status codes. 404s show up in nice red.