I'm having a problem with linking html to CSS. It doesn't work on Google Chrome, but it does on IE. Is there anything wrong with it. By the way, I downloaded the newest version of Google Chrome moments ago.
This is my html:
body{
background:black;
color:white;
font-family:arial,helvetica,sans-serif;
float:left;
}
h1{
font:"courier new"
size:14px;
color:yellow;
font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8"/>
<meta name="author" content="Alvex"/>
<link rel="stylesheet" href="../CSS/test.css"/>
</head>
<body>
<h1>Hello World</h1>
<p>Nothing here</p>
</body>
</html>
Thank You!
If it is working in IE then path must not be an issue.
Did you check network tab in chrome developer tools? See if the .css file loads.
<link rel="stylesheet" href="CSS/test.css"/>
use like above
Related
I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}
I am trying to use Londrina Shadow from Google fonts in my HTML code. I have typed this in the in HTML: <link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
The ampersand is blocked out and the link does not appear to be working.
I have typed this in CSS: font-family: 'Londrina Shadow', cursive;
It does appear to be working.
What is my problem?
use it like that
<!DOCTYPE html >
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Londrina Shadow'">Checking</h1>
</body>
</html>
you are using it in a wrong way
I write this sample code on notepad for an html site with css but this won't work on Mozilla(version49.0.etc) while it does on IE, Chrome and Opera. If i start it on FF, debugger says "CSS has no errors" but it only display html code.
Someone know how to fix it?
Here there are the codes(html and CSS) of my site on local path:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
<html lang="it">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="iso-8859-1">
<title>Site</title>
<style type="text/css">
</style>
<link href="C:/Users/Dean/Desktop/Site/File/file1.css" rel="stylesheet" media="all">
</head>
<body class="sub">
<div class="alt">
<h1>Text here</h1>
</div>
</body>
</html>
And here there is the CSS file properties:
.sub{background-image:url("../image/bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
.alt {background-color:hotpink;
box-align:right;
border-radius:10px;
}
.set {font-size:12px;
color:white;
}
I'm assuming it is because your stylesheet is linked via the non standard file protocol (href="C:/Users/Dean/Desktop/Site/File/file1.css"). From my experience, Firefox usually complies to standards more than other browsers.
I'm assuming this is why your example works in other browsers, but not in FF. Try serving your stylesheet using an HTTP server.
So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}
I'm working on a website and my website has to work in Chrome and in Internet Explorer 9. I'm almost finished and I have only one problem left. If i want to load an image with "content: url()" it works perfectly in Chrome but not in IE9. Can somebody please give me another solution where I where i don't have to change my HTML.
My HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="test.css" />
</head>
<body>
<header>
</header>
<a id="photo">Photo</a>
<footer>
</footer>
</body>
</html>
My css:
#photo {
content: url('right-button.png');
}
Try this:
#photo {
background: url("right-button.png") no-repeat;
}
For more informations read here some articles i found for content attribute:
content property,W3c