Ch. 15: CSS Layout

CSS treats each HTML element as if it is in its own box. This box will either be a block-level or inline box. If one block-level element sits inside another block-level element, then the outer box is known as the containing or parent element.

Pages can be fixed width or liquid (stretchy) layouts

Fixed Width Layout

Fixed width layout designs do not change size as the user increases or decreates the size of their browser



Liquid Layouts

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



Adding Multiple Stylesheets

You can include multiple CSS files in one page. Some web page authors split up their CSS style rules into separate style sheets. They might use one style sheet to control the layout and another to control fonts, colors and so on. Some create separate stylesheets to control typography, layout, forms, tables and different styles for each sub-section of a site.

Two ways to add multiple style sheets to a page

  1. Link HTML to one stylesheet and use the @import rules to import other styles (use before other rules)
  2. Use a separate element to add a second stylesheet in the HTML

Key Concepts