Custom Header Layout 3 – CSS Styling

Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. We are going to do something different. Instead of styling in the Genesis Sample child theme, let’s go through the Modern Studio Pro child theme demo that StudioPress provides for you. Don’t worry, as I’ll explain everything.

You’ll learn about these CSS properties:

• background-size
• background-position
• background-color
• margin-top
• margin

Remember with margin and padding, think about the rotation of a clock. You specify the values in a clockwise fashion from the top. Therefore, it’s top to right to bottom to left.