Jump to content

Problems With The Background Color Of A Line!


gautamshaw
 Share

Recommended Posts

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

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

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? Edited by bunty.
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...