Two Column Layout And Vertical Menu Tutorial
Add HTML Containers CSS Selectors for Layout
Lesson 3
Two Column Layout And Vertical Menu Tutorial
Add HTML Containers CSS Selectors for Layout
Lesson 3
This lesson adds a div elements to contain the major sections of the webpage. This includes the menu, the page header, the page content and a footer section.
The sections are children of the #wrapper div element. Children HTML elements inherit their parent element’s background-color property. Not all properties are inherited. For example the border property.
All the sections appear collapsed for the reason they contain on a short line of content. They expand in height as you add content in the upcoming lessons.
Get Skills to Work on Websites in 30 Days
Start today with easy to learn courses that quicky build your website skills!
Completed Lesson In Web Browser
Exercise Steps
Step 1: In the index.html file in your practice folder add lines 10-23, then save.
HTML Source Code
This is the index.html file.
Each section’s div element has an id attribute to identify it specifically for the CSS file.
Step 2: In the site.css file in your practice folder add lines 9-18, then save.
CSS Source Code
This is the site.css file.
The new selectors do not have properties. You add them in upcoming lessons.