WordPress posting HTML and CSS code - html

In WordPress, am creating a new post. In the HTML section of the post am using the following code:
<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
The text h1 font size is not coming that much, please help with this.

Within the <style> section, add:
h1, p {font-size:14px} or whatever size you want to use.

First, if your writting into the POST (html) you should not use the and so into the field.
Your post should only looks like this
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
But the fact is that why your not placing your css into a specific CSS file? In the root of your theme, your should have a default style.css to use.
Also, can you check that your using a reset.css or something like this that would overwrite what your entered into the field?

Related

how to center h1 and h2 html headings in pdf file generated by pandoc

I have simple problem. I have some headings in my html file. Something like
<h1>H1 heading</h1>
<h2>H1 heading</h2>
And I want to use pandoc to have it centered in generated document.
I've tried add to my html something like:
<style>
h1, h2 {
text-align:center
}
</style>
But it doesn't helped. Have you some ideas how to do it as simply as it is possible?
Many thanks to your answer
Your code should be functional, but it will depend where you positioned it.
Old Style without using .css should be inside <head>...</head>
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2 {
text-align:center
}
</style>
</head>
<body>
<h1>H1 heading</h1>
Hello World
<h2>H2 heading</h2>
Hello Space
</body>
</html>
If above is misbehaving raise a bug report with Pandoc
I am uncertain why you have used Pandoc since unless you install the large number of LaTeX dependencies then you will be using Wkhtmltox which on its own (without Pandoc) does the task.
wkhtmltox\bin\wkhtmltopdf.exe file://test.htm test.pdf

how to remove underscore from a text which is linked by anchor tag in a locally run html file

I'd like to have an html file that organizes certain files scattered throughout my hard drive. But after saving file, my text i.e "Indian" got underlined. My code is
<a href="file:///G:\work files\project\indian.html" target="_blank">
<div class="button-1">
Indian
</div>
</a>
My question: is there any rule or tag in css or html to remove that underscore?
I'd keep my <div> under <a>, so why text contained in <div> got underlined
Add you must use css to change the way your links look like. Use a selector ("a") and set the text-decoration property to none:
<html>
<head>
<title>TITLE</title>
<style>
div a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>PAGE CONTENT</h1>
<div>
Link here
</div>
</body>
</html>

Coding mailchimp email inline styles not working as usual

so i have pretty easy coding running right now on the email we want to send out for the company consist of our logo a picture of the new company where we are a new agent in and the i don't have any Blurb yet for the company but it will still come
so whats happening is want to add a small background change to my emailer where our logo is in white and the rest of the body is in a dark grey but as soon as i create a div in my body it breaks where my picture and text appear
CODE
<html>
<header>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;"/>
<style>
body {Color: ; background-color:white} div {background-color:#545454;padding-top:20px;padding-bottom:0.2px}
</style>
</header>
<body>
<br>
<h2 Style="Text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2><h1 Style="text-align:center">LUK Agent <br><br>
<div>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;"/> <p Style="Text-align:Center;Border:5% solid #364C94;Align:Center;padding:5px;width:68.5%;margin-left:15%">Small Blurp of LUK</p>
</div>
when running it in a w3schools it works perfectly
if anyone can add this coding to their Mailchimp will see what i mean with it breaks the code and structure
Here are some guidelines:
Close all tags that are not self-closing (img tags are self-closing, but body, html and h1 are not).
Do not put an img tag in the header. It is not allowed there. Move it to the body.
Do not use empty CSS commands, like 'Color: ;'.
Do not make up your own CSS commands, like 'Align';
Write CSS commands and attributes in small letters (not sure this is mandatory, but it is very uncommon to capitalize them).
Use indentation for clarity (of the HTML structure).
This would result in the following code:
<html>
<header>
<style>
body {color: black;background-color:white;}
div {background-color:#545454;padding-top:20px;padding-bottom:0.2px;}
</style>
</header>
<body>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;" />
<br>
<h2 style="text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2>
<h1 style="text-align:center">LUK Agent</h1>
<br>
<br>
<div>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;" />
<p style="text-align:center;border:5% solid #364C94;padding:5px;width:68.5%;margin-left:15%;">
Small Blurp of LUK
</p>
</div>
</body>
</html>

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 is :not(p) seemingly selecting <p> tags?

My HTML is this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="stylesheet.css">
<head>
</head>
<body>
<p>hiya</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
</body>
</html>
My stylsheet.css is this:
:not(p)
{
color:#ff0000;
}
Yet everything is red, including <p>. I've tried Firefox 20, Internet Explorer 10, and Chrome. It doesn't seem to get any more basic than this, but I can't figure out why this isn't working (preventing <p> from being red, that is). Any help on this would be much appreciated.
:not(p) matches body.
The default color value is inherit.
p has no style set.
p is therefore inheriting its colour from body, which is red.
Solutions: explicity define what you want to be red, OR explicitly set a different colour for p (ie. don't use :not), OR use :not(body):not(p)
This looks it is because you have not defined a specific style for p tag. So :not(p) applies even to body element and inherited.
You can create a separate id for the <p> and you can use not in css.
HTML
<p class="hiya" id="hiya">hiya</p>
<p class="hi" id="hi">hi</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
CSS
p:not(#hiya)
{
color:#ff0000;
}
This will produce the output red color for the <p> except the <p> with the id "hiya".