gautamshaw Posted September 28, 2009 Share Posted September 28, 2009 If I do this code:<style type="text/css">p{background-color:#e0ffff;}</style>if i do this then the entire line gets the background colour...but i want to limit this background color....i.e;if the <p> tag contains a single word then only the particular word gets colored inspite of the entire background of the line getting colored.......How to do this? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2009 Share Posted September 28, 2009 one way is to use span inside the paragraph examplep span{background-color:#e0ffff;}<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <span>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</span> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> Link to comment Share on other sites More sharing options...
gautamshaw Posted September 28, 2009 Author Share Posted September 28, 2009 one way is to use span inside the paragraph examplep span{background-color:#e0ffff;}<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <span>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</span> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>Sorry dsonesuk i cant follow your language in the <p>.....though it worked for me........i have not seen this kind of syntax such as p spancan you explain it to me a bit pls........though it worked but is there any alternative way to do the same? Link to comment Share on other sites More sharing options...
gautamshaw Posted September 28, 2009 Author Share Posted September 28, 2009 i did the same thing this way:<html><head><title>Using the CSS</title><style type="text/css">span{background-color:#600000;}</style></head><body><p>The big <span>boss</span></p></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2009 Share Posted September 28, 2009 the 'p span' would only target a span, within a paragraph.'span' would target all span within a page, within paragraph or not.to target span with specific colour use:.col1{ background-color:#600; }.col2{background-color:#e0ffff; }.col3{background-color:#0ff; }<p><span class="col1">Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <span class="col2">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</span> Ut wisi enim ad minim veniam, <span class="col3">quis nostrud exerci</span> tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> Link to comment Share on other sites More sharing options...
Ingolme Posted September 28, 2009 Share Posted September 28, 2009 To make things clear:The <p> element is a block element, which means it automatically stretches to the full width of its container, with a line break before and after.A <span> element is an inline element: it strictly surrounds the text within it and can be placed between text. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.