CODEWITHSUNDEEP
htmlcssweb
Yuvaraj V
Yuvaraj V

Reputation: 1212

style property is not working in nested paragraph element

In the following html code the paragraph (p) element color is not changing with color property of css , *

but if i replace p with div element it is working properly..

enter code here

How To Install Node.js and npm Tool in Ubuntu 14.04

How To Install Node.js and npm Tool in Ubuntu 14.04 

<div>
    <h2>
        Introduction:
    </h2>
    <p style="color:red;">
    <h3>Node.js</h3>
    &nbsp;  &nbsp;  &nbsp;
    Nodejs is an open source , cross platform , JavaScript runtime environment  which is based on  <a href="https://developers.google.com/v8/"> Chrome's V8 JavaScript engine</a>.
    <br>
    Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.<br><br>

    It is used to develop scalable, real-time , network and server-side applications written in javascript and we can run that applications within Node.js runtime environment  on Mac OS X ,Windows ,Linux ,solaris and BSD.<br><br>

    Node.js provides an event-driven architecture and a non-blocking I/O API designed to optimize an application's throughput and scalability for real-time web applications. It uses Google V8 JavaScript engine to execute code, and a large percentage of the basic modules are written in JavaScript. Node.js contains a built-in library to allow applications to act as a web server without software such as Apache HTTP Server, Nginx or IIS.<br><br>

    Node.js can be combined with a browser, a document database (such as MongoDB or CouchDB) and JSON for a unified JavaScript development stack.<br><br>

    According to wikipedia,

    Node.js is used by IBM, Microsoft, Yahoo!, Walmart, LinkedIn, Rakuten, PayPal and GoDaddy .

    </p>

    <p>
        <h3>npm</h3>
    &nbsp; &nbsp; &nbsp;

    npm is the pre-installed package manager for the Node.js server platform. It is used to install Node.js programs from the npm registry, organizing the installation and management of third-party Node.js programs.
    </p>
</div>

**

the output for above code is ** enter image description here

after replacing the first p element in above code with div element

output is enter image description here

why color property is not working in p element but worked in div element (in above code)?

Upvotes: 0

Views: 411

Answers (2)

Eevee
Eevee

Reputation: 48536

<h3> is a block element, and <p> can't contain block elements. When you write this:

<p style="...">
    <h3>heading</h3>
    text
</p>

The browser won't allow the <h3> to exist inside the <p>, so it quietly fixes this by closing the <p> tag early, producing something like this:

<p style="...">
    </p><h3>heading</h3>
    text

It works fine when you use <div>, because <div> can contain other block elements like <h3>.

Just move the <h3> outside of the <p> and it should work fine.

Though I note that it's kind of silly to put all that text in a single <p> and use <br><br> to separate paragraphs! You may want to put each paragraph in its own <p> tag, since that's what the "p" is short for :)

Upvotes: 8

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

Try adding a css rule, instead of using inline styles (preferably inside the <head> tag wrapped in <style></style>):

p {
  color: red;
}

Upvotes: 0

Related Questions