Hi
I want to float first letter of the paragraph and give diffrent styles to that.
I use below code that work correctly but i think there is a problem because background-color property of the p element is not affected .
So i change div tag to span tag and change div selector to span selector , then all things work correctlly ,second code is as follow:
and I wonder what is diffrence between using span or div element in this example ? would you please describe me what happend in each state and what is diffrence for?
thanks alot in advance.
I want to float first letter of the paragraph and give diffrent styles to that.
I use below code that work correctly but i think there is a problem because background-color property of the p element is not affected .
Code:
<html>
<head>
<style type="text/css">
div { float: left; width: 50px; font-size: 400%; color: red; line-height: 80%; margin: 0; padding: 0;}
p { border: 1px solid maroon; background-color: aqua; }
</style>
</head>
<body>
<p>
<div>T</div>his is some text.This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. In the paragraph above, the first letter of the text is embedded in a span element.The span element has a width that is 0.7 times the size of the current font.In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
</p>
</body>
</html>
Code:
<html>
<head>
<style type="text/css">
span { float: left; width: 50px; font-size: 400%; color: red; line-height: 80%; margin: 0; padding: 0;}
p { border: 1px solid maroon; background-color: aqua; }
</style>
</head>
<body>
<p>
<span>T</span>his is some text.This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. In the paragraph above, the first letter of the text is embedded in a span element.The span element has a width that is 0.7 times the size of the current font.In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
</p>
</body>
</html>
thanks alot in advance.
Comment