HOW TO STRUCTURE LAYOUT & LINK PAGES

There are basically four methods:

1. WATER (no CSS - content fills screen - no controls)
2. FLOAT (using CSS with float left, and width persentages to organize layout)
3. GRID (new CSS - verticle columns of equal width)
4. FLEXBOX (new CSS - verticle columns of unequal widths)

MORE ABOUT THE FLOAT TECHNIQUE

You can structure pages using the following CSS...

Divs - Divisions (think of them like boxes). These boxes or sections, that can have their own formatting.

Width - Adjusts the width of elements on the page.

Float - Specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

About Positioning of Divs

Static - Basic default.

Fixed - Prevents element from moving or scrolling.

Absolute - Allows you to place elements exactly where you want them by using the positioning attributes top, left, bottom, and right to set the location.

Relative – relative to its place in the code.

3 DIFFERENT WAYS TO CODE CSS

Make a CSS style sheet sheet and attach it. Put CSS in head portion of HTML code. Place it in line <style=______> X, Y, Z

X-axis: Horizontal axis of the page.

Y-axis: Vertical axis of the page.

Z-index: Allows objects to move forward (up) or backward (down) on the page, like an elevator. The lower the number, the further back it will be from the screen, and the higher the number, the closer it will be to the screen. An X,Y-axis of 0,0 would start at the top right of the page.

tags

<header>

<nav>

<main>

<article>

<section>

<footer>

<aside>