What if I want to put another class in my xHTML code

Get Started
1

Hello everybody,

I’m still testing everything I learn and one of the things I tried to test today was to make the first letter of some of my paragraphs big and bold . I put this on my CSS sheet:

p: first-letter
{
float: left;
font-size: 3em;
font-family: Arial, Georgia, “Times New Roman”, Times, serif;
font-weight: bold;
margin-right: 5px;
}
It worked fine. The only problem is that I don’t want it in all my paragraphs. I only want it in one paragraph, and this paragraph already has a class (border).
My question is : Is it possible to have two classes in one paragraph? If so, how do we add it?

I’m just hoping it’s not a dumb question:)
Thanks in advance

2

Don’t worry about asking questions, look at the quote in my sig to see why :wink:

<p class="border boldfirst">

It would then have the border and boldfirst classes attached to it.

3

Hi Jake,
How about making it bigger and also with a different font or color?

Thank you for the quick reply

Excellent signature :slight_smile:

4

I just tried it and it made all the letters in the paragraph: bold and big:(

5

Can you post the CSS you’re using please?

6

Sorry for the delay in response time:) Here is my Css sheet

.border
{
width: 25%;
text-align: justify;
border: 2px solid black;
padding: 12px;
margin: 50px;
margin-left: 0px;

}
.firstletter
{
float: left;
font-size: 3em;
font-family: Arial, Georgia, “Times New Roman”, Times, Serif;
font-weight: bold;
margin-right: 5px;
}

I created a second class and put next to the “border” class on my html code.

<p class=“border firstletter”>

All of the letters became big and bold.

All I want is having the first letter of the first paragraph bold and big.

7

Try this:

[COLOR="Red"]p.border:first-letter[/COLOR] {
  float: left;
  font-size: 3em;
  font-family: Arial, Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  margin-right: 5px;
}

You don’t need the .firstletter class.

EDIT: To wok in older browsers (that don’t recognize :first-letter) you could instead wrap the first letter in a <span> and apply the styles to that. E.g.

[COLOR="Red"]p span[/COLOR] {
  float: left;
  font-size: 3em;
  font-family: Arial, Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  margin-right: 5px;
}
8

Ralph: It works perfectly!!! I have two questions though!

What do we call first-letter? It’s a class, an attribute, a property?
How come the first-letter was applied only to 3 paragraphs and not to all my paragraphs and how can I apply it to the first paragraph only?

Thank you so much for your help!

9

first:letter is a pseudo element

If you went with this one: p.border:first-letter

Then it’s being applied to any <p> element with a class of border: <p class=“border”> If you want to apply it to only one paragraph, give that paragraph a unique class name and target that: <p class=“first”> p.first:first-letter. ‘first’ is just an example it can be changed.

10

Thank you BPartch. I applied what you recommended and I have now one paragraph that starts with a bold big letter.
Thank you again:)