1. Introduction to CSS Layout
Lesson 4

2. In this lesson you will learn -
About CSS reset file
An overview of CSS layout options
How to use margins and padding to add space to your page
Working with the Float and clear properties
In this lesson you will learn -

3. Types of web-page Layout
there are two types of layouts –
Fixed-width
and
Flexible or Responsive /Elastic
This demo however, will teach a two column fixed-width layout
Types of web-page Layout

4. Learn to distinguish between areas
masthead
m a i n n a v
main content
footer
Inner wrap
wrap
sidebar
Learn to distinguish between areas

5. To get Started Log into the server folder-   
Navigate to My TadsTees folder > Create a New Folder and name it ‘layout’
From My TadsTees folder copy the images folder file & paste into layout folder.
Also, from the Teacher Demo folder, Copy 04_instructor_layoutstart.html and paste inside the layout folder.  
To get Started

6. See Reset file in action
5. Right-click 04_instructor-Layoutstart.html and Open with BBEdit and Preview in browser
6. This file has no styles attached to it. The styles (h1, h2, h3, p, unordered list, font style, font size, line spacing, margins, padding) on this page are determined by the browser you launched.
7. Now, go back to Teacher Demo folder, copy Reset and paste into the layout folder

7. The Purpose of a Reset file
9. Preview 04_instructor-Layoutstart.html in the browser again.
The RESET file, removed the browser’s default styling.
The benefit of a reset file is that it provides a foundation for the designer to begin adding their own rules.
Therefore, A CSS Reset file is an external style sheet that is added to a page that includes multiple rules to set the margins and paddings of HTML elements to zero.

8. Locating div layout styles
Close the browser and in BBEdit, click 04_instructor_layoutstart.html
This file contains the div element structure and some content.
Scroll-down and locate the beginning and ending of each div element.
We shall be adding the logo image that we inserted in the index.html
We will also be writing rules for div layout styles for the IDs: #wrap, #masthead, #mainnav, #mainnav list, #sidebar, #main, and #footer
Locating div layout styles

9. Let’s begin CSS styling the layout
We will begin writing internal css then make it external later. In 04_Instru…. file, click after the opening <style> tag and press Enter/Return.
Type the following style for the wrap id.
#wrap {
background-color:#E0B3B9;
width:960px;
border:thin solid black;
margin:0 auto; }
Command plus S to save and preview in the browser

10. Inserting the t-shirt logo
We are going to place the t-shirt logo inside the masthead.
 Scroll down to <div id="masthead">. Click once after the opening masthead div id and press Enter
And type the address for the logo
<img src="images/tadstees_logo.png" alt="Tads Tees Logo" width="260" height="320" />
Command plus S to save and preview in the browser.

11. Continuing with CSS styling of the layout
Press Enter after the closing curly bracket and type a style for masthead -
#masthead {
background-color:#FFF; }
Command plus S to save and preview in the browser to see the result
Continuing with CSS styling of the layout

12. Continuing with CSS styling of the layout
Scroll back up to the internal css and click once after the last curly bracket and press enter and type the following -
#mainnav {
background-color:#C2C895;
height:40px; }
Command plus S to save and preview
Continuing with CSS styling of the layout

13. Continuing with CSS styling of the layout
Click after the last curly bracket in the internal css then press enter and type the following -
#sidebar {
float:left;
width:300px;
background-color:#CCC; }
Command plus S to save and preview
Continuing with CSS styling of the layout

14. Continuing with CSS styling of the layout
Click once after the last curly bracket and press enter and type the following -
#main {
width:600px;
float:right;
background-color:#ADA446; }
Command plus S to save and preview in the browser to see the result
Continuing with CSS styling of the layout

15. Continuing with CSS styling of the layout
And lastly, Click once after the last closing curly bracket and press enter and type the following -
#footer {
clear:both;
background-color:#BA2B22; }
Continuing with CSS styling of the layout

16. Continuing with CSS styling of the layout
Now, I’d like you to pay attention to the main area.
Nothing is styled. And yet if you remember we did some styling in the previous TD. Let’s go to the My TadsTees folder and Copy and paste the styles.css into the layout folder.
To make sure it’s saved in the correct folder, Go > File > Save As > navigate to layout and Replace then, preview in the browser
Still nothing has changed. Can you tell why?
Overtype the word ‘reset’ in the link tag to styles and save then preview.
Continuing with CSS styling of the layout

17. Continuing with CSS styling of the layout
Now let’s write the style for the mainnav li which by the way is not there yet.
This is an acceptable thing to do. You can style for things that you will write later or write a code and style later.
Go back down to internal style and type the following -
#mainnav li {
float: left;
width: 120px;
height: 25px;
background-color: #ccc;
text-align: center;
border-left: 1px black solid;
border-right: 1px black solid;
list-style: none; }
Let’ study the style you just wrote for the mainnav li above.
Continuing with CSS styling of the layout

18. Continuing with CSS styling of the layout
Now to write the list items, scroll down and locate the <div id="mainnav"> then select (highlight) the words ‘Placeholder text’ and replace it with the following -
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href=“browsecatalog.html">Browse Catalog</a></li>
<li><a href=“contact.html">Contact</a></li>
</ul>
Save and preview in the browser
Continuing with CSS styling of the layout

19. The difference between a normal rule & a contextual rule
 If you write a rule for h2 as follows –
h2 {
color: red; }
all the h2s on the page will be targeted.
But if you write the rule as a div tag
#sidebar h2 {
only the h2s that are within the div named ‘sidebar’ will be targeted.
Repeat the above and change the div name from sidebar to ‘main’ and see the h2 in the main column will be target.

20. This concludes lesson 4 tutorial
Related activities –
Listen to the video tutorial 4_Intro to CSS layout
Read Lesson 4 and follow the steps to complete the Lesson 4 project
Complete self-study4a and self-study4b
Complete the Review Qs
Take a Test6 on schoology