Why Do H1 Tags Not Need a Class or Id in The CSS

Why do H1 tags not need a class or id in the css?

This means that all occurences of h1 will share the same style. Similarly, you can have a style defined for any other element, e.g.:

p { font-family: Helvetica; }

That means all p tags will use the Helvetica font.

Note that it's also a best practice to have just one h1 element in a page.

You can find a brief overview what different types of selectors mean here.

h1 tag class (alternate)

Sure you can:

<h1 class="someclass">…</h1>

The class attribute is a in the attribute group coreattrs of core attributes that can be used with the h1 element.

Classes and Ids do not work in Style Tags

Class names must begin with a letter.

Is it a norm to use class or id for header and section in html

It's perfectly acceptable to put a class or and id on either <header> or <section> since it's valid HTML to use up to multiple of them - it makes it easier to target them.

With that said, an id should always be unique per page. For example, never use the same id more than once in the entire page... that's what classes are used for.

It's also perfectly acceptable to style the <header> and <section> tags directly. It's ultimately your choice... To reinforce this concept, even browsers will have slightly different default styles for those elements. E.g. Opera may have slightly different default CSS to what Chrome might have.

How to style/reference a html tag like h1 anynameText/h1 without any class or id specified within it?

You can use an attribute selector — square brackets with the attribute name.

h1[anyname] {
    /* ... */
}

Is it a bad idea to create css classes for text tags?

First: HTML is all about semantic. CSS is all about styling.

This means:

• <h1> is a very important headline
• <h2> is a less important headline
• <h6> is a very very less important headline

If I understand you right, you want to style your headline <h1> on different ways. Please think about, why you want to style it on different ways. Are they on the same level of importance?

If not, you can give the less important headline the <h2> tag, and the important one the <h1> tag.

CSS:

h1 { font-size:36px; }
h2 { font-size:24px; }

If they have the same level of importance, your approche of special-headline is the right way to handle this. You should do this as a Class. Id means it is a unique object. But I assume, you have more then one special-headline.

---

Related Topics