Class declaration Header - HTML 5

I was trying to put a image (logo) in the header element provided by HTML5 and I am curious if anyone knows if it is possible to declare a class in CSS something on the lines of header.image?

I tried header.image and it didn't seem to work, however as soon as I had the class named just .headerimage then it seem to be picking up the padding property I was trying to apply.

I'm doing some very basic learning as it's been sometime I picked up HTML code. Please help if your time permits. Thanks

I was trying to put a image (logo) in the header element provided by HTML5 and I am curious if anyone knows if it is possible to declare a class in CSS something on the lines of header.image?

I tried header.image and it didn't seem to work, however as soon as I had the class named just .headerimage then it seem to be picking up the padding property I was trying to apply.

I'm doing some very basic learning as it's been sometime I picked up HTML code. Please help if your time permits. Thanks

This is not the entire HTML/CSScode, but I could manage to take some screenshots. You guys helped me answer some questions and understand how period is not relevant to what I was trying to do. Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view) Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)

In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup. I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is 开发者_如何学Gothis something I should handle with position or float property in CSS? I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue? The CSS code is in screenshot 2. After looking at the discussion here I thought using class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.

In CSS, a period without spaces like this.thing means:

select elements that have the class thing but only if they are of type this

Period (.) is a special character in CSS, so you can't name classes with periods. Try an _ or a -.

Actually you can't use period in class names, because it is a class selector. For example, is you have a class "foo" applied to some html element, you can style this element in css linking to it as ".foo".

Example HTML:

<header class="foo">
  <img class="bar" src="some/path/here">
  Some content here
</header>

Example CSS:

.foo { color: #AAA; }

or

header.foo { color: #AAA; }

In first CSS example the style will be applyed to all elements, wich have class "foo". In the second - to all elements, wich have class "foo" and same time are of "header" type.

Returning to your case, I think the only aim is to apply style to image inside of header element. It can be done different ways:

1. Use the image class

   .bar { width: 100px; }
   

   or more concretely

   img.bar { width: 100px; }
   

2. Use parent-child relations

   header img { width: 100px; }
   

   above will apply styles wich lay inside the header element or in its children elements

   header>img { width: 100px; }
   

   this will be ok only for the direct child of header.

3. Combine two approaches.

If you know for shure that there will be only one image in header element, I can recommend the approach with ">". Read more about different css selectors, ids and classes. It will do the job.

Assuming your markup looks like this:

<header><img /></header>

The selector you want would be this:

header img {...}

If you really did class your image with class="image" (kinda redundant), then you'd want:

header .image {...} /* note space */

This assumes that the browser supports the html header element. If it doesn't, you'd want to use something like html5shim 1 or modernizer 2