Would like to style some words with an underline

HTML & CSS
1

Hi from 23° C very humid York UK,

On this page https://www.english-teacher-david.co.uk/blog/modal-verbs-eating-out.html there are sentences within an <li> element. Would this HTML & CSS style the targeted word with an underline?

CSS

ul li .underline {
text-decoration: underline;

}

HTML

<span class="underline"> </span>

Thanks in advance,
David

2

Hi David. You seem to have forgotten that you need to format your code when you post it or it won’t be shown correctly. I’ve done it for you…

1 Like
3

Hi there nightwing,

can you reassess the link that you posted?

coothead

4

https://www.english-teacher-david.co.uk/blog/modal-verbs-eating-out.html

5

depending on the circumstance, this…

ul span {
    text-decoration: underline;
 }

would suffice.

coothead

1 Like
6

Thank you , will upload this as soon as my connection wakes up!

7

Time for one of my by now infamous piggybacks.

Is it preferred to define ul span or just .underline?

(I ask because I recall being told that it’s more intensive on a browser to apply a multi-level CSS selector than a singular)

8

I understand you’re asking a performance-related question, but IMO you should ignore that. Yes, .underline would be less intensive than a ul span but the difference is negligible and developers should really focus on the specificity of selectors and how they will cascade in larger sites. At least, that’s how I think people should think about it :slight_smile: .

The smaller client sites means CSS files are too small to really notice discernible differences in rendernig time, and larger sites need to focus more on the cascading aspect because larger sites are harder to maintain and not run into conflicting situations.

1 Like
9

Found this link which has raw numbers.

10

There is never “one solution fits all” in CSS, as circumstances vary, but I would say in general, the selector seems over specified. If there is an element with the .underline class, do we really need ul li in front of it in the selector?
Well, if the .underline class does something entirely different when not nested in an li in a ul, you may, but if the .underline class only ever applies an underline, then the selector is over specified.

As for span, does there even need to be a span? Is the whole li underlined, or just part of it?
If the whole li is underlined, apply the class to the li element.
If the whole ul is underlined, apply the class to that.
If only part of the li is underlined, you do need a span.

2 Likes
11

After coding about 500 sites I realised I could have saved myself loads of headaches if only I’d been sensible and added an extra simple class :slight_smile:

.underline {}

I used to be a strong advocate of using descendant selectors to target elements in order to keep the mark up clean and while this is fine for a one off small site under your control it simply does not work efficiently on larger projects with many people working on the same code and where the code changes often.

If you use ul span then there’s a risk that someone else adds another span inside your span and you get styles being applied to the new element. If the span had a class to start with then it would be unlikely that anyone else would add the span with the class and not realise what is was being used for.

Of course there are times when you certainly do want every element in your parent styled and then you should use a descendant selector (e.g. a long list where every list is the same). However if I added a span inside the list I would not say ul.parent li span {}. It would be much easier to add a class to the span and keep specificity and maintenance low.

If adding extra classes to the html makes your life easier and the site easier to maintain then it is worth the slight overhead in markup. Always keep specificity as low as possible and try not to undo styles later on.

As with any of these questions though it does boil down to personal preference and in what environment you are working. :wink:

4 Likes
12

Hi & a massive thanks for your suggestion it works :slight_smile:
https://www.english-teacher-david.co.uk/blog/modal-verbs-eating-out.html

but… The underlined styling has cascaded into the top nav eg in the horizontal nav there is now an underscore, i don’t want this.

So would this work?

ul span { 
text-decoration: underline;
font-weight: bold;
}

<span class="underline"> </span>

Thanks in advance,
David

13

Hi there Nightwing,

make the ul element in question specific…

   <ul id="modal-verbs">

…or…

   <ul class="modal-verbs">

…if there is a likelihood of more than one list.

The CSS would then be ether…

#modal-verbs { 
    text-decoration:  underline;
    font-weight:  bold;
}

…or…

.modal-verbs { 
    text-decoration:  underline;
    font-weight:  bold;
}

coothead

1 Like
14

Hey I really appreciate you doing this & if you have the time I have a question before I upload the code you kindly sorted out… “Won’t the above code underline everything in the list?” Thing is I just need specific words in the list underlined as can be seen here:
https://www.english-teacher-david.co.uk/blog/modal-verbs-eating-out.html

Thanks in advance,
David

I’m afraid it does :frowning:

Screenshot 2020-06-24 at 11.05.01 AM

15

Then just add the class of .underline to the spans in question.

.underline{text-decoration:underline}

<span class="underline"> I am underlined but I am not a link and you will feel really stupid when you try to click me as you will do many times ...ha ha got you.</span>

Underlines are bad if not on links 99% of the time.

Given the potential to confuse underlined text with links, using text-decoration: underline; on anything other than <a> is bad pretty much all the time.

1 Like
16

Great thanks, yes your right I’ll knock out the underscore, will update progress here when my snail pace connection comes out of a coma :wink:

17

Sorry about that. :unhappy:

The code should have course read…

#modal-verbs span { 
    text-decoration:  underline;
    font-weight:  bold;
}

…or…

.modal-verbs  span { 
    text-decoration:  underline;
    font-weight:  bold;
}

coothead

2 Likes
18

Upgrading internet speed etc as cant upload anything at the mo so will update back here when I can :slight_smile:

19

Thank you everyone it now works.

CASE CLOSED

21

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.