Define paragraph spacing in word included html - html

I use includetext-function to include html* into a ms word 2010 document:
{ INCLUDETEXT "test.html" }
That's the html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
line-height: 100%;
}
p {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p>Line 1<br/>Line 2</p>
</body>
</html>
I didn't manage to fomat paragraph spacing in word within the html/css. Neither the margin nor the padding property works. All other css properties I checked (font*, white-space, color) are working fine.
Without <p>-tag word sets paragraph spacing to 10 pt, within <p>-tag, I get "auto", which also makes trouble in my complete document.
Which css property is word-compatible to define paragraph spacing?
Thanks a lot.
(* xml with xslt stylesheet - but for demontration simplified)

Use id or class in every p tag(I know it's boring but try it) . I think that'll might work. And also try article or blockquote tag

The margin-property gets only accepted, if I add the property within the style-attribute. Inside the css-class, word ignores it.
This line works fine:
<p style="margin:0">Line 1<br/>Line 2</p>
strange behavior :-(

Related

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.

Does tag like <div> and <span> inherit or not

From MDN it says:
The HTML <div> element is the generic container for flow content and does not inherently represent anything.
It also says:
The HTML <span> ... does not inherently represent anything.
However, my code shows div and span do inherit color attribute from body tag:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body{
color: red;
text-align: center;
}
</style>
</head>
<body>
<div>
test div
</div>
<span>test span</span>
</body>
</html>
In the above code, both test div and test span are red and centered. So how to interpret MDN's word?
Start with a dictionary. Inherent (with an en) and inherit (with an i) are different words with different meanings.:
inherently
In a permanent, essential, or characteristic way.
The sentences are talking about the semantics expressed by the elements. They have absolutely nothing to do with CSS inheritance:
inherit
Derive (a quality, characteristic, or predisposition) genetically from one's parents or ancestors

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

Why does HTML5 ignore line-height smaller than font-size?

i'm switching some pages over to HTML5 which contains headlines that need to be set with a really small line height. Now since <!DOCTYPE html> any line-height below the font-size is ignored. I can space them out all I want, but no chance bringing them closer together.
Anyone know why that is and if it's cureable?
Thanks,
thomas
Edit: Found it. My old markup was <a style="line-height:12px;" href="#">something</a> which worked in XHTML 1.0 transitional but not in HTML5.
I changed it to <div style="line-height:12px;">something an that works!
Thanks!
Your <a> tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body> style if that is the immediate parent ).
Example:
body { line-height:20px; }
a { line-height:12px; }
and this markup:
<body>
test
</body>
The <a> tag will have a line-height of 20px not 12px.
So your 'inline' <a style="line-height:12px;" href="#">something</a> didn't work but did when you wrapped it in the 'block'-level <div> element because block elements can dictate line-height.
A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.
<a style="display:inline-block; line-height:12px;" href="#">something</a>
Even better, give your <a> a class (change 'xx' below to something semantic):
<a class="xx" href="#">something</a>
Then in your CSS file set that class to 'inline-block':
.xx { display:inline-block; line-height:12px; }
Hope that helps.
Do you have some code? Do you have some extraneous padding or margins?
This works for me in Firefox, Chrome, and IE8
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
In my understanding, every block-level element has a width-0 character called "strut". It will participate in the calculation of line box's height. When the children's line-height is smaller than parent's,It looks like the children's line-height is ignored because parent's line-height will hold up the line box when the children's line-height is smaller.
You need to use em as big text size in IE8 and IE7 will not share the same line height...e.g. using 30px font-size:
This example shows that with a 30px text size the line height in IE7 and IE8 are not on par with Chrome and FF.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
This example shows using em all browsers display the same line height.em is an old system though we need to use it until IE8 and below dies out. It's good practise.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>