How do you custom-format inline span elements like <strong>, <em> etc.?

[Galeodan]

I understand that if I want to emphasize certain words in a paragraph, I should use an inline element like <strong>, <em> etc., rather than insert a <style> in the HTML section\file. But if I want to control the effect of these elements, how do I custom format them in CSS? Can I define and format my own span-elements?

[osgood_ · Accepted solution]

Sure, examples below:

<p>This is some <span class="highlightedText">highlighted text</span> in a paragraph</p>

.highlightedText {

color : red;

font-weight: bold;

}

or

<p class="highlightedText">This is some <span>highlighted text</span> in a paragraph</p>

.highlightedText span {

color : red;

font-weight: bold;

}

or

<div class="highlightedText"><p>This is some <span>highlighted text</span> in a paragraph</p></div>

.highlightedText span {

color : red;

font-weight: bold;

}

[Galeodan]

Thanks - I should have figured that you could define classes for inline elements. Getting there 🙂

[osgood_]

Thanks - I should have figured that you could define classes for inline elements. Getting there 🙂

No problem. I had no idea what I was doing when I first started out but little by little and much more importantly if you have an interest to learn you will pick it up very, very quickly. It's those with no interest and not willing to invest any time that will fail. Of course its more difficult if you only do this as a hobby to find the time, it was my job, which helped of course.

[Nancy OShea]

I'm not fond of <span> tags because they provide no semantic meaning or structure the way HTML5 tags do.  <em> = emphasis and <strong> = bold.  No <span> tags needed.  And you can style them to suit with CSS

CSS:

strong {
font-weight: 900;
color: red;
text-decoration: underline
}
em {
color: #333;
font-style: oblique;
}
em:before, em:after { content:"\0022"; }

HTML:

<p><strong>Very Important Instructions:</strong> followed by normal paragraph style.</p>
<p><em>Never say never</em> and other pithy slogans.</p>

[Galeodan]

Thanks - I was trying:

.strong {
    color:red;
    font-weight: bold;
    }

But it didn't work with the "." there. For  reasons that are now obvious.

[Nancy OShea]

CSS Selector Names:

Any HTML element can be a reusable selector name  -- no dots or octothorps needed.

A dot . denotes a re-usable custom selector class. 

An octothorp # denotes a unique custom selector ID.