Adding text shadow to your whole website

Question

I want to add shadow to all the text into a website. The text is in different elements of the website.

Now I was thinking of 2 things.

1) add a class to all the containers with text, and just give the class the text-shadow style. This will give me a lot of work tho, adding a class the all the elements in the website. And what will this do with the DOM?

2) Add styling to all the elements:

h1,h2,h3,li,p,span{text-shadow:1px 1px 1px rgba(51, 69, 78, 0.5);}

Which one of the 2 is better to use, or is there a better, more optimized way to do this?

Answer 1

IMO you should not create a specific class just for text-shadow. That's like adding presentation back into the document. text-shadow should be added to those elements (or predefined classes) that require it. So, of your two options, #2 would be my recommendation, although I would have said you should only be adding it to a subset of predefined classes. And not all elements/classes would require the same type of shadow.

Do you really want to add text-shadow to every bit of textual content?! Large blocks of text should not have text-shadow applied in my opinion. This could make the text harder to read and hence cause some accessibility issues.

Answer 2

If this is going to apply to all text, you just need to start with:

body, input, textarea, select {
    text-shadow : 1px 1px 1px rgba(51, 69, 78, 0.5);
}

On testing, you might need to add one or two other elements for total coverage. For example, note that some form elements had to be included explicitly; they're annoying like that. Also remember this is not going to apply to anything that's not actually in the document, like iframes.

If you really want to cheat, you can just apply the property to the universal selector:

* {
    text-shadow : 1px 1px 1px rgba(51, 69, 78, 0.5);
}

But given some findings about that being inefficient(it gets applied to every single thing on the page) and the type of processing involved in creating things like shadows, it might not be a great idea.

Answer 3

Don't apply it to a bunch of elements individually; just set it at the top and the shadow will apply to all contained text.

body { text-shadow:1px 1px 1px rgba(51, 69, 78, 0.5); }

(If it didn't work this way, then there would be lots of inconveniences from document structure, such as if you specified a shadow on a paragraph which contained a link.)