CODEWITHSUNDEEP
htmlcss
JFA
JFA

Reputation: 135

how to style a p tag with span in there

I have a p tag that has few lines in there , but each line of text is suppose to be a different font size. I added span to be able to access with css and fix that but I have not be able too

   <p id="special-text">
                    <span class="special-size24">reserve your </span>
                    <span class="special-size24"> suite now</span>
                    <span class="speciallinetwo"> and get</span>
                    <span> 20&#37;</span>
                    <span>off a tour of the</span>
                    <span>historic</span>
                    <span>gerhard</span>
                    <span>monastery</span>
</p>

I gave each span a class...to access with css but didn't make a difference.

css 

.img-special .special-text .special-size24 { font-size: 24px; }

Upvotes: 1

Views: 592

Answers (2)

Samuel Cook
Samuel Cook

Reputation: 16828

Giving class names to the span tags worked for me:

#special-text{}
#special-text .specialline1{font-size:12px;}
#special-text .specialline2{font-size:16px;}
#special-text .specialline3{font-size:20px;}
#special-text .specialline4{font-size:24px;}
#special-text .specialline5{font-size:28px;}
#special-text .specialline6{font-size:32px;}
#special-text .specialline7{font-size:36px;}
<p id="special-text">
	<span class="specialline1">reserve your <br> suite now</span>
    <span class="specialline2"> and get</span>
    <span class="specialline3"> 20&#37;</span>
    <span class="specialline4">off a tour of the</span>
    <span class="specialline5">historic</span>
    <span class="specialline6">gerhard</span>
    <span class="specialline7">monastery</span>
</p>

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

Use nth child

#special-text span:nth-child(1){
    color: red; 
} 
#special-text span:nth-child(2){
    color: green; 
} 
#special-text span:nth-child(3){
    color: blue; 
} 
#special-text span:nth-child(4){
    color: yellow; 
}

Fiddle

Upvotes: 3

Related Questions