Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


How would you code this header in css only

Hi am working a theme at the moment very early stages.

If you were to design the header with css only how would you tackle it?

feel like I have a lot of code.

link to the header on CodePen

8 Answers

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.

James Barnett
James Barnett
39,199 Points

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.

James Barnett
James Barnett
39,199 Points

+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..