when I'm refreshing sass file, a new div is added to the page, when I'm refreshing html file this extra div disappears
<html>
<head>
<style type="text/css">
body {
opacity: 0;
overflow-x: hidden;
}
html {
background-color: #fff;
}
</style>
</head>
<body>
<div>
<p>H</p>
</div>
<link rel="stylesheet" href="css/main.min.css">
<script src="js/scripts.min.js"></script>
</body>
</html>
Pastebin CSS
Img2
Related
body {
background-color: black;
}
h1 {
font-size: 1000px;
font-color: white;
}
p1 (
font-color: white;
)
The text won't show up when I run the code. I don't know what I'm missing but it's probably something small. Also, no, the text color is not the same as the background/
<!DOCTYPE html>
<html>
<head>
<title>Track Back Photography</title>
<link rel="stylesheet" style="text/css" href="trackback.css"/>
<script src="trackback.js" style="text/javascript"/>
</head>
<body>
<h1>About Me</h1>
<p1>This is test text</p>
</body>
</html>
There are a few issues here:
1) <script> should not be self closing. Change that to <script src="trackback.js" style="text/javascript"></script>
2) p1 is not a valid HTML element. Change that to p
3) Your CSS has p1 ( ... ) which is also invalid, as these parenthesis should be curly braces. Also, change that selector to p so that it reads p { ... }
4) You have style in your script tag, where you should have used type there.
5) Use color instead of font-color in your CSS.
Check out this working example:
body {
background-color: white;
}
h1 {
font-size: 1000px;
color: black;
}
p {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Track Back Photography</title>
<link rel="stylesheet" style="text/css" href="trackback.css" />
<script src="trackback.js" type="text/javascript"></script>
</head>
<body>
<h1>About Me</h1>
<p>This is test text</p>
</body>
</html>
If you use background color black, then you should use color white instead of style of font. suppose style footer
<style> footer { background-color:black; color:white; } </style>
body {
background-color: white;
}
h1 {
font-size: 1000px;
color: black;
}
p {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Track Back Photography</title>
<link rel="stylesheet" style="text/css" href="trackback.css" />
<script src="trackback.js" type="text/javascript"></script>
</head>
<body>
<h1>About Me</h1>
<p>This is test text</p>
</body>
</html>
I'm getting a border-radius bug on the latest version of Chrome (working properly on Firefox) that lasts the time of an animation that uses opacity on a div from an HTML page [b. html] inserted in another HTML page [a. html] with object.
I tried other solutions (jQuery, Web Components...) without getting what I wanted and I honestly preferred to stay with object for this particular project even though it is an aging technology.
Screenshot
a.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<object id="b" data="b.html"></object>
</body>
</html>
b.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hi, how are you?</div>
</body>
</html>
style.css
* { margin: 0; padding: 0; }
body { background: blue; }
#b {
width: 400px;
height: 400px;
border: 10px solid black;
border-radius: 40px;
overflow: hidden;
}
div {
height: 400px;
background: white;
text-align: center;
animation: ani 2s forwards;
}
#keyframes ani {
0% { opacity: 0; }
100% { opacity: 1; }
}
Thanks for your help!
Just as example, here is the jQuery version I found [a.html]
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#b").load("b.html");
});
</script>
</head>
<body>
<div id="b"></div>
</body>
</html>
enter image description here
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/cycle2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css">
</head>
<body>
The stylesheet:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
...
I am using notepad++ and I have saved my CSS file in the notepad++ documents file as cssforsliding.css and I believe I have linked my HTML and CSS correctly but it doesn't seem to be working!
Help would be greatly appreciated.
EDIT: Sorry I should have been clearer: the CSS part in my question is the CSS for an EXTERNAL CSS file. So I actually want to link my HTML to an EXTERNAL CSS file.
EDIT2: I have moved my css file inside another folder within the folder where my HTML (and CSS) is located and specify that folder in my HTML and now it works strangely! Thanks everyone :)
enter image description here
I can't try this solution at the machine I'm on (at work), but it might work if you just close the tag
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css" />
If not, it looks tidier and follows HTML5 in any case.
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="cssforsliding.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
}
</style>
</head>
<body>
</body>
</html>
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 6 years ago.
I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?
Try to put your import on the top of your file, before any declaration.
Include the #import directive at the top of the file.
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
You can remove:
#import url(https://fonts.googleapis.com/css?family=Raleway);
And add:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
To your <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Try to add the following in the head section of your html code and see if it fixed the problem:
<meta charset="UTF-8">
In addition, you need to move the #import to the top of the CSS file, so the font will load
I am teaching myself css and html and I created a stylesheet and broke it up into different elements (background image, cursors, etc). I am referencing the entire css file in the main html file but when I run the application I get a blank screen. What am I missing? Here is my code. First, the stylesheet
html, body
{
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background
{
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor
{
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Destiny Saga</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="Assets/Graphics/title.ico" />
</head>
<body>
</body>
</html>
Here is what you probably meant:
html, body {
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background {<--It is Bad to name an ID background... you probably want to just do div here...-->
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor { <---you could just add cursor to the above so that it will be like that in the above div-->
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="./Assets/Graphics/title.ico" />
</head>
<body>
<div id="background">
<h1> Hello World</h1>
<div id="mycursor">
</div>
</div>
<script type="text/javascript" src="./Javascript/Main.js"></script>
</body>
</html>
Things that are certainly wrong:
The img element is missing a src attribute
The #mycursor selector matches an element with id="mycursor" and you have id="#mycursor"
The #background ruleset doesn't match any element
You might have other issues (such as incorrect URLs).
In short, there is nothing in your HTML that should create a visible effect, and none of the styles that apply to it will change that.
Change:
<img id="#mycursor">
to:
<img id="mycursor">
In css you use # for ids, but in html you dont have to write the #