Skip to main content
Galeodan
Galeodan
Known Participant
April 22, 2021
Answered

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

  • April 22, 2021
  • 2 replies
  • 497 views

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?

 

    This topic has been closed for replies.
    Correct answer osgood_

    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;

    }

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 22, 2021

    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>

     

    Nancy O'Shea— Product User & Community Expert
    Galeodan
    GaleodanAuthor
    Known Participant
    April 22, 2021

    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
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 22, 2021

    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.

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_Correct answer
    Legend
    April 22, 2021

    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
    GaleodanAuthor
    Known Participant
    April 22, 2021

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

     

    O
    osgood_
    Legend
    April 22, 2021
    quote

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices