Html Css trying to make things easier and cleaner

Sorry I’m new but my question is there a way to target specific text and make them bold in a paragraph or list item and have it select every single one without me having to put in the bold tag on every single one of them. Example I guess would be I want to make every single date bold in the list items but I’m putting in the strong tag for every single one. I was trying to think of a way to make them all in a single line or something.

thank you

  • List item

Hi! there is a way you could achieve this, however if you’re concerned with having to enclose the text you want to make bold within another element then my answer would disappoint you but it is the preferred way to do this.

The point of CSS is to strip all of the styles away from the html file so having a bold tag might not be the best thing to do.

I would suggest you to add a span element around the text elements that you want to make bold. Then give them a class attribute of your choosing and then target them in your CSS with the font-weight property to something like 600 or 7000.

then your HTML would look something like:

<p> This element is 
<span class="text-bold"> Bold </span> 
And you can't do anything about it!
</p>

and your css would look something like this:

.text-bold{
  font-weight: 600;
}

and your result would look something like:

This element is Bold and you can’t do anything about it

Hope this helped! :slight_smile:

Well, the way to target it is to add the tag, or a different tag with some class or whatever. That’s literally how you do it. The reason this isn’t an issue in IRL is that nobody writes entire complex HTML pages: part of the point of it is that it is easy to write programs that let you generate pages from data.

You apply the styling via CSS, and you put the <b> tag in if that’s what it needs (<b> was retroactively called “Bring Attention To”, it’s not “bold” any more), <strong> if the text is of special importance and needs to be very strongly emphasised, <em> for stress emphasis (eg emphasised speech), <mark> if it needs to be highlighted for reference purposes, so pick whichever one applies in this case, mark up everything that needs it, add a class if necessary (eg you have other tags of the same type somewhere else that need slightly different styling), apply the CSS

Thank you very much!! So bold tag would not be something to use regularly using CSS would make it cleaner and more organized.

Yeah I know using a tag is how you do it I’m just asking it there was another and cleaner way to do it.

yeah, if you’re working on a small project then it doesn’t really matter however on anything bigger than a hobby project, separating your styles is the way to go. keeping all of your styles even if they do something that looks as insignificant as making the text bold should be done via CSS as it would help you in the long run.

Yes, that’s literally how you do it. It’s extremely clean: I understand what you’re saying, HTML is ugly, but there isn’t a special way to write HTML without writing HTML (you can generate it, programmatically: noone actually writes entire HTML pages by hand IRL, but it’s still HTML). It’s a way of tagging parts of text: without tagging parts of text, you can’t get the text tagged. And without the text being tagged, you can’t apply styling to it.

No, don’t just use <span class="bold-text"> if you need something emphasised. There isn’t a bold tag in HTML. If there is a piece of text that needs to be emphasised, then it makes much more sense to use a tag that actually means “emphasised text” (so, <b>, <em>, <strong>, or <mark>). You then add a class to that and apply CSS styles to that (the tag has nothing to do with styling, although there are a set of default styles the browser will apply if you don’t), but <span> is meaningless: you aren’t making things any cleaner by replacing semantic elements with non-semantic ones

Hi! I intentionally omitted out the details about accessibility and semantic html which now i think should have been mentioned sorry. tbh I just assumed they were a beginner and did not want them to be overwhelmed by the whole thing. But yeah ill keep that in mind Thanks!

Thank you I appreciate the help!!

what is your current stage of learning? Initially its good to become acquainted with tags and their use, inline styles and whatnot. Later you will discover those practices can be replaced with more comfortable design. Later you can even use JS and logic to further style your content based some criteria. Many of the HTML styling tags even become obsolete or rarely used and are more of a hindrance. For example the <i> tag, which stands for italic and by default would render text italic, nowadays is widely used as container for icons, by certain frameworks(a modern day emojis :slight_smile: ), while to edit your text italic is done cia CSS rules instead. It feels more practical that utilizing a <span> element, which put aside the italic text effect, has no significant differences and fulfils the prerequisite of an inline element.

I’m currently working on the Responsive web design certificate and working on the first project. I had another question I know I’m not close but when would I start to look for job after the third certificate? Thank you for the help.

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