I am making a survey and I need to centre the h1 in the centre of the page. It seems to work on Codepen.io but doesn't seem to work on VS-CODE.
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Milkshake Survey 2020</title>
</head>
<body>
<h1 id="MS">Milkshake Survey</h1>
</body>
</html>
and CSS:
#MS {
text-align:center;
}
It seems to have worked on code.io
link: https://codepen.io/abhirajsb/pen/xxVgGwj
But on VSCODE it does not seem to work and the title is always on the left.
I need to know what mistakes i am making. (i am a beginner)
I had to include a link in my HTML file to connect the HTML page to the css.
<link rel="stylesheet" href="survey.css">
Thank you to #rioV8 for the quick response and others for the contribution.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<img src="DFDD.png">
</body>
</html>
the image is not showing while using links is there something wrong with it, the image is in the same folder...i am using brave browser...the webpage is when run completely blank....really can't figure out whats wrong with it
//this problem occurs only while using the live server extension of vs-code..
try to use ./YOUR_IMAGE_NAME instead of just YOUR_IMAGE_NAME. I hope it will work.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
</body>
</html>
When I run this code, I see 'My Page' in my Browser's Title Bar and in Body too!
Why am I getting this?
Because <head> and <title> are just tags, like anything else. And the * selector picks them up too.
For kicks, take a look at this fiddle, which clearly demonstrates when you give head and title a display:block style, they indeed show up as text on the page:
HTML
<body>
<p>hi</p>
</body>
CSS
head, title {display:block}
Output
- jsFiddle demo
hi
For a bit more fun, we can color things too. And we even learn something about the inner workings of JSFiddle in the process. It looks like they inline your style in a <style> tag inside the <head>. Ha!
No. It doesn't and wouldn't output such a result. Have you tried refreshing/clearing the cache of your browser?
This one got me really stumped. I have stripped a problematic website of basically everything, being left with the most trivial barebone site you can imagine:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test site</title>
</head>
<body>
<img src="http://placekitten.com/200/300" />
</body>
</html>
...and yet, the img tag doesn't work. I get an empty website - and the W3 validator throws errors like Element img not allowed as child of element body in this context. (Suppressing further errors from this subtree.). What am I doing wrong? I have no idea what can be causing issues in a markup that consists of basically no elements other than the img and the ones required.
<!DOCTYPE html>
<html>
<body>
<img src="http://placekitten.com/200/300" alt="W3Schools.com"
style="width:104px;height:142px;">
</body>
</html>
As mentioned in the comment, there were 2 invisible characters after img and src.
I used text-compare to figure out this, please refer the attached screenshot.
This question already has answers here:
How to link a CSS file from HTML file?
(2 answers)
Closed 1 year ago.
I am very new to coding, but have the basics down for the most part. I recently downloaded Atom and created very simple HTML and CSS files. I used the standard link method (as shown in the code), but cannot seem to get my css to link. My only install thus far has been webBoxio/atom-html-preview.
HTML:
<!DOCTYPE HTML>
<HTML>
<body>
<link rel="stylesheet" type="text/css" href="mine.css">
<h1>test</h1>
<p>test</p>
</body>
</HTML>
CSS:
h1, p {
font-family: Sans-Serif ;
}
As others said in the comments, the <link> tag should go between <head> and </head> tags.
So the code is:
<!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="mine.css">
</head>
<body>
<h1>test</h1>
<p>test</p>
</body>
</HTML>
However, your code worked for me on Firefox.
Also, I suggest you this website if you wanna learn html (if you haven't found it yet): http://www.w3schools.com/
The reason is both files need to be in the same directory. Had the same problem and couldn't figure it out until I changed that. Both HTML and .CSS need to be in the same folder, not in the same folder within the other. Hope this helps other peeps in the future.
im currently makeing some form
you can see at http://jsfiddle.net/AnMSa/
it is working fine
but when i run it on my localhost.. it turns like
ive countered this bug till yesterday, and now its time to me to look for help.
heres the html if anybody wants to download it http://www.mediafire.com/?vzi7kjgcdzldh48
please tell me everything that can reproduce this kinda bug.
The html file isn't valid html. it doesn't include the html or body tags or the doctype.
It works fine if you add your content in the following:
<!doctype html>
<html>
<body>
<!-- add content here -->
</body>
</html>
Or you can use the html5 boilerplate code from http://html5boilerplate.com/
You have to determinate your Doctype.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!--- content -->
</body>
</html>
Do it and it will be fixed. You see it ok onjsfiddle because they have already defined the Doctype.