How to add color to the last sentence in a <p>

Intro to Local Website Development | Codecademy

I’m able to put color on a separate paragraph, but don’t know how to put the color on the last sentence to the same paragraph. Right now my code is this.

<p>Made of the highest quality oak. Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. </p> 
 <p style="color: blue; font-family: helvetica; font-weight: bold;">Starting at $3.00 / brush.</p>  

but it creates a new line. How do I put a different style/color to a sentence on the same paragraph?

Can you put the exact code in so I can see what you did wrong and help you better? It’s hard to help when all you have is the paragraph

1 Like

Hey there and welcome to the forums :slight_smile:

As @wafflejz said, when you post it is good to post formatted code so that it is preserved. This is most important for languages like Python which rely on indentation, and HTML which is rendered or stripped from posts. To format your code simply press this button:

Then copy/paste your code between the two rows of backticks:


As for coloring a portion of a <p> element, your best option is probably the <span> tag, which is used to take a section of text for styling:

<p>random text in which <span style="color: blue"> these words </span> are blue. </p>

Running this code, you’ll see everything in between the <span> tags is styled, but the rest of the paragraph is not.

1 Like

Hi, welcome to the community.

I edited your post so that we can correctly see the snippet of HTML you posted. :slight_smile:

You might find the MDN documentation about “inline” vs “block” elements in HTML useful reading as it explains why you’re seeing the extra <p> element break onto a new line, rather than staying in the original line and simply applying styling.

Also by this point I believe, though please do correct me if I’m mistaken, you have been introduced to CSS class selectors.

With Dasmoto, and with CSS in general imho, you’re much better off using a class selector in your CSS than directly styling individual elements. If nothing else, this makes the styling re-usable and if you want to change anything you make changes in one place; using the style attribute of the element means you would need to change every instance which can quickly become a challenge as you work on larger projects. :slight_smile:

As an example:

/* css_file.css */
.my-price-class {
  color: blue;
  font-family: Helvetica;
  font-weight: bold;
}
<!-- html ->
<p>Made of the highest quality oak. Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="my-price-class">Starting at $3.00 / brush.</span></p> 
1 Like