I'm trying to design a simple page about pets I would like to have. I can't seem to figure out why my HTML won't link to my CSS file. I'm using Atom.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
p {
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My Website about Pets</title>
<link rel="stylesheet" href="styles.css" type = "text/css" />
</head>
<body>
<h1> Pets</h1>
<h3> Below is a list of descriptions of pets that I would like to have. </h3>
<div class="center">
<img src="https://s7d1.scene7.com/is/image/PETCO/ball-python-1" alt="Ball Python"
height="200">
<p> A picture of a noodly boi</p>
</div>
<h2>Ball Python</h2>
<p> I would like to have a pet ball python. I don't care what gender it is, but it's name will be Goose.</p>
</body>
</html>
These files are both in the same folder on my desktop.
Related
This is sample code(HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 class="title">Welcome to this website</h1>
</body>
</html>
This is what I did in CSS:
#title{
text-align: center;
}
Problem:
When I don't use the id attribute the text don't gets aligned to the center, but when I don't use the id attribute the code does what it should. Am I doing something wrong while using the id attribute or we cannot align the text to center using any attribute we should name the tag in CSS?
When you are using class you have to use "." whereas "#" is used in case of id.
You can also do it with inline styling in html as below:
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 style="text-align: center;">Welcome to this website</h1>
</body>
</html>
using # in CSS is id selector
.title{
text-align: center;
}
when your use classes
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 including adding display: block to the 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:
<!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">
<link rel="stylesheet" href="style.css">
<title>Home Page</title>
</head>
<body>
<div class="logo">
<img src="images/logo.png" alt="Stuff logo">
</div>
<div class="button">
<button type="button">Home</button>
<button type=button>Contact</button>
</div>
</body>
</html>
This is the only things I have in my css file:
body {
margin: 0 auto;
}
.logo {
max-width: 200px;
max-height: 200px;
}
.button {
border: 3px solid green;
}
sir here is final answer
sir you had given the class logo to the not to the img
so you have add class to the img not to the
if css you have just do this
<div class="logo">
<img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="Plants and Things logo">
here is css
.logo img {
max-width:20px;
}
this will work
There are few region behind it
for example
you didn't link the css file with html file.
size of your logo may be smaller then max-size
but as solution i would suggest you to use the css in the img for the temporary solution
like this
try to change with this
<img class="logo" src="images/logo.png" alt="Plants and Things logo" style="max-width: 20px;max-height:20px">
also by using the
body{
background-color:red;
}
you can check that your css file is linked or not
also check the console errors
*That's the file index.html*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles\styles.css" rel="stylesheet" type="text\css">
<title>24/7-Clanshop.de</title>
</head>
<body>
<h1>24/7-Clanshop</h1>
<p>The official shop for your 24/7 streetstyle!</p>
<ol>
<li>Hoodies</li>
<li>Jogginghosen</li>
<li>Socken</li>
<li>Accessoires</li>
</ol>
<p>Look up to the Channel</p>
<img src="pictures\testpicture.jpg" alt="My test picture">
</body>
</html>
*That's the file styles.css*
p, li, h1 {
color:#ff0000;
width: 500px;
border: 1px solid black;
}
When i run this programm, neither the picture nor the font color can be displayed. Is it due to my browsersettings or am I overlooking something completely different?
I am creating a test website with Angular, just to learn some things. First I put everything into the index.html, and this is the look I came up with:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
I then copied this html code and entered it into the app.component.html. Back in the index.html, I changed
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
to
<body>
<app-root></app-root>
</body>
But then my Site started to look like this:
Where did I make the error? My app.component.css is empty, so there is nothing able to change the look of that background. I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill. When I put this into the app.component.css:
body {
position: absolute;
}
,then i get this:
I'm just a starter in html/css, but all the tutorials about background images changed nothing for me
Looks like you have two body tags, according to your answer ofc :)
One here (index.html) and second in app.component.html:
<body>
<app-root></app-root>
</body>
You can probably keep body into app.component.html, but you should remove it from index.html. And apply display: block; height: 100% for app-root, I suppose.
The image tag does not work. Not sure if I'm missing something or I added the image tag incorrectly. The image is in the same folder, so there's no problem in inserting the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="type the content description here" />
<meta name="keywords" content="type, keywords, here" />
<link rel="stylesheet" href="text.css" type="text/css" />
<style type="text/css">
h1.align1 { text-align: center; }
h2.align2 { text-align: center; }
h3.align3 { text-align: center; }
</style>
</head>
<body style="background-color: black;">
<h1 class="align1" style="color: yellow;"><font size="8"> TEXT </h1>
<hr style="white" />
<h2 class="align2" style="color: red;"><font size="10"> TEXT </h2>
<hr style="white" />
<h3 class="align3" style="color: blue;"><font size="10"> TEXT </h3>
<img src="years1.jpg" />
</body>
</html>
You have to close your font tags (the unfinished tags may affect elements following these, in this case "image").
For example:
<h1 class="align1" style="color: yellow;"><font size="8"> TEXT </font></h1>
font tag is deprecated obsolete in HTML5 anyway, so you should write like this:
<h1 class="align1" style="color: yellow; font-size: 8em; "> TEXT </h1>
It's a img path issue. Please use a suitable file path for the image,
and also remove the font tag and use it under style.