1. CSS provides advantages over using tables for page layout such as creating liquid layouts that adapt to screen size and separating content from presentation. 2. When beginning a CSS layout, content and presentation should be separated, pages should be tested across browsers, and fixed, fluid, or hybrid layouts can be chosen. 3. Elements have box properties of content, padding, border, and margin that can be controlled with CSS, and positioning elements allows control of alignment.

1. LAYOUT WITH STYLES
HTML5 & CSS Visual Quickstart Guide
Chapter 11

2. A Bit of History
• The ―old‖ way of page layout was using tables
• CSS provides a new way, with several advantages:
• Good for creating liquid layouts that can expand or shrink
depending on the size of your visitor’s monitor
• Keeping content separate from layout means you can easily apply
the same layout to multiple pages
• CSS + HTML combination tends to produce smaller file sizes
• Since CSS and HTML are current standards, pages that adhere to
their rules are guaranteed to be supported in future browsers

3. Considerations When Beginning a Layout
• Always separate your content (HTML) and presentation
(CSS)
• Think about different browsers
• Not everyone uses the same browser, operating system, or even
device
• Test your pages on a range of browsers before going live
• As you continue developing, keep testing pages in a few browsers
so you’ll have fewer issues to address at the end of development

4. Considerations, Part 2
• Decide on a type of layout
• Fixed layout has pixel-based widths
• Fluid layout uses percentages, allowing page to shrink and expand
• An elastic layout uses ems for width and other property sizes, so
page scales according to user’s font-size settings
• No single layout is right for every circumstance
• There are even hybrid approaches to layout!
• We will make a hybrid of a fluid and fixed layout
• Columns are fluid, with percentage-based widths so they grow & shrink
• Overall page width has a fixed maximum width

5. Structuring Your Pages
• Divide your page into logical sections.
• masthead, main, sidebar, footer, etc. Use divs only when no other
semantic element seems appropriate
• Put your content in an order that would be most useful if
not using CSS
• This allows browsers that don’t support CSS, such as many mobile
browsers, to display the content before less important elements,
like a header
• Use heading elements (h1, h2, etc.) consistently to
identify and prioritize information
• Use comments to identify different areas of your page and
their contents. It’s even a good idea to comment closing
</div> tags to keep them straight.

6. The Box Model
• Every element in your Web page is enclosed in an
invisible box
• Each box has 4 important properties:
• The content area
• The padding
• The border
• The margin
• Each property can be controlled using CSS.

7. Padding & Margins: What’s the
Difference?

8. Changing the Background
• Refers not to the background of the entire page, but to the
background of a particular element
• You can change the background of any element—images,
form elements, tables, and even the body itself
• background-image, background-repeat, background-
attachment, background-position, background-color
• Or just use background to change multiple background
properties at once

9. Setting the Height or Width for an Element
• width: w, where w is the width of the element’s content
area
• height: h, where h is the height of the element’s content
area
• If not set, defaults to auto
• auto value for width is calculated from width of the containing box
minus the padding, borders, and margins
• auto value for height is calculated based on the length of the
content

10. Setting the Margins around an Element
• Type margin: x, where x is the amount of desired space to
be added
• Can specify as a length, percentage, or auto
• #wrap {margin: 20px auto;}
• Would set the top and bottom margins to 20px, and automatic
margins for left and right
• If you use one value for margin, that value is applied to all four
sides equally
• Can add –top, -bottom, -left, -right to the margin property
to adjust the margin for a particular side. For example:
• margin-top: 10px

11. Adding Padding around an Element
• Type padding: x, where x is the amount of desired
padding.
• As with margins, value can be specified in units or as a
percentage
• If you use 1 value, applies to all
• 2 values, first applies to top/bottom, second to left/right
• 3 values: 1st applies to top, 2nd applies to left/right, 3rd
applies to bottom
• 4 values: top, right, bottom, and left (clockwise)
• padding: 10px
• padding: 10px 20px
• padding: 10px 20px 15px
• padding: 5px 10px 15px 10px

