1. Introduction to CSS Layout
Lesson 7

2. What you’ll learn in this lesson -
Understanding 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
What you’ll learn in this lesson -

3. Types of Layout there are two types of layouts – Fixed-width and
Flexible or Responsive
This demo however, will teach a two column fixed-width layout
Types of 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 your server folder-   
1. Double-click TadsTees folder 2. Right-click and create a New Folder and name it ‘layout’
2. Copy the images folder and styles.css file into it
3. We will download 2 other files one at a time (very important)  
Visit my website > Lesson files Menu > Scroll to lesson 7 resources > Point and right click 07_instructor-Layoutstart.html > choose Save link as from a list of options > navigate to Tad’s tees folder > click save.
4. Delete the ‘1’ from the file name
To get Started

6. See Reset file in action
5. Right-click 07_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 used.
7. Now save Reset into the layout folder (follow the steps for the 07_instru…. file
8. Delete the ‘1’ from the file name

7. The Purpose of a Reset file
9. Now Preview 07_instructor-Layoutstart.html in the browser
The RESET file removed the browser’s default styling.
The benefit of a reset file is that 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 07_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
In 07_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. 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.

11. 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.

12. 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

13. Continuing with CSS styling of the layout
Scroll back up into 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

14. 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

15. 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

16. 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

17. Continuing with CSS styling of the layout
Now, I’d like you to pay attention to the main area.
Nothing is styled. let’s go to the styles.css and copy all the styles that we’d written in the previous demo session and paste into the 07_instructor_layoutstart.html
h1 {
color: #e8662d;
font-size: 1.5em;
margin-bottom: 0.60em; }
body {
font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;
font-size: 100%;
p {
font-size: 0.875em;
h2 {
font-size: 1.25em;
ul {
ul li {
margin-top: 1em;
Command plus S to save and preview in the browser
Continuing with CSS styling of the layout

18. 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.
Explain the mainnav li (not there yet) and get them to write the rule for it first as follows –
#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; }
Pay attention to the style you just wrote for the mainnav li
Continuing with CSS styling of the layout

19. 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 write the following -
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="tshirts.html">T Shirts</a></li>
<li><a href="dyo.html">Design Your Own</a></li>
<li><a href="forum.html">Forum</a></li>
</ul>
Delete the Reset file Link tag for the styles.css file to show the styles
Continuing with CSS styling of the layout

20. This concludes lesson 7 tutorial
Assignments to complete for lesson 7 are –
Listen to the video tutorial
Read and follow the steps to complete the Lesson 7 project
You will be tested for the Review Qs on Schoology