Two Column Layout And Vertical Menu Tutorial
Add Borders and Padding
Lesson 6
Two Column Layout And Vertical Menu Tutorial
Add Borders and Padding
Lesson 6
Borders and padding are added to all the sections except for the menu.
Completed Lesson In Web Browser
Get Skills to Work on Websites in 30 Days
Start today with easy to learn courses that quicky build your website skills!
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 18-20, 23,-26, and 29-32, 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: