Different text sizes on same line
-
Here is my website URL: http://melanielefebvre.com/
My question is:
This is my title page. I would like to have ART OR WRITING on the same line but be able to make ART and WRITING much larger than the OR. Essentially, visitors would click on either word and go to that respective page.
I’ve done this in CSS, but it’s obviously putting each word on a different line:
<p style=”text-align: center; font-size: 50px;”>ART</p>
<p style=”text-align: center; font-size: 25px;”>OR</p>
<p style=”text-align: center; font-size: 50px;”>WRITING</p>Can you help please?
THANK YOU!The blog I need help with is: (visible only to logged in users)
-
ALSO, sorry, it seems that the space between ART and OR, and WRITING and OR are not equal. How would I fix this?
THANK YOU! -
Hi there,
When you use the <p> tag, it creates a new paragraph — that’s why each of the words appears on a different line. You can use the <span> tag to make each word a different size without creating a new line. We have tips for how to do that here: Font Size and Color
Once they are all on the same line, you shouldn’t have to worry about the space between the lines, but please let me know if you have any questions about that. :)
-
Hello,
Thank you for your help.
I can’t seem to get it working. This is what I have and I don’t know where to put the <span> elements within the <p>. Confusing! :
<p style=”text-align: center; font-size: 50px;”>ART OR WRITING</p>
<p style=”text-align: center;”>don’t want samples of work? go straight to RESUME</p>thank you… again! :)
-
In other words, right now the words ‘ART’ and ‘WRITING’ are at 50px, I would like them to be 100px. And ‘OR’ I would like to be at 25px…
I see the logic on the help pages you sent me, and I had looked at them before posting the original question, but it’s not really clear how to put that within the CSS (?) that already exists…
-
Hi there,
I’m happy to help with this further. :) You can think of each pair of <span> </span> tags as bookends, that need to go around the text you want to change. Any time you want to create a different style (like font size) you’ll need a new set of span tags. Here’s one way you can do it:
<p style="text-align: center;"><span style="font-size: 100px;"><a href="http://melanielefebvre.com/art">ART</a> </span><span style="font-size: 25px;">OR</span><span style="font-size: 100px;"> <a href="http://melanielefebvre.com/writing/">WRITING</a></span></p> <p style="text-align: center;">don't want samples of work? go straight to <a href="http://melanielefebvre.files.wordpress.com/2013/08/web-resume.pdf">RESUME</a></p>Let me know how that goes! :)
- The topic ‘Different text sizes on same line’ is closed to new replies.
WordPress.com Forums 