This is the .html code and the now embedded .css code. I cant figure out why it's not detecting the .css code at all (btw I have my own reason why I am not using an stylesheet)
<!DOCTYPE html>
<html>
<head>
<title> Minu esimene veebileht </title>
<style>
{
background-color: darkblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Tahoma;
font-size: 19px;
}
</style>
</head>
<body>
<p> </p>
</body>
<h1> Lemmik mootorrattad </h1>
<p> <strong> Mootorratas </strong> kõnekeeles ka tsikkel, mototsikkel; van. mototsüklett on liiklusseaduse mõistes külghaagisega e. külgkorviga või külghaagiseta kaherattaline mootorsõiduk, mille sisepõlemismootori töömaht on üle 50 cm³ või valmistajakiirus on üle 45 km/h. </p>
<h2> <em> Honda </em> mootorrattad </h2>
<p> Honda mootorratad on ühed parimad </p>
<p> <a target="_blank" href="http://bikes.honda.ee/"> Klõpsake siin </a>, et minna Honda leheküljele </p>
<p> <a target="_self" href="https://et.wikipedia.org/wiki/Mootorratas"> Klõpsake siia </a>. See viib teid mootorrataste vikipeedia leheküljele </p>
<p> Sellel pildil on Honda mootorratas. </p>
<img src="src="https://www.driverknowledgetests.com/resources/wp-content/uploads/2014/08/hyosung-gtr-motorbike.jpg" "alt =" mootorratas "/>
</html>
For your background color, I've assuming it's for the body, in which case you need to set the code like this:
body { background-color: darkblue; }
Also make sure you put all your content inside these tags:
<body> </body>
So your code should look like this :
<!DOCTYPE html>
<html>
<head>
<title> Minu esimene veebileht </title>
<style>
body {
background-color: darkblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Tahoma;
font-size: 19px;
}
</style>
</head>
<body>
<h1> Lemmik mootorrattad </h1>
<p> <strong> Mootorratas </strong> kõnekeeles ka tsikkel, mototsikkel; van. mototsüklett on liiklusseaduse mõistes külghaagisega e. külgkorviga või külghaagiseta kaherattaline mootorsõiduk, mille sisepõlemismootori töömaht on üle 50 cm³ või valmistajakiirus on üle 45 km/h. </p>
<h2> <em> Honda </em> mootorrattad </h2>
<p> Honda mootorratad on ühed parimad </p>
<p> <a target="_blank" href="http://bikes.honda.ee/"> Klõpsake siin </a>, et minna Honda leheküljele </p>
<p> <a target="_self" href="https://et.wikipedia.org/wiki/Mootorratas"> Klõpsake siia </a>. See viib teid mootorrataste vikipeedia leheküljele </p>
<p> Sellel pildil on Honda mootorratas. </p>
<img src="src="https://www.driverknowledgetests.com/resources/wp-content/uploads/2014/08/hyosung-gtr-motorbike.jpg" "alt =" mootorratas "/>
</body>
</html>
Related
How browser shows "my" code
<html>
<head>
<title> chatter|app </title>
<style>
.styled_dates {
font-size: 11px;
}
</style>
</head>>
<body>
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p> <strong>Neversea</strong> <p class="styled_dates"> 11/07/2022 </p>
<p> <strong>Deutschland</strong> <p class="styled_dates"> 23/05/2019 </p>
<p> <strong>Erasmus</strong> <p class="styled_dates"> 23/06/1999 </p>
<p> <strong>Work</strong> <p class="styled_dates"> 04/07/2003 </p>
<h2> Regular </h2>>
</body>
</html>
Hello. Noobie here.
What I want to do: see the dates next to "Neversea, Deutschland, Erasmus, Work", not underneath them.
Neversea 11 07/2022
not...
Neversea
11/07/2022
How can I do that?
Thank you
The issue is that <p> tags by default follow onto the next line. Also you have unclosed tags (each line you open 2 and only close 1)
In my code I use <span> elements, they are made for in-line styling/changes which seems appropriate for your use case.
.styled_dates {
font-size: 11px;
}
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p>
<strong>Neversea</strong>
<span class="styled_dates">11/07/2022</span>
</p>
<p>
<strong>Deutschland</strong>
<span class="styled_dates">23/05/2019</span>
</p>
<p>
<strong>Erasmus</strong>
<span class="styled_dates">23/06/1999</span>
</p>
<p>
<strong>Work</strong>
<span class="styled_dates">04/07/2003</span>
</p>
<h2> Regular </h2>
What I want to do is make it so I have one paragraph on the top of the screen and one right under it, but a bit smaller. But when I execute this there is a big gap in between the paragraphs that I dont want. How do I fix?
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;
}
.p2 {
color: red;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</p>
</body>
</html>
You can set margin:0 for both .p1 and .p2 classes.It will look like something like this :
Another thing is that you missing closing font tag in your code so with margins and closing font tag it will be:
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;margin:0;
}
.p2 {
color: red;margin:0;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</font></p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</font></p>
</body>
</html>
Hope it helps you.
PS: If not do share what exactly you require and also read this Font tag
You can use the margin:auto property. Hope this helps!
<!DOCTYPE html>
<html>
<body>
<style>
.p1 {
color: blue;margin:auto;
}
.p2 {
color: red;margin:auto;
}
</style>
<p class="p1" align="center"><font size="10">Welcome To Plieaxploits!</p>
<p class="p2" align="center"><font size="5" vertical-align="top">We Are The Home
Of Roblox Exploits!</p>
</body>
</html>
I am using Thunderbird as my primary work mail client. I have just created a new HTML signature, which shows correctly in the Thunderbird, in Opera and in an online HTML Viewer but not on GMail. I would be very grateful if anyone could point me in the direction of what the problem is about. I have attached the .html signature file.
EDIT: I realized that I didn't specify the problem: when I inspect the elements in Opera on the GMail web inbox I see that the whole text is formated to Arial, 12.8 px while losing the different color on the first line (class = .name).
My CSS is very rusty so I suspect the error is on my side...
EDIT 2: code below as corrected by Tim Gerhard (thanks a lot!)
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal{font-family:"Arial"; font-size:9pt; line-height:1.25; color:#606060; font-weight:400}
.name{font-size:10.5pt; color:rgb(119,187,65); font-weight:700;}
.link{color:rgb(17,85,204)}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span></br>
Obchodní zástupce</br></br>
<a style="link"; href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</br>
<a style="link"; href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
</br></br>
IQ Budovy s.r.o.</br>
<a style="link"; href="[map link]">Mečířova 5, 612 00 Brno</a></br></br>
<img alt="IQ_Logo" src="[image address]">
<br><br><br>
</div>
</body>
</html>
Edit:
You can use inline stylings to style your E-Mail as classnames aren't fully supported (as far as I', concerned). Use style="color:red" instead of classes. Inline should work with every Mail program.
Your html was full of errors which probably caused the issue.
I took the time to fix it and this is the (now correct) markup:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal {
font-family: "Arial";
font-size: 9pt;
line-height: 1.25;
color: #606060;
font-weight: 400;
}
.name {
font-size: 10.5pt;
color: rgb(119, 187, 65);
font-weight: 700;
}
.link {
color: rgb(17, 85, 204);
}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span><br/>
Obchodní zástupce<br/>
<br/>
<a class="link" href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</a><br/>
<a class="link" href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
<br/>
<br/>
IQ Budovy s.r.o.<br/>
<a class="link" href="[map link]">Mečířova 5, 612 00 Brno</a><br/>
<br/>
<img alt="IQ_Logo" src="[image address]"/>
<br><br><br>
</div>
</body>
</html>
What was wrong?:
You use the <br> tag wrong. It's <br/> and not </br>
One of your image tags was not closed properly
One of your hyperlinks (<a>) was not closed
You use style="" instead of class=""
My daughter is in the process of learning HTML/CSS and have been going through the examples in: Head First HTML and CSS One of the first examples instructs the reader to insert the following:
<html>
<head>
<title> Starbuzz Coffee </title>
<style type='text/css'>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1> Starbuzz Coffee Beverages </h1>
<h2> House Blend, $1.49 </h2>
<p> A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>
<h2> Mocha Cafe Latte, $2.35 </h2>
<p> Espresso, steamed milk and chocolate syrup. </p>
<h2> Cappuccino, $1.89 </h2>
<p> A mixture of espresso, steamed milk and foam.</p>
<h2> Chai Tea, $1.85 </h2>
<p> A spicy drink made with black tea, spices, milk and honey. </p>
</body>
</html>
The HTML renders just fine, but the CSS appears to have been ignored and does not appear when one asks to see the code underlying the page. Ideas about what is missing? It is difficult to make it through a book if stumbling at the gate.
<html>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color=green>Green</font>
<BR>
<font color= rgb(255,255,0)>Gold</font>
</body>
</html>
From the code above I am trying to use different ways to change the font color. The first 2 ways work perfectly (in hex and the actual name); but the third one in RGB format is not displayed correct. What is the error in there?
style="color:rgb(255,255,0)". The font tag is deprecated and inline style should also be avoided. Don't forget your double quotes on attribute names: attr="value" not attr=value
This would be best done in CSS using a target class:
<p class="my-class">Some text</p>
In your css file:
.my-class {
color: rgb(255,255,0);
}
The tag is also not to be used for layout. It should only be used for new-lines in text. Instead, use display: block on the elements that should be on a new line.
Here's a complete sample: (note that <p> tags have display: block by default)
<p class="red-text">Red</p>
<p class="green-text">Green</p>
<p class="gold-text">Gold</p>
CSS:
.red-text {
color: #FF0000;
}
.green-text {
color: green;
}
.gold-text {
color: rgb(255,255,0);
}
Live demo (click).
How about this?
<style>
.red{
color: #FF0000;
}
</style>
HTML Tag:
<div class="red" >Red</div>
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font> (it's look right).
<BR>
<font color=green>Green</font>(wrong).
<BR>
<font color= rgb(255,255,0)>Gold</font>(wrong).
</body>
</html>
modified
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color="green">Green</font>
<BR>
<font color="rgb(255,255,0)">Gold</font>
</body>
</html>