For example, a.html
<link rel="stylesheet" href="a.css">
a.css
.bg {
width: 100%;
background: url(/a.gif) bottom repeat-x;
}
The browser will get a.html first, then a.css, then a.gif.
Is there anyway to put a.gif in html so the browser can request a.css and a.gif at the same time?
Yes, you can use the prefetch tag, like this in your <head>:
<link rel="prefetch" href="/a.gif">
Related
I have a Next.JS site that sometimes needs to be accessed by a backend process to generate a PDF of the contents on the page. The problem is, when generating the PDF, I only have access to the HTML of the page (i.e., links out to external stylesheets do not work). To work around this limitation, I would like to put the page's stylesheets directly in <style> tags in the page's <head>. For example, the following code
pages/test-page.tsx:
import TestPageStyles from '../styles/TestPage.module.css';
const TestPage = () => {
return <div className={TestPageStyles.example}>Example styled element</div>;
};
export default TestPage;
styles/TestPage.module.css:
.example {
color: white;
background-color: red;
text-decoration: underline;
padding: 10px;
margin: 100px;
text-align: center;
}
Produces (approximately), the following HTML:
<html lang="en">
<head>
...
<link
rel="preload"
href="/_next/static/css/66df4145b26ca3d2.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/66df4145b26ca3d2.css"
data-n-p=""
/>
...
</head>
<body>
<div id="__next">
<div class="TestPage_example__JxNEo">Example styled element</div>
</div>
</body>
</html>
where .TestPage_example__JxNEo is in /_next/static/css/66df4145b26ca3d2.css
Instead of the <link>s in the head, I'd like to have something like this:
<head>
<style rel="stylesheet">
.TestPage_example__JxNEo {
color: white;
...
}
</style>
<head>
I understand that this is less efficient than the built-in way Next is doing things but this is unfortunately a hard requirement for my project. Is there any way to achieve this using idiomatic Next?
index.html file contains this
<link href="style.css" type="text/css" rel="stylesheet"> <link>
<nav class="header">
<img src="/Users/DeMarcus/Desktop/DevProjects/Websites/CodeCademy/p.4 Datsomo/Resources/images/pattern.jpg" alt="">
<h1>Dasmoto's Arts & Crafts</h1>
i Have this link which I'm using to connect my html file to my css file. Its just that when i load my page it appears without any css.
I know I've written my css correctly and used classes to identify my div containers. Can anyone help me with what I'm doing wrong here?
css file contains this
header{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;`.
}
try this :
<link href="./style.css" type="text/css" rel="stylesheet">
By adding ./ before style.css, you are explicitly telling the browser that your file is in the same folder.
Also, check the case of the css file. I can see that in the img src you have used capital characters and spaces. Try to avoid spaces and capitals in file names as servers are usually case sensitive.
First check if the css is getting loaded.
To check this right click on the page -> view page source. Click the link in the href attribute to see if you get your css file.
If you can see your css file you probably have a syntax error in your css file.
If you can't see your css file, you need to change the link to your css file.
To link to your css file use this syntax:
<link rel="stylesheet" type="text/css" href="style.css">
It also seems you need to change the code in your css file to something like this:
.header {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
Note I added a . before the header, since it is a class.
Another note: you should close your <nav> tag.
I have the code bellow in the html file and the problem is the background picture is not showing, nor when I try doing it from the css file. Can somebody help me out what am I doing wrong? Thanks in advance!
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
try using !important
<head>
<style>
body{
background-image: url("trees.jpg") !important;
}
</style>
</head>
First of all you need to set height of your body if their is no-content in the body then the image will not show
secondly, this code will only work if your html file and image are both in same folder
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
if the image is in say img folder then you need to do this
body{
background-image: url("img/trees.jpg");
}
but if the img folder is not in the same directory as html but is in it's parent directory. you need to do this
body{
background-image: url("../img/trees.jpg");
}
Most likely it can't find the file destination, try to check if you typed the file name right, even the file extension. Sometimes is the file extension in uppercase, like ".JPG".
If I use css code directly inside of the html code it works.If I use by linking css file inside of the html by tag it is not working.But I tried with ffox viewsource and link for css redirects to the perfect CSS.Please enlight me in this Case.Thanks in Advance.
CSS(POStyle.css) File included like this in HTML :
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
POStyle.css has
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
CSS inside the html directly :
<style type="text/css">
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
</style>
When using:
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
The browser uses the string literal $contextpath/css/yes/POStyle.css to request the CSS file. There is no replacement that occurs as you would expect in JSP files or some other view technology.
You must use either an absolute or relative url to the file:
Relative
<link href="../css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Absolute
<link href="http:/www.mydomain.com/context/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Use {$contextpath} instead of $contextpath. It is a smarty variable.
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />