Introduction to CSS Layout Lesson 7

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 -

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

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

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

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

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.

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

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

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.

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.

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

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

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

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

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

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

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

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

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