1. Creating Layouts Using CSS
Lesson 9

2. CSS Page Layout Advantages
Greater typography control
Style is separate from structure
Potentially smaller documents
Easier site maintenance
Increased page layout control
Increased accessibility
Ability to define styles for multiple media types
Support of the Semantic Web

3. CSS Page Layout Disadvantages
There still remain issues with the lack of uniform browser support of CSS
If you are already adept at designing page layout using XHTML tables, your productivity will temporarily drop as you learn to configure page layout with CSS.

4. Box Properties

5. Using the CSS Box Model
Describes the rectangular boxes that contain content on a Web page
Each block-level element created is displayed as a box containing content in the browser window
Each content box can have margins, borders, and padding (specified individually)

6. The CSS Box Model

7. The CSS box model areas in a <p> tag

8. The CSS box model individual sides

9. The CSS box model individual sides in a <p> element

10. Using the Margin Properties
Specifying Margins
Shorthand property that sets all four individual margins with one declaration
p {margin: 2em;}

11. Using the margin property

12. Specifying the Individual Margin Properties
Sets the individual margin properties
p {margin-left: 2em;
margin-right:2em;
margin-top:2em;
margin-bottom:2em}

13. Using the individual margin properties

14. Negative Margins
Negative margins can be set to achieve special effects
Example:
Override the default browser margin by setting a negative value
p {margin-left: -10px;}
Can also be used to remove the default margins from other elements

15. A <p> element with negative left margins

16. An <h1> element with negative bottom margin

17. Using the Padding Properties
Control the padding area in the box model
Area between the element content and the border
Padding area inherits the background color of the element
If a border is added to an element, padding should be adjusted to increase legibility and enhance the presentation

18. Specifying Padding
Shorthand property that sets all four individual padding values with one rule
The most common usage of the padding property is to state one value for all four padding sides, as shown in the following style rule:
p {padding: 2em;}

19. Shorthand notation for the padding property

20. Specifying the Individual Padding Properties
Controls the individual padding areas
The following style sets the top and bottom padding areas for the paragraph, along with complementing borders and a white background:
p {padding-top: 2em;
padding-bottom: 2em;
padding-left: 2em;
padding-right: 2em; }

21. Using the individual padding properties

22. Using the Border Properties
Control the appearance of borders around elements
Area between the margin and the padding
There are five basic border properties:
border
border-left
border-right
border-top
border-bottom

23. border-style Border style keywords:
none — no border on the element (default)
dotted — dotted border
dashed — dashed border
solid — solid line border
double — double line border
groove — 3-D embossed border
ridge — 3-D outward extended border
inset — 3-D inset border (entire box)
outset — 3-D outset (entire box)

25. Individual Border Styles
Can be specified with the following border-style properties:
border-left-style
border-right-style
border-top-style
border-bottom-style

26. border-width
Allows setting border width with either a keyword or a length value
You can use the following keywords to express width:
thin
medium (default)
Thick

27. Individual Border Widths
Can be specified with the following border-width properties:
border-left-width
border-right-width
border-top-width
border-bottom-width

29. border-color
Allows setting of element border color
To set a border color, use the property as shown in the following rule:
p {border-color: red; border-width: 1px; border-style: solid;}

30. Specifying Individual Border Colors
Can be specified with the following border-color properties:
border-left-color
border-right-color
border-top-color
border-bottom-color

31. Using Box Properties
Allow floating of images or boxes to the left or right of content on the page
Special box properties:
width
height
float
clear

32. Width Sets the horizontal width of an element
Width is not intended for normal block-level elements, but you can use it to create floating text boxes or with images
div {width: 200px;}
CSS Live Demo: width

33. Height CSS Live Demo: height Sets the vertical height of an element
Like width, height is not intended for normal block- level elements, but you can use it to create floating text
div {height: 150px;}
CSS Live Demo: height

