CSS - Selecting the first bold word of all paragraphs

Question

write the required external CSS rules for the following :

Set the font size and font style , of the first bold word of all the paragraphs in a document into 14px and italic respectively.

Answer 1

Hello Ashley,

I'll expand on Art's answer a little bit.

There are several ways to bold text in an HTML document, but the most used methods involve using either <b> or <strong>. The first method although valid isn't the recommended method, because usually bold text denotes something important, something worth differentiating from the text surrounding it, hence the second method using <strong> is the recommended way.

With this being said, your paragraphs should have the text/words that are bold inside the <strong> tags, like this:

<p>A good web designer needs to have both <strong>creative graphic skills</strong> and <strong>technical</strong> skills.</p>

<p>The term <strong>Web Designer</strong> is often incorrectly interchanged with the term <strong>Web Developer</strong> and vice versa.</p>

[Extract from What is a Web Designer? https://www.technojobs.co.uk/info/it-job-roles/what-is-a-web-designer.phtml]

Now you can do what Art suggests to style the first bold text in all the paragraphs:

p > strong:first-child {

font-size: 14px;

font-style: italic;

}

Keep in mind that you don't have to make the text bold via CSS because it's already bold by using the <strong> tag.

I can explain why the text turns bold by using the <strong> tag, but that answer is out of scope of your question. Just let me know if you'd like to know anyway :)

Hope this was clear, if it wasn't, no worries, keep asking and we'd be glad to help.

Here's a demo: https://jsfiddle.net/cymuroav/

Answer 2

You would need to add a tag around the first word like span. Then use font-size: 15px, font-style: italic.