CSS Basics

In this exercise you learn the basics of CSS styling

Exercise

Use the template provided here: Template

• Create a CSS element in the head of the HTML with the following styling
• The document should use the the font-family 'sans serif'
• The Header should be 100px in height and take all of the available width
• The Text in the Header should be 42px
• The Header Text should be centered, both vertically and horizontally
• The Header should have the following background color: #C7CEEA
• The Navigation should be 50px in height and the navigation times should be centered and have a 10px gap between each other
• The "h1" in the sections should have a font size of 28px
• The "h2" in the sections should have a font size of 21px
• The content in main should have padding of 20px
• The text in the footer should be centered and 7px in size

Tips

• keep in mind different elements have a default styling like padding, margin applied by the browser which you need to override
• sometimes there are different solutions with the same outcome
• You can also override the default display type
• Keep in mind the browser the standard defines an un-intuitive box sizing
• list styles can also be overridden

Template

Solution