[RESOLVED] Visual difference

[Nightwalker83]

Hi,

What is the visual difference between:

In the CSS file:

p:first-letter {font-size: 14pt; font-style: italic;}

and

p.first:first-letter {font-size: 14pt; font-style: italic;}

Below is the code in the body of the html page:

<p> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

Pictures would be good to help explain this to me.

Thanks

NW

[eranga262154]

Simply it is about use of class as a selector in CSS. In other words, on your first CSS code effect will gives for the body content,

<p> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

For second CSS code wont give any effect until you change the above code as follows,

<p class="first"> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

And also you are in wrong forum. On the HTML, CSS etc forum you can found more details. Administrator should move this later.

[Nightwalker83]

[COLOR="DarkGreen"]Simply it is about use of class as a selector in CSS. In other words, on your first CSS code effect will gives for the body content,

Yeah, I have read that but when I test both codes they both appear to give the same result on the page! Attached is the result of using the following code:

html:

  <p class="first"> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

css:

p.first:first-letter {font-size: 14pt; font-style: italic;}

However, when I used the other code:

 <p> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

CSS:

p:first-letter {font-size: 14pt; font-style: italic;}

I can't tell the difference in the result! I think maybe I am coding it incorrectly!

[Hack]

Moved At OP's request

[Nightwalker83]

I hope I put the correct code? (in my last post).

[eranga262154]

It is 100% correct. You should get the same output.

I'll explain it in this way. First thing you have to make sure is first-letter is a CSS style attribute.

If you use the code as follows,

<p class="first"> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

it use the class named first from the CSS code,

p.first:first-letter {font-size: 14pt; font-style: italic;}

Because there you have create a class in p tag as p.first If you don't use class="first" it is still direct to same CSS code. Because it works on <p></p> tags and p CSS code.

If you use the code as follows,

<p> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

it directed to the other CSS code. Because there is not use a class. That time <p></p> tags used the following CSS code,

p:first-letter {font-size: 14pt; font-style: italic;}

You don't get the difference here. It is true. Check both CSS code. Both are same, do the first appear as italic. Try to change one of them, may be as follows,

p:first-letter {font-size: 25pt; font-style: bold;}

with,

<p> Joe's Fruit and Vegetables started out as a traditional 
          store selling store selling fruit and veg along with other commodity 
          items such as milk, soft drinks and sweets etc. Joe's has been in business 
          for 27 years and has reputation for the quality of their goods.</p>

you can see the difference.

May be this link can be helpful to you.

[Nightwalker83]

Thanks!

[eranga262154]

You are welcome. So it is clear now. The thing is CSS has such resources in bunches. Some of them are like same but the way it works are difference.

[Nightwalker83]

You are welcome. So it is clear now. The thing is CSS has such resources in bunches. Some of them are like same but the way it works are difference.

Yeah, the difference between is clear now!

[eranga262154]

Yeah, the difference between is clear now!

By the way have you found a complete list of style-attributes. Still I haven't see any complete document except this.

[Nightwalker83]

By the way have you found a complete list of style-attributes.

I have been using Devguru!

[Merri]

The official CSS property index is a great place to visit.