Two Column Layout And Vertical Menu Tutorial
Format Header and Footer
Lesson 7
Two Column Layout And Vertical Menu Tutorial
Format Header and Footer
Lesson 7
This lesson applies font and text alignment styling to the header and footer sections.
Font Size Inheritance
The font-size property is inherited starting with the web browser. The web browser provides a container to all the elements. Modern web browsers use 16px as the font size. The body element inherits the web browser font size. This font size is inherited by the #wrapper div elements. This continues to all of its child elements.
Get Skills to Work on Websites in 30 Days
Start today with easy to learn courses that quicky build your website skills!
The em Measurement
We are going to use the em measurement for font size. The em measurement is based on the container element’s font size. Because of this the em measurement allow you to set font sizes relative to the container versus absolutely using the px measurement. For example 1 em means that the font size is the same font size of the container and .75 em is 75% of the container’s font size.
The web browser font size is 16px. For all its inheriting containers starting with body, its children and their children, 1 em is the same as 16px.
Overriding Font Size Resetsem Inheritance Value
If one of the inheriting containers overrides the font size, then we reset 1 em for all of its children. For example if you set a child element font size to .8 em, then 1 em for its children element is based on that. In this case .5 em for the child is half of its parent’s parents font size.
Completed Lesson In Web Browser
Exercise Steps
HTML Source Code
This is the index.html file. There are no changes from the previous lesson.
In the site.css file in your practice folder add lines 21-22 and 35-37, then save.
CSS Source Code
This is the site.css file.
The border and the padding properties apply to the top, right, bottom and left sides of a block element. They also have variations that allow you to apply to just one side of a block element.
For example you used the border-left property in the header selector on line 19.
You can use the border and the padding properties and their hyphenated top, left, botton and right versions independently or together. For example in the header selector you applied the border property first on line 18. This was applied to the top, left, botton and right of the block element. Then you used the border-left property on line 19 to override the left side.
Property References: