CSS: What is the proper way to deal with multiple classes of Text

Question

So I'm on commission for a website, and I'm trying to improve my code. When dealing with a website with multiple types of font (here it's large, there it's small, there it's bold, here it's underlined, etc.) is this where we use the h1-h6, or do we reserve those for times when there is a definite hierarchy, using instead <p class="xxx"> to define different classes for text?

Answer 1

1. You determine why it should be large, small, bold, underlined or etc.
2. You write markup which expresses the semantics you determined in 1 using div and span (the semantic free elements) if nothing more appropriate exists and adding class and id if you need something more specific then anything that HTML provides explicitly.
3. You write CSS selectors that match that markup for rulesets that apply those styles

So only use headings if you have headings, and use them in order. h1 for the main heading, h2 for subheadings, h3 for subsubheadings, etc.

If you can't generate a sensible table of contents from the headings, then you almost certainly aren't using them correctly.

Answer 2

Use h1-h6 where they are supposed to be used. Use classes to decorate your text, including that inside the p or h1-h6.

As a rule of thumb, keep an eye on how your website would look without a stylesheet. You're OK as long as your website is able to convey the message even without stylesheet.

As a suggestion, I remind you that you can use multiple classes on tags. You can use this to define smaller, simpler set of rules such as:

.bigFont    { font-size: 150%; }
.italicFont { font-style: italic; }
.grayFont   { color: Gray; }
...

And apply one or more of these styles on the tags.

Answer 3

Semantically h1 - h6 are for headings. If the different types of font on your site are all headings then fine, I suspect they are not.

Similarly p is used for paragraphs.

If you have different paragraphs that have different styles of text in..then yes

<p class="firststyle">This is paragraph 1</p>

<p class="secondstyle">This is paragraph 2</p>

but remember these tags have meaning. For more info, see this article