Question about CSS and HTML5

HTML & CSS
1

So I got the new book Jump Start HTML5 and I like what I have read.

But I have a stumbling block because it did not go into how to link the new HTML5 elements to my CSS styles.

Instead of

<div id=“header” > we now use the element <header>

Now I currently define #header in my CSS style sheet.

Using HTML5 how do I define <header>?

Especially since <header> can be used in <article> and <section> and I would want its style to be different.

I am hoping it is as simple as using <header class=“pagetop” > but I did not see that in the book, and my Google search had more rudementary information like using CSS instead of tables.

It is late in Toronto. I am hoping in the morning I have an answer to what I suspect is very much a newbie question :slight_smile:

And if anyone can recommend a CSS3 book that covers this, and all the new goodies in CSS3 I would be most appreciative.

Thank you.

2

Using HTML5 how do I define <header>?

Especially since <header> can be used in <article> and <section> and I would want its style to be different.

Hi Stephen. These new elements are just like any other HTML elements. You target a <header> element like this:

header {
  color: red;
}

To target a header within a section, you can do

section header {
color: red;
}

etc. Of course, if you want to target specific sections or headers you can give them special classes, just as with any other element. So if you wanted to target the header inside a section with a class of “special”, you’d do this:

.special header {
color: red;
}

… and so on. So no big surprises here. :slight_smile:

PS In terms of a CSS3 book, there is also a Jumpstart book ont hat, although you don’t need a book for this issue, as it’s just a standard CSS issue.

3

Thank you!