why does my html link with css but not my img - html

HTML:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Hello World!</h1>
<h2>A few facts about the world we live in</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" />
</body>
</html>
CSS:
img {
width: 300;
}
h1 {
font-family: Georgia;
background-color: red;
}
I have saved my html and css in the same folder. My css file is named as stylesheet.css.
I am able to edit but not through my css file which means my css file and html are linked but I somehow can't seem to edit images. Somebody help me!

the issue is your units. 300 of what? You need to add a % or px or em.
img{
width:300px;
}
Fiddle with 300px
https://jsfiddle.net/jL7Lqfv8/

Are you sure your CSS is being pulled in? Check your network tab in your browser to ensure it is. Also, try giving some units to the image width:
img {
width: 300px;
}

Related

Resize logo image

So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>

Website not using imported Google Font locally but working in codepen

I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">

HTML images dissappearing,not loading

I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>
Your div is of 0 height - background-image doesn't give it any height.

What I am doing wrong here, my style sheet is not loading up

I have created an external style sheet and name it style.css.
style.css
#topbar
{
background-color: red;
width: 1000px;
height: 40px;
}
body{
background-color: green;
}
Now I am calling this style.css from the root folder but its not working. I copied the style.css on both within internal folder and on root but still not loading up.
<html>
<head>
<title>BBC News Site/title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>
<title>BBC News Site/title>
fix it into :
<title>BBC News Site</title>

HTML Paragraph parallel with Image

I am new to stackoverflow. I'm asking about HTML code. On my sourcecode, I have an image that's 214px height(and 163px width). I Have a figcaption with that also. If I Set a paragraph tag with that it won't appear next to it, but under it. I'm trying to avoid a CSS "position: absolute" answer because i want this to be mobile compatible as well. Just wondering if we can make it so a p tag appears to the same height but to a set weight parallel to the image. Here's my code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Personal Webpage | Home</TITLE>
<meta charset="UTF-8">
<meta name="description" content="content, homepage">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE-edge, chrome=1">
<link rel="shortcut icon"
href="favicon.ico"
type="image/x-icon" />
<link href="style.css" type="text/css" rel="stylesheet" media="all and (max width: 5120px)"/>
</HEAD>
<BODY>
<div class="center">
<header><img src="header.png" alt="alttext" height="44px" width="792px" border="1px"/></header><br><h3><b>lorem ipsum dolor solem amit</b></h3></div><br><img src="img/image1.jpg" alt="" height="214px" width="163px" border="1px"><figcaption>Caption</figcaption>
<p style="border: 1px solid black;" width="100px" height="214px">lorem</p></p>
</BODY>
</div>
</HTML>
It's hard to answer this with the information provided but here are some ideas to try.
You can float the p next to the img or set it to display mode inline-mode.
Try absolute css property. Paragraph re sizes it self with smaller screen
p{
position:absolute;
left: 200px;
top: 40px;
}