34. Float CSS Live Demo: float
Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property.
Advantage: tables aren’t required, just a single simple CSS style rule is all that is required
It is commonly used with the <img> element allowing alignment of an image to the left or right of text
CSS Live Demo: float

35. .floatbox {width: 125px;
height: 200px;
float: left;
background-color:#cccccc;}

36. h1 { background-color:#cccccc;
padding:5px;
color: #000000; }
p { font-family:Arial,sans-serif;
.floatimage {float:right;
margin: 0 0 5px 5px;
border: solid;

37. Clear CSS Live Demo: clear
Controls the flow of text around floated elements
You only use the clear property when you are using the float property
Clear lets you force text to appear beneath a floated element, rather than next to it
<h2 style=”clear: left;”>
CSS Live Demo: clear

38. Normal text flow around a floating image

39. Using the clear property

40. CSS Positioning

41. Positioning Elements
The CSS positioning properties give you control over the way element boxes are laid out in a Web page
You can control the positioning of the elements and remove them from the normal flow of elements on the page
You can also build pages that have elements positioned at different places in a Web page without using tables

42. Understanding the Normal Flow of Elements
The browser lays out element boxes from top to bottom and left to right until all elements that comprise the Web page have been displayed
In the normal flow for block-level elements, boxes are laid out vertically one after the other
Each box’s left edge touches the left edge of the containing element unless the box is floated or the layout model is right to left

43. Block-level element normal flow

44. Using the Positioning Properties
When you use absolute positioning, the element is displayed in the exact position you specify
When you use relative positioning, you are shifting the element’s position from the point where that element normally would be displayed
CSS Live Demo: position

45. Precisely specifies the location of an element in the browser window
h1 { background-color:#cccccc;
padding:5px;
color: #000000; }
#content {position: absolute;
left:200;
top:100;
font-family:Arial,sans-serif;
width:300;
Precisely specifies the location of an element in the browser window

46. h1 { background-color:#cccccc;
padding:5px;
color: #000000; }
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
Changes the location of an element in relation to where it would otherwise appear

47. Z-Index Property
Modifies the stacking order of elements on a Web page.
The default z-index value is “0".
Elements with higher z- index values will appear stacked on top of elements with lower z-index values rendered on the same area of the page.
CSS Live Demo: z-index

48. CSS Page Layouts
Designers typically use layouts that include one or more of the following design components:
a horizontal banner, or bar, at the top of the page that usually includes a corporate logo
a sidebar, which is a narrow vertical column commonly used for links
the main document window, which is the largest window and contains most of the page content
a footer, which is a row at the bottom of the page, which usually displays the contact information for the Web site, such as the address

49. CSS Page Layouts

50. CSS Page Layout Example
Except for the image logo, all elements on this page follow normal flow

51. Two Column Page Layout
wrapper contains the two columns – sets default background color
leftcolumn navigation
float: left;
width:100px;
rightcolumn content
margin-left: 100px;
floatright (flower photo)
float: right;

52. Two Column Page Layout body {margin:0;
font-family:Verdana, Arial, sans-serif; }
#wrapper { background-color:#e8b9e8;
color:#000066; }
#leftcolumn { float:left;
width:100px; }
#rightcolumn { margin-left:100px;
background-color:#ffffff;
color:#000000; }
#logo { background-color:#eeeeee;
color: #cc66cc;
font-size:x-large;
border-bottom: 1px solid #000000;
padding:10px; }
.content {padding:20px 20px 0 20px; }
#floatright {margin:10px;
float:right; }
.footer {font-size:xx-small;
text-align:center;
clear:right;
padding-bottom:20px; }
.navBar{ text-decoration:none;
margin: 15px;
display:block; }
Two Column Page Layout

53. CSS Page Layout Resources
For additional study:
Large collection of CSS page layouts and links to tutorials
Comprehensive list of tutorials and CSS-related sites
The web site of Eric Meyer, a leading-edge web developer
W3C’s list of CSS resources
A “reservoir” of CSS page layouts
CSS syntax reference list