I am converting a docx to html format (using apache poi) and sending it as email.
A snippet of generated html looks something like this
<html>
<head>
....
<style>
span.Normal{
font-family: 'Arial';font-size: 9.0pt;
}
span.Title{
font-family: 'Cambria';font-size: 28.0pt;color: #000000;
}
span.MySubtitle{
font-family: 'Arial';font-size: 18.0pt;color: #000000;
}
span.MyTitle{
font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
}
...
</style>
</head>
<body>
....
<p class="Normal Title MyTitle">
<span id="_GoBack">
<span class="Normal Title MyTitle">Welcome Message</span>
<span class="Normal Title MyTitle"> </span>
<span class="Normal Title MyTitle">Username</span>
</p>
<p class="Normal Title MySubtitle">
<span class="Normal Title MySubtitle">Issues and Solutions</span>
</p>
...
</body>
</html>
The multiple css classes are not recognized by Outlook client. It is only rendering the first css class "Normal" and ignoring the rest. But my original formatting (in docx) is present in "MyTitle" & "MySubTitle" classes.
Does Outlook support multiple css? Is there a way I can control multiple css generation.
I've just discovered this problem myself.
It seems that Outlook is only taking the first class listed in the class attribute, ignoring everything else.
Stylesheet:
<!--[if gte mso 9]>
<style type="text/css">
.red {
color: red;
}
.large {
font-size: 72px;
}
</style>
<![endif]-->
Markup:
<div class="red">
THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
Result:
As far as I see, all versions of Outlook are affected. Including the newer ones.
I've filed a bug report to hteumeuleu/email-bugs documenting this quirk:
https://github.com/hteumeuleu/email-bugs/issues/117
As said previously you should first check your html to make it cleaner. Emails are tough to get right and perfect in every single mail client/server out there. So if you want to get things right, have a look at all the free and responsive templates available anywhere on the web.
The classic yet efficient solution for mail is rely in the table tag.
You can find a good example here
Also, when it comes to display on different mail clients, Outlook is one of the most difficult. There are tools like Litmus that allows you to preview the result of your email but it's quite expensive. Fortunatly they also propose free responsive templates that you can use for inspiration.
Don't hesitate to post an improved version of your email so we can look at it and help you more efficiently.
Okay, there's a lot going wrong here. First and foremost, the html isn't really correct at all. You have paragraphs nested in paragraphs, and you're using spans to define headings, and splitting each word into it's own span.
I don't know what those three dots at the beginning and end are for, but they shouldn't be in the style tags.
Your class names aren't really descriptive, they're repeating rules, you have every class applied to every element, and they're out of order in the style sheet, making it confusing to understand what's going on.
My suggestions are to:
Use semantic markup
Discard classes and use semantic selectors
Use the DRY principle (don't repeat yourself)
list rules with a logical order, such as starting from the largest and ending at the smallest.
Here's some refactored code using your styling rules and demonstrating how to use each element.
<html>
<head>
<style>
body {
color: #000000;
}
h1,
h2,
p {
font-family: 'Arial';
}
h3 {
font-family: 'Cambria';
}
h1 {
font-size: 28pt;
}
h2 {
font-size: 22pt;
}
h3 {
font-size: 18pt;
}
p {
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p>
This is paragraph text.
</p>
</body>
</html>
Related
EDITED: I am showing the whole code instead
I know this is probably a really simple question, but I am somewhat new at HTML5 and CSS coding. The problem I am encountering is that I have one line of text I wish to edit individually from the other paragraphs, so I am using a Div ID. The problem is, CSS is linked right to text, but when I add CSS to the div, it won't edit. It's all on a separate sheet, and CSS works for everything else besides the Div. Here is the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>Codetopia - Learn to Code</title>
<link href="externalfile:drive-be6fc3227f0f52098e01c434b3f53296322df648/root/Coding/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lemonada" rel="stylesheet">
</head>
<body>
<h1><i>CODETOPIA</i></h1>
<h1>Learn to Code the <i>Fun</i> Way</h1>
<img src="http://www.rouzell.net/wp-content/uploads/2016/01/html_css.png" alt="HTML 5 and CSS3 Image"/>
<p>Explore the world of code through this interective course for ages 7-12.</p>
<p></p>
<h2>Why Codetopia?</h2>
<p>Codetopia presents a playful, fun, academic atmosphere for young children to discover. <br /> Here are some of the benefits:</p>
<ul>
<li><b><i>100% free</b></i> for everyone at any age</li>
<li>Learn through an interactive storyline</li>
<li>Simple to follow steps</li>
<li>Color-coded text</li>
</ul>
<img src="https://edsurge.imgix.net/uploads/post/image/7747/Kids_coding-1456433921.jpg" alt="Coding for Kids"/>
<!--<img src="http://codeteachers.com/wp-content/uploads/2016/03/kids-coding.png
" alt="Coding for Kids"/> is optional image-->
<h2>How it works</h2>
<p>The teaching process is extremely unique and flexible. Children start with being introduced to a fictional story, that they can read. Throughout the story, certain issues or missions will be needed where the child then will be taught the basis of coding to help the characters. <br /> Here is more in detail:</p>
<ol>
<li>Follow Lee and Madison's numerous interactive adventures</li>
<li>Learn and develop basic coding skills to help the twins throughout the story</li>
<li>Put your skills to the test to complete each mission and story</li>
<div id="join">
<p><b>Join the Codetopia Adventure today!</b></p>
</div>
<!-- Pic of the twins here? Make sure to resize it -->
</ol>
</body>
</html>
* {
font-family: Georgia,Times,serif;
background-color: White;
}
h1 {
text-decoration: none;
font-size: 42px;
color: rgba(46,139,87,0.9);
font-family:'Lemonada',cursive;
line-height: 1em;
}
h2 {
text-decoration: none;
font-size: 24px;
background-color: SeaGreen;
color: White;
margin-right: 1100px;
font-style:italic;
text-align:center;
font-family:'Lemonada',cursive;
}
p, li {
font-size: 18px;
line-height: 1.5em;
}
li {
color: rgb(37,232,98);
#join p {
color: SeaGreen;
}
#join p b {
color: SeaGreen!important;
}
as you can see in the doc you are giving color to that DIV not giving color to the child p or b tag of parent div which is based on identifier so how you can gave separate color to text based on ID:
#join p {
color: SeaGreen;
}
<div id="join">
<p><b>Join the Codetopia Adventure today!</b></p>
</div>
if you want your child elements to herit their parents attributes, use !important.
b, p
{
color: inherit !important;
}
To expand on these answers, the reason why you need to specify #join p is that CSS rules "cascade" by specificity. I assume you have another style rule for p which is considered more specific.
Another option would be to change your p color rule to a body color rule.
you must assign the code to "p" such as this:
#join p{
color: red !important;
}
in your css you missing one "}" before #join, and the second problem is that SeaGreen is not acceptable, so i change it to red.
Okay, so I'm trying to do my homework for school, and I'm finally starting to work on CSS.
My issue is that the code I enter, for id #articleheader does not apply, and the only reason I can think of is that there are four rules present before I close the line.
#articleheader {
font-size: 18px;
font-weight: normal;
letter-spacing: 7px;
text-align: center;
}
<header id="articleheader">
<h1>Bike the Mountains Tour</h1>
</header>
Any help?
The h1 has its own styles for size and weight, even by default if you don't set them specifically. To set them for the h1:
#articleheader h1 {
...
Everything seems fine in terms of what you are trying to do and when your code is dropped into a html document. If the solution offered by Matt still isn't working I suggest you need to check that you have the css file linked to properly if an external stylesheet or it's onpage make sure you have it wrapped around tags properly.
<html>
<head>
<style>
#articleheader {
font-size: 18px;
font-weight: normal;
letter-spacing: 7px;
text-align: center;
}
</style>
</head>
<body
<header id="articleheader">
<h1>Bike the Mountains Tour</h1>
</header>
</body>
</html>
enter code hereYou should apply the id="articleheader" tag with h1,not with header.
Although,there is nothing wrong with using id tag in header, the results will not be as expected. i.e. the properties would be applied,but at a different scale.
This is the result when id is applied on h1
This is the result when id is applied on header
<header>
<h1 id="articleheader">Bike the Mountains Tour</h1>
</header>
There is nothing wrong with the css code
The precedence of id tag being applied on h1 is proved when same id tag is applied on both h1 and header, but results as shown in the earlier image(h1 with id) are displayed.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="articleheader" >
<h1 id="articleheader" >Bike the Mountains Tour</h1>
</header>
</body>
</html>
Right now I have two HTML classes and a CSS file. One HTML file is used for writing HTML code and another one is for putting large text/paragraph. Now I want to reference that HTML file (which includes a big paragraph) into my main html file.
How could it be done?
Is it a good practice?
Or is there any alternative way to do that?
The code I wrote:
main.html:
<!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
</style>
</head>
<body>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<p id="paragraph_home">paragraph.</p>
<!-- I want to call the home.html class here so that the paragraph is shown in my homepage under the home menu.-->
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
</html>
main_design.css:
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header {
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph_home{
text-align:center;
display:inline-block;
width:300px;
vertical-align:top;
}
#menu_area {
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
display:inline-block;
vertical-align:top;
}
body {
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer {
background-color:blue;
margin:-8px;
border:2px solid red;
text-align:center;
}
#home {
font:bold 20px Tahoma;
text-align:left;
}
#about_me {
font:bold 20px Tahoma;
text-align:left;
}
#gallery {
font:bold 20px Tahoma;
text-align:left;
}
#contact_me {
font:bold 20px Tahoma;
text-align:left;
}
#my_diary {
font:bold 20px Tahoma;
text-align:left;
}
#blog {
font:bold 20px Tahoma;
text-align:left;
}
home.html
<!--
The text I want to add in the home link will go here. As soon as an user
loads the page will be able to see the paragraph. This paragraph should also be shown when the user clicks on Home menu.
-->
<!--
Now, basically I want to call this class in my "main.html" class. how to do that?
The reason I want to do that because I really don't like this giant paragraph in my "main.html" class.
-->
<p id="paragraph_home">I was born in a beautiful small village <!--Just an example paragraph-->
of.......
The villagers were relatively peaceful, almost free from crime
and sadness, besides they were very merciful and happy. The
reason I was born there is long long time ago my father’s
pre-generations were settled in the region. To live for his
own, my father had to move in a new village. Our new home was
just a kilometer away from my grandfather’s place. I came to
hear many legendary tales about that piece of land where our
current home is located. People use to say that there was
jungle and some evil’s residence long time ago. From our
village, some seniors of mine saw some shocking scenery with
monster shape in that bush. By the time my father cut the
jungle to settle residence. My father was a school teacher.
And my mom is a homemaker. I am the fourth child of my parents.
Among five siblings, my only and one sister is the second child.</p>
[NOTE: I want that all of my paragraph or text should appear next to the menu area and below the heading.]
HTML out of the box doesn't support this. You would need to use a dynamic language like PHP or ASP.NET. You would need to store your text in a variable, and call that on your main page. Here is a PHP example of how I accomplished this a while back:
First you would store your paragraph in another PHP file, lets call it paragaph.php.
//paragraph.php
var myParagraph = '<p>your paragraph text here</p>';
Lets call the main file index.php
//index.php
//Put your include statement in your <head> tag
<?php include('paragraph.php'); ?>
//And this would be your paragraph
<p id="paragraph_home">paragraph.</p>
<?php echo myParagraph; ?>
<div id="footer">Developed by Jabir Al Fatah</div>
The only catch is you will need something like WAMP installed on your computer to test this because browsers dont support PHP. They needs server side processor to create the HTML for them.
Good luck!
The iframe option works well, but there is a new method (requires a bit of work)
Using web components it would look like this:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
You are going to want to include backwords support via jquery so I'd recommend taking a look at this guys tutorial:
Web Components Tutorial
Good Luck!
Assuming I understood your problem correctly, I see two possible approaches:
client-side: load your "home.html" via an ajax call (downside of this approach is the dependence upon javascript, which the user may have decided to disable)
server-side: different server-side technologies (php, asp.net, etc.) have some sort of include mechanism
I tend to go with the 2nd approach because it doesn't rely on the presence of javascript, but it's your call.
Here's some resources:
jquery ajax | jquery load | php include
I'm having an issue coloring a span with css. Everything is working fine on the webpage however when I try to select a span in a div it doesn't work. Am I missing something dumb here?
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="style/mainstyle.css" rel="stylesheet" type="text/css">
<script src= https://code.jquery.com/jquery-latest.min.js></script>
</head>
<body>
<header>
<h1>TEST</h1>
</header>
<main>
<div class = "tab1 triad">
<script src="primejs.js"></script>
<span class="red"><h2>Type in a number and I'll check if it is prime:</h2></span>
<input class = "primeNum" type = "text">
<button class = "submit">Submit</button>
<span class = "result">
<h2>What I found: <span class = "answer">?</span></h2>
</span>
</div>
</main>
</body>
and here is the css:
.tab1 span.red {
color: RED;
font-size: 100;
}
Cleaned up your HTML, you had a some stray and missing tags.
Bin demo
<div class="tab1 triad">
<span class="red">
<h2>Type in a number and I'll check if it is prime:</h2>
</span>
<input class="primeNum" type="text">
<button class="submit">Submit</button>
<span class="result">
<h2>What I found: <span class="answer">?</span></h2>
</span>
</div>
And your css was missing the px after 100
.tab1 span.red {
color: red;
font-size: 100px;
}
try this
.red {
color: red;
font-size: 100px; /* specify a unit like px, em, ... */
}
First of all, the HTML code you have posted is not valid. You can use the official W3C validator to check if you like. The main issue is the spaces either side of your = when declaring attributes. Spaces are only ever used in between different attributes. Also, h2 elements are block type elements, and are therefore not allowed inside of an inline element (e.g., span).
Secondly, the CSS is also not all valid. Firstly, there is no need to make anything uppercase, as is shown for the colour name. color:red; will work just fine. Also, you have not specified any units of measurement for the font-size property. I assume you intended for the text to be at 100pt, in which case you need to use font-size:100pt;. Other valid units of measurement include px, cm and rem.
I recommend you read information on the Mozilla Developer Network for examples if you would like to learn more. It includes accurate pages about HTML elements, CSS properties and JavaScript.
Edit:
The following would help to fix the HTML:
Change doctype to DOCTYPE, which improves compatibility.
Move all script tags into the head tag.
Ensure that all inputs, buttons, etc. are inside of form elements.
Remove spaces around = signs.
Make the href attribute of the stylesheet link tag the second attribute, and make the rel attribute the first. This is primarily for consistency.
I've been reading a lot about CSS inheritance but I haven't been able to find anything about this question, and I'm confused. Please consider the following:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.anc {
background-color: blue;
color: red;
}
.des {
background-color: inherit;
color: inherit;
}
</style>
</head>
<body>
<div class="anc">
<p class="des">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<p class="anc">
<div class="des">
Two <!-- Why is nothing inherited here? -->
</div>
</p>
</body>
</html>
The "One" text is working as I'd expect. But I don't understand why the "Two" text doesn't have a blue background and red text as well.
Is there some special rule about inheritance for block elements as opposed to inline elements? Or something special just about div? What am I missing here? Do you have an online reference to a very thorough explanation of inheritance? Everything I've seen (and I've been looking a long time) just explains examples like "One", but doesn't address issues like "Two".
I know that there are many (better) ways to get the same visual effect I'm asking for here. But this example is about me trying to understand inheritance in general, not trying to get any particular effect on this HTML code.
Thank you so much for your help!
A <div> inside <p> tag is not valid HTML. If you check the rendered HTML, it probably looks something like this:
<p class="anc"></p>
<div class="dec">TWO</div>
<p></p>
The browser fixes the invalid nesting, but that breaks your CSS definition.
You can't nest block-level elements inside a <p> - the opening <p> ends up acting as a self-closing element and pushes the descendant div out of the <p> as a succeeding sibling. The paragraph also creates an empty <p> after the div; the structure ends up looking like:
<p class="anc"> </p>
<div class="des">Two</div>
<p></p>
A <p> can only contain inline elements. It is invalid to put a <div> in a <p>.
You swapped <div> and <p> in the second case. Also your css specifies .des, whereas your class name in the HTML is dec See working jsFiddle here.
<div class="anc">
<p class="dec">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<div class="anc">
<p class="dec">
Two <!-- Why is nothing inherited here? -->
</p>
</div>
.anc {
background-color: blue;
color: red;
}
Also, there's no need for the inherit as the child will be rendered within the parent, whose style you set already.