list elements not inheriting styles from parents - html

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>

Related

CSS Properties rules are not working in HTML file

Please don't be too mean i am just trying to understand. Okay, so I am proficient in C++, Java, and C# for applications. I have recently been trying to understand web development. Right now i am going over basic HTML coding. Looking at http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html and and trying to recreate https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works. But it is not working as intended.
<!DOCTYPE html>
<html>
<head>
<style type ="text/css"> <!-- You need this in order to have CSS, it has -->
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
So when i type this code into Codepen it works as intended, With every paragraph displaying blue text. However, when i code it in notepad ++ as a HTML file it does not add the CSS style, format, background color, etc. Upon looking into it i found out if i add the style directly in the paragraph bracket it works (as shown below)
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue;}
</style>
</head>
<body>
<p style="text-decoration: underline;">This is my body green</p>
<p style = "color: blue;">this text should be blue!</p>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
Adding declamation blocks like <meta charset="utf-8>and <link rel="stylesheet" href="style.css"> has not helped either.
My question is why does this code work some places and not others? Is there a web browser setting that could be interfering? I have tried IE, FF, and Chrome but not of them will display the CSS style unless i specifically declare it with in the brackets not in the header. If it is a logical error please post/comment article to read.
In the first example the comment <!-- You need this in order to have CSS, it has --> is misplaced into a CSS declaration, so don't put HTML comments in a CSS declaration .
Declaring p {color: blue; font-family:arial;} only affects to <P></P> tags.
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
If you need to add specific formatting to specific tags you can use the class attribute (class="blue"), and declare a class in CSS appending a point at the beginning of the class name (.blue).
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue;}
.underlined { text-decoration: underline }
.blue { color: blue }
</style>
</head>
<body>
<p class="underlined">This is my body green</p>
<p class="blue" >this text should be blue!</p>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
You do not need to declare a style type, as the only type is for CSS.
<!DOCTYPE html>
<html>
<head>
<style>
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>

How do I use css in html

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>

HTML and CSS not working

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.

Html css not working correctly

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/

Is there a tool that converts <style> blocks into inline CSS?

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/