CSS Animation Issue with Image - html

I have the following code which has a problem (See below).
<!DOCTYPE html>
<head>
<title>Duck</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel-"stylesheet" href="animate.css">
<!-- Tab Title -->
</head>
<body>
<div>
<div id = "header">
<img class = "duck animated zoomIn" src = "https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
</div>
<!-- Main Header -->
</div>
</body>
The main.css file is shown here
#header {
padding:10px 0 0 0 ;
}
img.duck {
margin-left: auto;
margin-right: auto;
display:block;
}
#page {
margin: 0px auto;
}
I am using the daneden animate.css file (https://daneden.github.io/animate.css/) which has a CSS file (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) full of animations.
Now, the duck sits in the middle of the page, but doesn't animate. It simply doesn't work.
Any solutions?
Thanks,
Dave.

You've made a mistake here
<link rel-"stylesheet" href="animate.min.css">
It should be = sign after rel

There should be rel="stylesheet";
Fiddle: https://jsfiddle.net/ypdahLtt/1/
Note that... The very first time you load the page you won't find any animation because the Image takes a little time to load. And by the time it loads the animation is over. But after that it will cache the image and you will see the animation just fine.
For this case Use: alt="The Duck" Attribute for your image... Then for first time load you can see the text animated.

<link rel-"stylesheet" href="animate.css">
is not correct. Please add:
<link rel="stylesheet" href="animate.css">
Please replace with rel= after rel-.

Related

HTML won't load linked CSS

I've been trying to learn HTML and have been following a tutorial online.(https://www.w3schools.com/html/html_css.asp) the tutorial does have some misinformation, so I've been looking on here for help as well. I have reached the point where you use external CSS files rather than using the <style> function.
My code is in /HTML/[ProjectName]/project.html, while my CSS is in /HTML/[ProjectName]/CSS/styles.css. Below are both files;
body {
background-color: powderblue;
}
h1 {
color: red;
}
p1 {
font-size: 200%;
}
<!DOCTYPE html>
<html>
<title> Linked CSS </title>
<head>
<link rel="style" type="text/css" href="/CSS/styles.css">
</head>
<body>
<h1> The CSS is in a separate doc </h1>
<p1> Let's see how this works out </p1>
<a href="/CSS/Styles.css" target="_blank">
<p2> Link to CSS file </p2>
</a>
</body>
</html>
From what I've read the css is properly linked to my file, and when I open the link it opens to the css page. What am I doing wrong?
Make sure you update your code to match your correct filename.
If your CSS is stored in the /HTML/[ProjectName]/CSS/style.css, then you should it like this
<link rel="stylesheet" type="text/css" href="CSS/style.css">
Try writing <link rel="stylesheet" type="text/css" href="CSS\styles.css">and check the spelling of your CSS file because they are different in question and in your code.
It`s easy. Take it
link rel='stylesheet' type='text/css' href='CSS/style.css'
and read W3School

I have tried linking my CSS to my HTML but it doesn't seem to be working

I am trying to learn HTML and CSS. I have tried using my CSS but it doesn't seem to be working properly.
HTML:
<head>
<link rel="stylesheet" type="text/css" src="styling.css">
<script src="../(public)/js/js.js"></script>
<meta charset="utf-8" />
<title>MyPortfolio</title>
</head>
CSS:
body
{
background : (red);
}
<link rel="stylesheet" href="./styling.css">
The folder directory of your CSS file determines how you link it.
Its best practice to link your script at the end of your web page, before the end of the body tag.
Its not "src", its "href".
<link rel="stylesheet" href="style.css">
I suggest you put that script tag on the bottom of your page.
Oh and one last thing, that css is incorrect. Here's what you should use:
body{
background:red; /* Or #ff0000 */
}

Brackets won't let me change the background colour of even a blank document using external CSS

I have been using Brackets for a school image and was trying to move div tags next to each other but was experiencing no change in visuals of the code and I wanted to check if there is an issue with the external CSS so I tried to change the background colour to no successes and haven't even been able to change the background colour of a properly set up blank document.
I have been using the following to try to change the colour.
body {
background-color: green;
}
And this is the blank html for the purpose of testing
<!DOCTYPE html>
<html>
<head>
<title>Solitare</title>
<link rel="stylesheet" href="Untitled-2.css" type="tex/css">
</head>
<body>
</body>
</html>
Am I missing something blindingly obvious or is there another issue?
Thank you very much. G. Ward
probably you have a mistake at <link rel="stylesheet" href="Untitled-2.css" type="tex/css"> try this <link rel="stylesheet" href="Untitled-2.css" type="text/css">
body {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Solitare</title>
<link rel="stylesheet" href="Untitled-2.css" type="text/css">
</head>
<body>
</body>
</html>
Your code is just fine!
you are only missing 1 thing a 'text' instead of 'tex'
<link rel="stylesheet" href="Untitled-2.css" type="tex/css"
should be
<link rel="stylesheet" href="Untitled-2.css" type="text/css"

CSS file loads, but its content does not

I've linked properly my css file to the html intended, and when I check the sources on chrome, the file is being actually loaded but it has nothing inside, its totally blank. However, in my ide, the file has the actual code I want to implement.
Forgot the code:
HTML
<head>
<link rel="stylesheet" href="static/styles.css">
<title>Title</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- load bootstrap css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<style>
body { padding-top:80px; }
</style>
</head>
CSS inside static folder:
.style1{
width:38%;
float: left;
margin-right:4%;
}

background image is not working

So, I have two files one is for html and the other one is for CSS
I made the connection between them like this:
<link rel="stylesheet" type="text/css" href="CSS/login.css">
here is my html code, i just started so there is'n much code
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="CSS/login.css">
</head>
<body >
<form>
<div>
</div>
</form>
</body>
and here is the css file
body
{
background-image:url("../Images/header.jpeg");
}
the problem is the background-image is not working
Joe
Please let us know the folder structure or the print screen of the same.
and also let us know is it the localhost or its the server.
It might be because of case you have CSS in capital letter which should be smallcase.
<link rel="stylesheet" type="text/css" href="CSS/login.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
It doesn't work because your body element doesn't have a width or a height.
try this:
body
{
width: 100px;
height: 100px;
background-image:url("../Images/header.jpeg");
}
Of course you don't have to give the body a fixed width and height. Just make sure that there is some content in it.
I believe if you add something between the blank divs your background picture should show.
Try like this: Demo
html
{
background:url("http://www.stockazoo.com/uploads/3/5/4/5/3545172/748777_orig.jpg") no-repeat 100% 100%;
height:100%;
}
Specify height as 100% for html, body along with background size:100%
Well it's because you don't have contents inside your body.
You can either:
Add content to body (Like obviously you would - but incase the issue is on other elements same logic applied)
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="CSS/login.css">
</head>
<body >
<form>
<div>
Background Show
</div>
</form>
</body>
Or Add height and width using css
body {
width: 100px;
height: 100px;
background-image:url("../Images/header.jpeg");
}