Member Avatar for jk_bscomp

hello everyone!!!

what is the difference between this two css

p {
     color : red;
 }

  .name p {
   color : blue;
  }

how do i call this two css so that i can have a two results of p? one is color red and the other is blue.

your help is highly appreciated!!!

thanks in advanced!!!

  • 4 Contributors
  • 10 Replies
  • 104 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by wickedsunny
Member Avatar for Rhyan

The difference is the following:

p {} only is a master declaration for your whole page. Definitions here will be inherited by all p tags by default. It is like a default style for p tags.

.name p {} can be used to change the default setting to something else, which will have priority over the default declaration. Note that .name is a class in CSS, so you can reuse it several times, while #name is specific ID in you html code that you want explicitly to modify by css.

For example, if you are building up a forum, you can specify that all p tags by default show in red.
However, each post which is e.g. div, containing some p in it needs to be blue. So it will look like this

<body>
<p>All these will be shown in red</p>
<div class="posts" ><p>My blue content here</p></div>
</body>

But if you want some special formatting do be applied on a specific section of your page only - e.g. header, footer, news, etc..., you should do it like this.

<body>
<p>All these will be shown in red</p>
<div class="posts" ><p>My blue content here</p></div>
<div id="sections_unique_name_here"><p>Only this here will be purple</p></div>
</body>

Note that classes (.name) can appear on a single page multiple times, while id's (#name) can appear on a single page ONLY ONCE!

Member Avatar for jk_bscomp

HELLO RHYAN, thanks a lot.....

thank you so much......

Member Avatar for jbennet

On a similar note, if you have something like #nav p then it will only do that when it <p> tags are encountered in the <div> section with the ID "nav".

Member Avatar for jk_bscomp

thanks to all info... thanks a lot,

i hope you can still help me with this one...

#nav p h1 {
   color : red;
}

how can i call this one...?


thanks a lot!!!

Member Avatar for jk_bscomp

thanks to all info... thanks a lot,

i hope you can still help me with this one...

p {
 color : red;
}

#nav p {
  color : green;
}


#nav p h1 {
color : red;
}

how can i call this three and their differences...?


thanks a lot!!!

Member Avatar for jbennet

The first one sets the defaukt colour for all <p> elements to red. The second one, overrides this to green, but only for <p> elements in the #nav did.

#nav p h1 wont do anything but #nav p, h1 will. That will override the colour property for both <p> and <h1> tags in the nav section to be red.

Member Avatar for Rhyan

Just one thing - <p></p> elements are not allowed to contain h1-h6 elements.
This means you cannot have the following <p><h1>Heading Here</h1>The other text being here</p>

Member Avatar for jbennet

They are in HTML transitional , just not in XHTML.

Member Avatar for jk_bscomp

thanks everyone!!!

for my last questions,,, how do i call this one and their difference/s

#search-news {
	float: right;
	width: 140px;
}

#search-news div {
	padding: 3px 0;
	margin: 0;
}

thanks a lot!!!

Member Avatar for wickedsunny

well to me it seems like that its another div with name search-news div. while the first div's name is search-news. it seems like two different divs. and the styles are applied on each one individually they are not connected anyhow.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.