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

Explorer ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

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?

 

Views

63

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Apr 22, 2021 Apr 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;

}

Likes

Translate

Translate
LEGEND ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

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>

image.png

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

Thanks - I was trying:

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

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 22, 2021 Apr 22, 2021

Copy link to clipboard

Copied

LATEST

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines