I was learning html and css but when I got to this css code I was stuck. I couldn't make the paragraph text blue. Is there something wrong with my html?
This is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color;blue;}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Wrong syntax of writing color;blue;
<style type="text/css">
p {color:blue;}
</style>
<style type="text/css">
p {
color: blue;
}
</style>
Wrong syntax of writing color;blue;
correct way::
<style type="text/css">
p {color:blue;}
</style>
It's right way. Instead semicolon you must write colon.
<! DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color: blue;}
</style>
</head>
<body>
<p>This text is blue </p>
</body>
</html>
Read more about it.
example:
<html>
<head>
<style type="text/css">
p {
color: blue;
}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Or just simply - no style tag added
<p style="color:blue">This text is blue </p>
Easy error to find, just distraction.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color:blue;
}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Ohh, so close. You've used a semicolon ; instead of a colon :. Changing it would fix your issue.
p { color: blue; }
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p { color: blue; }
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
However, if I may, I strongly suggest specifying a specific chain to your desired paragraphs. Making a global color change to all p tags isn't considered good practice.
.paragraphs p {
color: red;
}
<div class="paragraphs">
<p>This text is red</p>
<p>And so is this</p>
</div>
<p>This paragraph's color hasn't changed.</p>
On a side note. If desired, you could add a style attribute to your p tag to change the color of that specific paragraph.
<p style="color: orange;">This text is orange</p>
<p>This paragraph's color hasn't changed.</p>
Related
I'm just trying to make my CSS work with my HTML code but it's not working for some reason. I think I did everything correctly...maybe its just my browser? I'm on a mac using TextWrangler, testing with Safari/Chrome. Here is the code:
<!DOCTYPE html>
<html>
<head>
<div id="heading" name="heading" title="topbar">
<h2> Welcome to our website </h2>
<style type="text/css">
#bottom{
width:70px
color:green
align-content:center
}
</style>
</head>
<body>
<div id="bottom" name="bottombar" title="bottombar">
<h2>Welcome to our website </h2>
</body>
</html>
You cannot put <div> in the head section, here is the modified code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#bottom{
width:70px;
color:green;
align-content:center;
}
</style>
<title></title>
</head>
<body>
<div id="heading" title="topbar">
<h2>Welcome to our website</h2>
</div>
<div id="bottom" title="bottombar">
<h2>Welcome to our website</h2>
</div>
</body>
</html>
You forgot the closing semi-colons in the css ; and also forgot to close your divs, hope this helps.
There are so many things wrong:
Your head should not contain div tags
You forgot semicolons at the end of your CSS attributes
div should be closed (</div>)
Your divs are missing their closing tags i.e. </div>
I'm also not sure why you duplicate the div in the head. it should only be in the body.
I'm coding in Windows Notepad the following:
It only display the background in Light Gray, but without showing the heading and the pareagraph!
<!doctype html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style> //style tag not end correctly check it
</head>
<body>
<h1>dfgdfd</h1>
<p>hjsdfkj</p>
</body>
</html>
For some odd reason when I try styling this html page with a backround in css nothing appears.
Any Ideas on how to fix
-Thanks
<html>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
<style>
body {background-color:#b0c4de;}
</style>
</body>
</html>
It should look something like this (notice I moved the style tag within the head tag):
<head>
<style>
body{
background-color:#color;
}
</style>
<head>
Why is your style tag in your <body> tag? It should be in the <head> tag:
<html>
<head>
<style type="text/css">body { background-color: red; }</style>
</head>
<body>
</body>
</html>
Or even better, put your css in a separate .css file.
First of all that's not how css works or how html works. You should put your style tags in html head section. And you should determine html element where you want to set background-color.
<html>
<head>
<style>
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
</html>
Usually the syntax is like so:
<html>
<head>
<style>
body { background: #121212; }
</style>
</head>
</html>
With the style tag in the head tag.
You will want to move your <style> tag inside of your <head> tag.
Try this code:
CODE
<style>
body {
background-color:#b0c4de;
}
</style>
<body>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
SAMPLE
http://jsfiddle.net/Uy2Zb/
Any idea why 'li' elements are not inheriting 'p' elements style in the following snippets?
i.e 'role1' and 'role2' are rendering as black while 'Hello world!' and 'Inside nested p' are in blue.
<!DOCTYPE html>
<html>
<title>test</title>
<head>
<style type="text/css">
p {
color: blue;
}
</style>
</head>
<body>
<p>
Hello World !
<ol>
<li>role1</li>
<li>role2</li>
</ol>
<p>
Inside nested p
</p>
</p>
</body>
</html>
Ya, Rick Hoving is correct. If you want to apply blue color to all p and ol or what ever. You need to put this in to div block/container as below.
<!DOCTYPE html>
<html>
<title>test</title>
<head>
<style type="text/css">
div {
color: blue;
}
</style>
</head>
<body>
<div>
<p>
Hello World !
<ol>
<li>role1</li>
<li>role2</li>
</ol>
<p>
Inside nested p
</p>
</p>
</div>
</body>
</html>
The p tag can not contain block level elements.
So the browser automaticaly closes the p tag for you.
Your html will parse like this:
<!DOCTYPE html>
<html>
<title>test</title>
<head>
<style type="text/css">
p {
color: blue;
}
</style>
</head>
<body>
<p>
Hello World !
</p>
<ol>
<li>role1</li>
<li>role2</li>
</ol>
<p>
Inside nested p
</p>
</body>
</html>
And now you see why Hello world and Inside nested p are blue and the li elements are not
Try using your own custom tags or classes in style description:
<!DOCTYPE html>
<html>
<title>test</title>
<head>
<style type="text/css">
custom {
color: blue;
}
</style>
</head>
<body>
<custom>
Hello World !
<ol>
<li>role1</li>
<li>role2</li>
</ol>
<p>
Inside nested p
</p>
</custom>
</body>
</html>
Does anyone know a utility which could convert <style> blocks into the equivalent style attributes in an HTML file?
For example, we have file on input:
<html>
<head>
<style>
.myclass
{
color:red;
}
</style>
</head>
<body>
<span class="myclass">Some text </span>
</body>
</html>
Here’s the desired output file with inline CSS:
<html>
<head>
</head>
<body>
<span style="color:red;">Some text </span>
</body>
</html>
Try this: http://inlinestyler.torchboxapps.com/