I have some text and would like to make it more narrow so it doesn't span right across the screen. I have typed:
<body style="margin:20">
<body>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
However it doesn't seem to be doing anything to the text. Do I need to close my body style tag? Is margin the correct operator to use? (I am a very beginner, this is literally the first time trying HTML)
The basic syntax of an HTML page is
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
There is only one body for HTML.
So use div, span, p tags within the body for wrapping your content.
<body style="margin:20"> is bad code
Try <body style="margin:20px"> or <body style="margin:1%">
body {
margin: 20px;
}
<div>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</div>
add css on your html,
<style>
body {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
Without css just add style property on your body tag,
<body style="margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</body>
Remove second <body> tag
Add unit to margin (i.e. px)
<body style="margin:20px">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
Related
I'm trying to add color in the body property of my CSS in Codepen. Have not added anything but the title to the webpage, but it does not changes color regardless of where I put the tag. Tried to place the <body> html tag before <head>, erased <main>, still no change.
<!DOCTYPE html>
<html>
<head>
<title>Project Survey Form</title>
</head>
<body id="body">
<main>
<h1 id="title">Survey Form</h1>
</main>
</body>
</html>
<style>
body {
background-color: blue;
}
</style>
It keeps displaying the white background. Do you know of any workaround for this?
Codepen at CSS section, you don't need style tag
<style>
body {
background-color: blue;
}
</style>
to
body {
background-color: blue;
}
So I am having an issue with setting up my styles.css file and attaching it to my index.html file.
For some reason the body in the css file is overriding the h1 css.
Here's the code, and sorry if there's any glaring mistakes. I am brand new to this stuff.
h1 {
font-style: Georgia;
font-size: 48px;
color: red:
}
body {
font-style: Georgia;
font-size: 14px;
}
and my html index
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<head>
<title>rdhamill's personal github page. </title>
</head>
<h1> Github.io page for Rdhamill </h1>
<body>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
Edit: thanks for the help and sorry for the obvious issues!
Firstly, your h1 tag is outside the body, put that inside.
And in addition to that put the link tag inside the head tag.
And in addition to that remove : from the end of the color attribute in h1 style.
All your elements need to be inside the head or body tags. See the snippet below to see where your elements belong. The text inside the p tag is just to clean it up a bit.
edit: as per Dude Coder's above comment, fixed the CSS declaration. Make sure they always end in semi-colons, instead of colons.
Also changed font-style to font-family, which only needs to be set on the body (in this case, as all descendants will inherit it until it's changed elsewhere).
h1 {
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
<p>This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.</p>
</body>
</html>
Your HTML is too complex for an old browser to understand and render correctly. <h1> should be placed inside <body>. <link> should be placed inside <head>. Your CSS also has a typographical error. Either drop the final colon in color: red or type a semicolon; a colon won't work.
Back to the main subject:
The browser (a modern one) automatically places <h1> inside <body> and <link> inside <head>. And according to W3C, when you define the same style for an element and its child, the style defined for the child has priority over that defined for the parent element. Therefore, your body rule is not overriding h1. The problem is typographical: you typed a : instead of a ;
h1 {
font-family: Georgia;
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
One a side note: I replaced font-style with font-family. To specify the font, use font-family. font-style is used for enhancements (italic, underline, etc...).
I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div style="background-color: blue;">
<h1>hello</h1>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
You need to remove the margin on the heading as well. For example:
body, h1 {
margin: 0;
}
body, h1 {
margin: 0;
}
<div style="background-color: blue;">
<h1>hello</h1>
</div>
You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);
* {
margin:0;
padding:0;
}
Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.
Here's a simple reset.css file for you to include.
I want to move the elements inside mi tag element 80px to the right.
How ever, it does not follow my indications in the CSS file. Why?
*I've find a solution using a <div> element. But i want to know, what it is not working directly with the head tag.
This is my head tag:
<head>
<meta charset="utf-8">
<link href="website2.css" rel="stylesheet"/>
<!-- Branding and navigation go here -->
<h1>gonzales.com</h1>
<p>analyst</p>
</head>
And my CSS:
head {
text-align: left;
padding: 20px 0px 20px 80px;
}
SOLUTION with <div>:
<div id="headerr">
<head>
<meta charset="utf-8">
<link href="website2.css" rel="stylesheet"/>
<!-- BRanding and navigation go here -->
<h1>gonzales.com</h1>
<p>analyst</p>
</head>
</div>
CSS using div id:
#headerr {
text-align: left;
padding: 20px 0px 20px 80px;
}
That's because the head element can't contain p elements.
Specifically, the content model of head is
One or more elements of metadata content, of which exactly one is
a title element and no more than one is a base element.
Instead, the HTML parser closes the head and places the p element inside the body.
Therefore, p is not affected by styles set to head.
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}