Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Treehouse Club: HTML Publish a Story Introduction to Workspaces

Posted by Angela Ramseyer
Angela Ramseyer
Courses Plus Student 1,116 Points

How can I change paragraph colors without running the paragraph text together?

I was trying to make my three paragraphs each a different color. I was successful in doing that if I bracketed the respective paragraphs in <p1></p1>, <p2></p2> and <p3></p3> and adding line items inside the <style> section for the following:

p1 {color: lime} p2 {color: forest} p3 {color: blue}

After saving my work, the three paragraphs did change to the designated color. However, the paragraphs' text ran together to create one multi-colored paragraph instead of maintaining the line spaces between. What did I do wrong?

Thanks,

Mochammad Rezza
Mochammad Rezza
4,778 Points
Mochammad Rezza
Mochammad Rezza
4,778 Points

Try this code : CSS code - .p1 {color: lime;} .p2 {color: forest;} .p3 {color: blue;}

note : use (.) dot befor p1, p2 and p2

HTML Code - <p class="p1">this paragraph has a lime color</p> <p class="p2">this paragraph has a forest color</p> <p class="p3">this paragraph has a blue color</p>

note : use tag paragraph and call the css class .

I hope, this code help your problems ^_^

gfjidajfieosjfds
gfjidajfieosjfds
3,047 Points

note: code will note show up in comments after submitting, so i left out the less/greater symbols so it shows for example body example text /body this is what i did, p example text /P creates the paragraph look with spaces. how ever if you put p1 under style example. style p1 {color: blue} /style the p in p1 no longer represents the paragraph only style (in this case color). so the solution is just add p p1 example text /p1 /p. make sure to include the less/greater symbols

how ever this doesn't make full senses to me either because the titles are larger than the paragraphs if im right then what causes the titles to be bigger? if h1 makes text bigger shouldn't p1 also define a paragraph?

3 Answers

Mochammad Rezza
Mochammad Rezza
4,778 Points
Mochammad Rezza
Mochammad Rezza
4,778 Points

oke, if you want to include line break for your paragraph, use tag break on each after you create a paragraph. example :

<p class="p1">this paragraph has a lime color</p> <br> <p class="p2">this paragraph has a blabla color</p> <br> <p class="p3">this paragraph has a blabla color</p>

Angela Ramseyer
PLUS
Angela Ramseyer
Courses Plus Student 1,116 Points
Angela Ramseyer
Angela Ramseyer
Courses Plus Student 1,116 Points

Hi Mochammad,

Thanks for your reply. The code you suggest is the code I used. The colors worked, but the text of the three paragraphs (the formatting) became one tri-colored paragraph without line breaks between the lime, forest or blue paragraphs. Any thoughts on the format?

Oleksandr Bozhko
Oleksandr Bozhko
2,198 Points
Oleksandr Bozhko
Oleksandr Bozhko
2,198 Points

Hi Angela,

You can use use code <br> if you want a line break in between paragraphs. I actually used a second <br> code on the next line to separate them even more. I hope that is helpful for you.