Today’s goals (continued from yesterday):

• Begin learning how to create a page layout with CSS
• Create div areas in CSS and apply them in HTML
• Experiment with absolute, relative, static, and fixed positioning

 Today’s featured websites:

• http://jenniferdewalt.com/building_blocks.html
• Let’s put together a page layout using some of these blocks
• Let’s use this cool tool to check out the CSS of any site you want!

 Using CSS to create a layout for your webpage

• IDs Preceded by # on style sheet. Used to identify one element and generally used to identify specific sections of a webpage (ex. menu, header, sidebar)
• In the body section of your webpage, you use div tags to refer to IDs you created in your style sheet. For example, div id=”wrapper” or div id=”menu”
• Divs: Divs are specific areas of a webpage contain your content (text, images, links, etc.). They are referred to as divs (div id=”something”) in your HTML. They can be positioned with specific properties and can overlap. They can also have classes applied to them.
• Positioning divs on a webpage: Divs can overlap and are positioned either from the top left corner of the webpage (absolute) or in relation to their usual positions on the page (relative). Divs can also have a fixed position, which means they don’t move as you scroll along the page and stay in the same place. It is possible to put one div inside another and position them differently. Top, right, left, and bottom values are used to tell the browser where the div should be positioned on the page. The values can either be in pixels or as a percentage, which are relative to the parent element’s dimensions (example, a webpage that’s 900 pixels wide or a table that’s 500 pixels wide).
• Let’s continue to practice with the webpage we started yesterday
• CodeShare