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>
any name can be used for a class or ID <div> (division) tag.
COMMON
float:
width:
height:
background:
padding: (Padding pushes in)
margin: (Margin marches out)
BOARDER: (this applies to all four sides)
border-top: 5px solid red;
border-left: 24px solid blue;
border-right: 10px solid blue;
border-bottom: 10px solid blue;
max-width:
max-height:
display:
pseudo-classes:
opacity:
flex:
UNCOMMON
Rounded Corners
(not approved by World Wide Web Consortium yet, but approved by browsers. So we have to use different code for the browsers)
Approach 1:
All corners the same border-radius: 10px; /* future proofing */ -moz-border-radius: 10px; -webkit-border-radius: 10px;
Approach 2:
Corners different border-radius: 10px 20px 30px 0; /* future proofing */ -moz-border-radius: 10px 20px 30px 0; -webkit-border-radius: 10px 20px 30px 0;
opacity:
Rare
position:
z-index:
outline: