How would you code this header in css only

With a quick glance you could remove the <em></em> that surround the logo and move the .logo em styling to .logo a.

You could also use short-codes as well. (i.e.

margin-left: 320px;
margin-top: 0px;

could be

margin: 0 320px 0 0;

or something like that.)

Your borders could be combined as well.

I'd recommend you check out this article Create Maintainable Code with a CSS Styleguide it should help with your organization.

Here's how I like to organize my CSS:

• Section the CSS

  • section the CSS with comments
  • general section order
    • resets
    • wrapper
    • header
    • containers (order to match the HTML)
    • footer
    • typography

• Each Selector on it's Own Line

  • when a rule has only one selector put it all on one line
  • when a rule has multiple selectors, put the ending brace is on it's own line
  • when using multiple selectors, ident them (either one tab or 3 spaces)

• Order Selectors Consistently

  • break up sections inside a rule with a blank line
  • general selector order, inside a rule
    • sizing
    • display/positioning
    • margin/padding
    • borders
    • any others

Just out of interest why are you aiming to do it as css only please? To test your skills? Functional reasons? Other?

I have the same question as above. Why? Also the extra (or lack of) spacing you have before or after brakets makes it all look a bit unorganized. If you are going to do it all in CSS imo you want to keep it clean, organized and as stated above as condensed as possible.

+1 For the organization.

I would also add you are using various different types of colors, I see CSS color keywords, HSLa & RGBa.

I'd suggest you go with with either HSLa or RGBa. If you go with HSLa remember to use a hex fallback.

thanks for the feedback. I like the guide for maintainable code and something am working on.

This to test my css skills and was just a quick mockup but I should be maintaining my code better.

It will be made into a theme called thrive. Made good progress this evening and want to finish next week.

I guess why not code it in css would be my question now? Lines of code against background image size.

anyway feedback is always welcome as am learning all the time.

I have went back tidy up my coding.

I need to keep this up it is way easier to maintain. Sometimes I write code then go back later to tidy it up but I can see this is not a good practice. Habit and process change required.

Processing text is always much faster than processing images..