What is an appropriate list of HTML elements that one should style in an site's CSS?

Question

When designing the base styles for a site, one should strive to address all of the different HTML elements that could come into use. This is especially true when developing a skin for a CMS where the admin's WYSIWYG editor might introduce elements you hadn't planned on (strong, em, strike... etc).

What is a list of HTML elements that any reasonably comprehensive stylesheet should address?

I'm assuming this is in a situation where you either can't rely on browser defaults or are using a reset style sheet.

The answer I'm looking for is either an existing resource or article where somebody seems to solve this. Or, a CMS theme that does a particularly good job of handling a variety of elements.

I supposed we could also build a definitive list here if those resources don't exist or are inconsistent.

Notes

1) This may belong in community wiki, and I'll move it there if that's the consensus. However, I believe this is a specific problem with a concrete answer.

2) Almost wanted to move this to Doctype, but I don't think this is a design question. It's a development question.

3) This isn't about when and why you should use an element but about what elements you should be prepared to handle.

Answer 1

So, if I've got this right, you want to design a style sheet for public/generic use, where you don't know the specifics of the site it's being used on, right?

I would say that there's no definite answer, just a general (and loose) consensus. (So, I'd vote for Community Wiki")

OK, here's my theories:

• BODY: background, and general font size and typeface.
• H1,H2,H3 etc.
• TABLE, THEAD, TBODY, TR, TD: Since users should not be using them for layout, make it look like a table.
• OL/UL, LI
• INPUT elements
• HR
• DD/DT: maybe, but since they are so rarely used for their intended purpose, it hard to come up with a non-specific style.

And that's about it. DIV/SPAN/P don't really need a specific style beyonds what's in BODY (and if the end user put something in a DIV it probably because he has his own styling plans for it)

UPDATE: I guess a more closer question is, "What HTML elements have an expected look, which can be created in CSS?" In that case, we have:

• a (a:hover a:active, a:visited etc)
• b /strong
• big
• blockquote
• code
• dd/dt
• i / em
• uo/ol/li
• s / strike
• small
• pre
• sub
• sup
• tt

Answer 2

Always use Semantic HTML, use CSS alternative of all deprecated elements

See this article

http://www.xstandard.com/en/articles/wysiwyg-editors-and-bad-markup/

and This Article Series can be helpful for you.

http://www.punkchip.com/2007/02/css-deprecated-attributes-1/

http://www.punkchip.com/2007/02/css-deprecated-attributes-2/

http://www.punkchip.com/2007/03/css-deprecated-attributes-3/

some more articles

http://www.wait-till-i.com/2005/09/20/wysiwyg-cms-the-other-user-agent/

http://css-tricks.com/list-of-depreciated-elements-still-in-widespread-use/

Edit

I found this editor useful. all available HTML elemnts in this Editor can be styled

https://apps.carleton.edu/opensource/loki/demo/