Member Avatar for buddyb

I know it's a simple thing, but I've never tried it. Can someone tell me the HTML to do this with? :o
Thanks,
BuddyB

  • 2 Contributors
  • 2 Replies
  • 95 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by buddyb

Dani AI

Generated

Good quick start from — inline styling will do the job for one-off highlights. For something maintainable and semantic, prefer the HTML5 mark element for inline emphasis and CSS classes for full-line highlights. The mark element signals intentional highlighting to browsers and assistive tech; see the spec and examples at MDN: mark element.

Use a class when you want the highlight to cover the whole line or be themeable. A small, reusable pattern:

<style>
:root { --highlight: #fff59d; }

.line-highlight {
  background-color: var(--highlight);
  padding: 0.25em 0.5em;
  border-radius: 3px;
  display: block; /* makes the element span the line */
}
</style>

<p class="line-highlight">This whole line is highlighted.</p>

Quick tips: prefer classes over inline styles for easier updates and theming; use CSS variables for a single source of truth. Check color contrast against the WCAG guidance to keep the highlight readable (WCAG contrast minimum). Note that some browsers suppress background colors when printing; handle that with a print stylesheet or user instructions ().

Recommended Answers

All 2 Replies

Member Avatar for DaveSW

<span style="background-color: yellow;">Highlighted text in here</span>

Try that. If you want linebreaks around it use a div or p tag.

You can also use a #ff0044 type color instead.

Member Avatar for buddyb

Oh thank you! That'll make the task I have to do a lot easier.
BuddyB

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.