Formatting Question

Hi, does anybody know how to format a word that repeats in HTML or CSS? For example, if I have a word “cell” repeated on a web page that I am designing, can I write formatting code once to effect all instances of the word “cell” that come up?

1 Like

Good question. We can wrap the word in question in an inline element such as, <span>cell</span> and then style that element.

span {
    color: darkGreen
}

If we want to find the word in text content, then we need some DOM script to do that. On a specific container it would be fairly straight forward; on a full document it would take some considerable amount of work.

1 Like

Hi mtf, lets say the word “cell” appears in my website 5 times. I want to cover all of that word using only 1 or 2 lines of code. Is this possible using only HTML5 and CSS3?

Many thanks,
Shane

We cannot select plain text in a document using CSS. It needs a wrapper, which element can be selected.

Ok, is there a way I can use the script tag to help me?

The script tag will not be of much value, but the script it wraps will be where to write the code that will find the words. That script will still need to wrap the words it finds with a span element so a style can be applied.

We must keep in mind that the entire document is plain text, tags, attributes and content. It would be necessary to ensure that we are not targeting tags or attributes, so we would cache the parent element and then search its text node.

If scripting is still not in your skill set, then put this on your future topics list and return to it some time down the road once you have some JS under your belt.