12. Making Elements Float
• You can make elements float, such as when you want text
to wrap around images or figures
• When you float an element to a side, content that would
normally display after it flows around it instead
• Do this using float property
• float: left;
• would cause the element to float to the left, and the rest of the page
after that element to flow to the right of the element
• The direction you choose applies to the element you’re floating, not to
the elements that flow around it

13. Controlling Where Elements Float
• You often need to control which elements an element can
float next to and which it cannot
• To keep an element from floating next to something you
don’t want it to, use the clear property
• clear: both;
• will clear floating on both sides

14. Setting the Border
• You can create a border around or on individual sides of
an element
• Can set the thickness, style, and color of the border
• border-style: type (none, dotted, dashed, solid, double,
groove, ridge, inset, or outset)
• border-width
• border-color
• border: 1px solid green;
• border-right: 2px dashed green;
• (also border-top, border-bottom, border-left)

15. Offsetting Elements in the Natural Flow
• Each element has a natural location in a page’s flow
• Moving the element with respect to this original location is
called relative positioning
• Surrounding elements are totally unaffected
• Use position: relative; top: -1.1em (for example)
• To see this in action, look at Figure 11.25 and Figure
11.26 on page 178

16. Positioning Elements Absolutely
• Natural flow of the page is top to bottom, left to right
• So, if the img tag comes before the p, the image appears
before the paragraph
• You can take elements out of the normal flow by
specifying their precise position with respect to the
nearest positioned ancestor or to the body.
• For example:
• .photo {position: absolute; left: -112px; top: 3px;}

17. Positioning Elements in 3D
• Once you start using relative, absolute, or fixed
positioning, it’s easy to get yourself in a situation where
elements are overlapping
• CSS allows you to choose which element should display
on top, using z-index property
• The higher the z-index value, the higher up the element
will be in the stack (the closer to the top)
• Property only applies to elements positioned as absolute,
relative, or fixed

18. Determining How to Treat Overflow
• Sometimes, elements will spill out of their ―boxes‖
• The container might not be big enough
• You might have positioned the content outside of the box, using:
• negative margins
• absolute positioning
• When this happens, you may need to control the area
outside the element’s box

19. The overflow Property
• The overflow property allows this control
• overflow: visible expands the box (default)
• overflow: hidden hides content that doesn’t fit in the box
• overflow: scroll adds scroll bars to the element
• overflow: auto adds scroll bars only when necessary
• The overflow property can also be used to stop floats

20. Aligning Elements Vertically
• By default, elements (such as images) align to the bottom
of the line
• The vertical-align property overrides this default
• Important notes:
• The vertical-align property will only work on elements displayed
inline, not elements displayed as a block

21. Possible Values of vertical-align
• baseline: align element’s baseline with parent’s baseline
• middle: aligns the middle of the element with the middle of the
parent
• sub: positions the element as a subscript of the parent
• super: positions the element as a superscript of the parent
• text-top: aligns the top of the element with the top of the parent
• text-bottom: aligns the top of the element with the top of the
parent
• top: aligns the top of the element with the top of the tallest
element on the line
• bottom: aligns the bottom of the element to the bottom of the
lowest element on the line
• Or, type a percentage of the line height of the element, which
may be positive or negative

22. Changing the Cursor
• Browsers change cursor shape based on what visitor is
pointing at
• Usually an arrow
• Pointing finger to highlight links
• ―I‖ shaped cursor for text input
• Etc.
• CSS allows you control over this using cursor property
• For example, changing the pointer to not indicate a link for
navigation button to current page

23. Possible Values of cursor
• cursor: pointer for links
• cursor: default for an arrow
• cursor: crosshair
• cursor: move
• cursor: wait
• cursor: help
• cursor: text
• cursor: progress
• cursor: auto
• cursor: x-resize

24. Displaying and Hiding Elements
• display property overrides element’s natural display type
• Change from inline to block or vice versa
• Can also prevent an element and its content from
occupying visual space in the page
• Values:
• inline
• block
• inline-block allows element to appear on same line as other
content, but otherwise behaves like block-level element
• none

25. The visibility Property
• Primary purpose is to control whether an element is
visible
• When you hide an element with visibility, a blank space
shows where the element and its content would otherwise
appear