How do I apply a class to a span?
396 views
Skip to first unread message
Richard
May 31, 2011, 10:11:35 PM5/31/11
to bluegriffon
If I highlight a piece of text, the class drop-down menu applies a
class to the entire enclosing element (typically the text between the
nearest <p></p> tags). I would like to be able to apply a class to
only the selected text, so that the resulting markup is, for example,
ipso facto <span class="fido">highlighted text</span> ipso facto
Using the "Span" entry in the "Format" menu does insert the desired
<span></span> tags, but I don't know how to apply the desired class
value to that element.
class to the entire enclosing element (typically the text between the
nearest <p></p> tags). I would like to be able to apply a class to
only the selected text, so that the resulting markup is, for example,
ipso facto <span class="fido">highlighted text</span> ipso facto
Using the "Span" entry in the "Format" menu does insert the desired
<span></span> tags, but I don't know how to apply the desired class
value to that element.
Charles Cooke
Jun 4, 2011, 3:08:02 AM6/4/11
to bluegriffon
Just highlight the span element
If you have already created the class needed go to the drop down box,
on the third toolbar, which shows 'no class' in the window. Select the
class you want.
If you have not created the class already use the Style Properties
panel and select 'all elements of class' and add a class name in the
empty box. Then define the class.
If you have already created the class needed go to the drop down box,
on the third toolbar, which shows 'no class' in the window. Select the
class you want.
If you have not created the class already use the Style Properties
panel and select 'all elements of class' and add a class name in the
empty box. Then define the class.
Richard
Jun 5, 2011, 6:53:22 AM6/5/11
to bluegriffon
Thank you for your reply. This is what happens:
1. I start with unformatted text:
<p>It was a dark and stormy night.</p>
2. I highlight a word and select "Span" from the format menu:
<p>It was a <span>dark</span> and stormy night.</p>
3. With the same word still highlighted, I select class "geo" (defined
in a CSS document):
<p class="geo">It was a <span>dark</span> and stormy night.</p>
No matter what I try, the only way to get the desired result:
<p>It was a <span class="geo">dark</span> and stormy night.</p>
is to edit the HTML directly.
Richard
1. I start with unformatted text:
<p>It was a dark and stormy night.</p>
2. I highlight a word and select "Span" from the format menu:
<p>It was a <span>dark</span> and stormy night.</p>
3. With the same word still highlighted, I select class "geo" (defined
in a CSS document):
<p class="geo">It was a <span>dark</span> and stormy night.</p>
No matter what I try, the only way to get the desired result:
<p>It was a <span class="geo">dark</span> and stormy night.</p>
is to edit the HTML directly.
Richard
Charles Cooke
Jun 5, 2011, 11:45:41 AM6/5/11
to bluegriffon
You are right in describing what the desired result is. And you can
get it using the method I gave you.
It looks as if you are omitting the first step 'Just highlight the
span element'.
I was assuming that you knew how to highlight an element. Maybe you
don't so here’s how.
1 - Click anywhere in the element i.e in the word 'dark'.
2 - Either (a) below the main window in the area which as yet seems to
have no name you will see <body> <p> <span> (there may be other text
between <body> and <p>), Click <span>, you should see the word 'dark'
highlighted. It is now selected.
or (b) Use the DOM Explorer. You should see the span highlighted (i.e.
over a grey background). Click it. You should see the background
colour change in the DOM Explorer (not in the main window). The
element is selected and you can manipulate it.
get it using the method I gave you.
It looks as if you are omitting the first step 'Just highlight the
span element'.
I was assuming that you knew how to highlight an element. Maybe you
don't so here’s how.
1 - Click anywhere in the element i.e in the word 'dark'.
2 - Either (a) below the main window in the area which as yet seems to
have no name you will see <body> <p> <span> (there may be other text
between <body> and <p>), Click <span>, you should see the word 'dark'
highlighted. It is now selected.
or (b) Use the DOM Explorer. You should see the span highlighted (i.e.
over a grey background). Click it. You should see the background
colour change in the DOM Explorer (not in the main window). The
element is selected and you can manipulate it.
Richard
Jun 7, 2011, 9:56:42 PM6/7/11
to bluegriffon
Much more better, thank you!
Richard
Richard
Reply all
Reply to author
Forward
0 new messages