Behaviour of margin of h1 tag - html

I have index.html which looks like follows:-
html {
background-color: #0000FF;
}
body{
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<div style="height: 100px; width: 100px;"></div>
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>
Initially the margin of h1 is with the window and there is some extra space above body element. But if i add border: 1px solid black to my body element the margin of h1 is with body element.
Why is this so? The border of body element was present even before but we were not just displaying it right?

You can use box-sizing: border-box;

Many browsers have a default user agent stylesheet which automatically adds some styles - even if you haven't specified any.
For example, in chrome, i can see that the h1 will be given a slight margin-before and margin-end which would give you the gap between the body and H1.
You can override this default style-sheet by using one of many reset style-sheets example here
User agent stylesheets will be overridden by any other styles in the following order:
Browser/user default
External
Internal (inside the tag)
Inline (inside an HTML
element)
It may also be worth reading up on css specificity as it explains a lot of simple problems you may come across

Related

Why is <style> tag not working in this code?

So tag never seemed to like me a lot. It always caused me problems, but it was always turning out that their solution was obvious and I was just stupid. But this time, I am spending 4TH HOUR trying to figure out what could've gone wrong (this is exactly why I even named a body content div "body", IK this is unnecessary lol). Here is the code:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive; color:white;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p style="position:absolute;top:100px;left:20px;font-size:40px;">Hello</p>
<p style="position:absolute;top:140px;left:20px;">This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</div>
</body>
<!--break-->
</html>`
It's because the <div class="body"> has a height of 0. It only contains absolute positioned elements, which don't take up any space, so its basically empty.
Some suggestions:
Learn to use the browser's debugger (DOM Inspector). It will show you information about the elements such as their size and applied styles.
Avoid absolute positioning. It basically breaks how CSS works which makes it difficult for beginners.
EDIT: One more thing: You have a opening <strong> tag without a closing </strong>. Keep in mind you can't put block elements (such as <p>) inside inline elements such as <strong>.
I found your mistake.
Navigate to html tag, there you can see the style attribute, with color=white.
This is making all the text white, which is same as canvas therefore it is invisible.
Now, the text tags are absolutely positioned, meaning they are outside the flow, so the height and width of the DIV is 0, so you cannot see any color because the div is essentially a 0x0 box.
I have adjusted the changes, please check:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p>Hello</p>
<p>This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</strong>
</div>
</body>
<!--break-->
</html>`
I don't think it's about where <style> is.
But it's your children (elements) are postition: absolute; so .body is 0 height.
Try:
<div class="body" style="height:100px">
So you I will see the problem
(This is just testing, please look at RoToRa's answer)
Because it's outside of closing </head> and opening <body>
It supposed to be between <head> and </head>

Can't change body background and body font at the same time [duplicate]

This question already has answers here:
Assigning multiple styles on an HTML element
(4 answers)
Closed 1 year ago.
Hey guys so basically I've been learning html and Css these past couple of days. I'm having trouble assigning a background color and font color at the same time.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" >
<title>Practice blog</title>
</head>
<body style="color: blue;">
<body style="background-color:lightblue;">
So basically if I put the background color one on top the font of the text won't change, only the background. If I put the one where it changes the font the background won't change. What can I do about that?
Congratulations on starting your journey with learning HTML and CSS!
Two things to keep in mind:
Each HTML file can have only 1 body tag. A good way to think of it is that one HTML file corresponds to one page and each page has one body!
Inline CSS isn't the prettiest way to learn and I think frowned upon. Making a separate CSS file and linking it to your HTML file will make learning a lot easier for you! Helped me a ton!
You need only one body:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice blog</title>
</head>
<body style="color: blue; background-color:lightblue;">
Some text to show colors
</body>
Apart from what others suggested, you could also use internal CSS to style the elements in the body without needing to use two body elements. What you need to do is embed the CSS code in the style tag of the head:
<html>
<head>
<style>
body {
background-color: blue;
color: yellow; /*or any colour of your own choice*/
}
</style>
</head>
<body>
<p> Paragraph whose colour will become yellow </p>
</body>
</html>
The code inside the style tags is called internal CSS which is an alternative way of styling the body elements. This is the easiest and simplest way of styling the body elements. Here's a demonstration:
body {
background-color: blue;
color: yellow;
}
<p> This is a simple paragraph </p>
The background-color will change the background colour of the body and the color will change the colour of the elements inside body i.e. paragraphs, headings etc.

Fonts won't change and id height wont show

problem 1.Fonts wont change
problem 2.Height on the "id's" wont change
problem one, is there something out of place with the font codes?
<head>
<title>Jubilee Austin Developer</title>
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
</head>
problem two, Ex. this is 1 of the 3 "id's" i have. its not responding to the CSS or at least its not physically showing height change
<section id="about">
<div class="full-width">
<h2>A little bit about me</h2>
<div class="half-width">
<p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now i've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
My entire css
/****Base syles***/
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
Entire code in case you need it for anything
http://i.stack.imgur.com/Q73h1.png
If i left anything out that you need please feel free to ask
About the height part: You won't see the height if the content is less high than the parent element and if there is no background or border. Add something like border: 1px solid red; to see the full height of your element.
#about, #work, #contact {
height: 600px;
border: 1px solid red;
}
Simply invert the order you call your styles:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" type='text/css'>

delete top margin from Customizr theme's web page

I'm a WordPress newbie.
I am running my website on Customizr-Child theme (using Child Themify plugin http://wordpress.org/plugins/child-themify/).
When, I try to write html code in a webpage, there seem to be unnecessary margin at the top of the page, ex. http://www.resourcematics.com/ag-tool/
I would like to get rid of this top margin.
My Child theme Appearance > editor tab has only style.css file.
Can somebody guide me please how to resolve this issue!
Thanks in advance,
Ankit
First of all make sure you reset your css code by adding this in the top of it
* {
margin : 0;
padding: 0;
}
If you did that, and the margin is still there, make sure there isn't any <h1> or <h2> in the top of your code , because they have default margin that appear like it's body margin-top
If there is any try to make a class for them called for example title
then add this to your css file
.title {
margin : 0;
padding: 0;
}
Its actually not a margin but a border.
.tc-header {
border-bottom: 10px solid #e9eaee;
border-top: 5px solid #27cda5;
}
[EDIT]
So, in light of the clarification regarding the issue, here's what I found out by opening up the browser developer inspector tool. Look at the HTML which is generated in your content container:
<div class="entry-content">
<p>
<br><br><br>
<meta charset="utf-8">
<!-- P tag with line break BR tags and meta tag -->
</p>
<p>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><br>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js"></script>
<!-- P tag with meta tag and script tag -->
</p>
<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css" rel="stylesheet">
<style>
body { margin:0; padding:0; }
.map-info { font-size: 20px; }
#map { position: relative; width: 100%; height: 500px; }
</style>
<p>
<br>
<!-- P tag with line break BR tag -->
</p>
<div>
Our GIS based agriculture water demand model is of 5 X 5 arc minutes (approximately 9 X 9 kilometres at the equator) resolution.
</div>
<p>
Following maps show <b>area irrigated by country in hectares around year 2010</b>. The map was developed based on Siebert <i>et. al.</i>, 2005 and Resourcematics’ Agriculture Water Model
</p>
</div>
What conclusions can we draw about this? Simple.
P tags: Browsers automatically add some space (margin) before and after each P tag element. Source
BR tags (inside P tags): Pretty much self-explanatory. Adds a line-break.
The Plugin that generates the map: It seems that the plugin adds all it's scripts, css and responsive meta (just like you would in the HEAD section of a html page) directly in your content container. He does so by enclosing it's content in our aforementioned P tags (it's a big guess, but plausible).
Solution(s):
If I were you, I would check first if, by accident, you added
unnecessary line breaks in the WYSIWYG editor before the main text.
I would consider maybe using and testing out other Map plugins and
see if it solves the problem.

How do I apply CSS styling to a <div> block?

The following is my code.
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
.mainpara {background-color: #d3e5f2;}
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
As you can see, there's a "mainpara" division. How do I specifically apply styling to it? I tried .mainpara {background-color: #d3e5f2;}, as you can see. I also tried putting it above the class.
You need to put CSS in a stylesheet, not as free text in the middle of your HTML.
Either use a style element or (preferably) put your CSS in an external file and reference it with a link element (both of which would go in the head, not the body).
There are examples of both in the specification
<style>
.mainpara {background-color: #d3e5f2;}
</style>
you can not write css code in html page without using style tag
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
<style type="text/css">
<!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
.mainpara {
background-color: #d3e5f2;
}
<!-- Changes color and font size for all p tags on page -->
p {
color: #f60;
font-size: 15px;
}
<!-- Use an id for specific p tag -->
#customParaStyleId {
color: #f60;
font-size: 15px;
}
<!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
.custParaStyleClass {
color: #f60;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
<!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
<p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
CSS should be separated from the body of your HTML Code. It can be placed in either a separate style sheet that you import/include or it can appear between a <style type="text/css"><!-- YOUR STYLES HERE--></style> tags.
TIP:
Often I begin designing and manipulating styles in the head before separating them out into a style sheet. This allows me to focus on the design without having to worry about whether I attached the style sheet properly or not.
Once I finish the page I then move the working styles to a separate sheet to provide re-usable styles across the entire site.
<style>
.mainpara {background-color: #d3e5f2;}
</style>
If you have a stylesheet file or style.css you can just insert:
.mainpara {background-color: #d3e5f2;}
inside of the style.css file