Layout

Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes flow between surrounding text. We can control how much space each box takes up by setting the width of the boxes (and sometimes the height, too). To separate boxes, we can use borders, margins, padding, and background colors.

Block-level elements start on a new line Examples include: <h1> <p> <ul> <li>. Inline elements flow in between surrounding text Examples include: .

CSS has the following positioning schemes that allow us to control the layout of a page: normal flow, relative positioning, and absolute positioning. We specify the positioning scheme using the position property in CSS. We can also float elements using the float property.

Liquid Layouts

Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages.

• Some important things about CSS Layout:

• The float property moves content to the left or right of the page and can be used to create multi-column layouts. (Floated items require a defined width).

• Designers keep pages within 960-1000 pixels wide, and indicate what the site is about within the top 600 pixels (to demonstrate its relevance without scrolling).

• Grids help create professional and flexible designs.

• CSS Frameworks provide rules for common tasks.

• We can include multiple CSS files in one page.