Creating Layouts Using CSS Lesson 9
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 2
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. 3
4 Box Properties
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) 5
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
Using the Margin Properties Specifying Margins Shorthand property that sets all four individual margins with one declaration p {margin: 2em;} 10
11 Shorthand notation for the margin property
12 Using the margin property
Specifying the Individual Margin Properties Sets the individual margin properties p {margin-left: 2em; margin-right:2em;} 13
Using the individual margin properties 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
16 A <p> element with negative left margins
17 An <h1> element with negative bottom margin
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
20 Shorthand notation for the padding property
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; border-top: solid thin black; border-bottom: solid thin black; background-color: #ffffff;} 21
22 Using the individual padding properties
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
24 Border properties
Specifying 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
Specifying Border Style (continued) p {border-color: red; borderwidth: 1px; border-style: solid;} 26
27 Different border styles
Individual Border Styles Can be specified with the following border-style properties: border-left-style border-right-style border-top-style border-bottom-style 28
29 Shorthand notation for the border-style property
Specifying 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 p {border-color: red; border-width: 1px; border-style: solid;} 30
31 Different border widths
32 Shorthand notation for the border-width property
Individual Border Widths Can be specified with the following border-width properties: border-left-width border-right-width border-top-width border-bottom-width 33
Specifying 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;} 34
35 Shorthand notation for the border-color property
Specifying Individual Border Can be specified with the following border-color properties: border-left-color border-right-color border-top-color border-bottom-color 36
Using the Border Shorthand Properties The border property lets you state the properties for all four borders of an element You can state the border-width, border-style, and border-color in any order The following rule sets the border-style to solid The border-weight is 1 pixel; the border color is red p {border: solid 1px red;} 37
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 38
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 http://reference.sitepoint.com/css/width/demo 39
Height Sets the vertical height of an element Like width, height is not intended for normal blocklevel elements, but you can use it to create floating text div {height: 150px;} CSS Live Demo: height http://reference.sitepoint.com/css/height/demo 40
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 http://reference.sitepoint.com/css/float/demo 41
.floatbox {width: 125px; height: 200px; float: left; background-color:#cccccc;} 42
43 h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:arial,sans-serif; }.floatimage {float:right; margin: 0 0 5px 5px; border: solid; }
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 http://reference.sitepoint.com/css/clear/demo 44
45 Normal text flow around a floating image
46 Using the clear property
CSS Positioning
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 48
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 49
50 Block-level element normal flow
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 http://reference.sitepoint.com/css/position/demo 51
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; } 52
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 53
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 http://reference.sitepoint.com/css/z-index/demo 54
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 55
CSS Page Layouts 56
CSS Page Layout Example Except for the image logo, all elements on this page follow normal flow 57
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; 58
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; 59 display:block; } Two Column Page Layout
CSS Page Layout Resources For additional study: http://glish.com/css/ Large collection of CSS page layouts and links to tutorials http://www.websitetips.com/css/index.shtml Comprehensive list of tutorials and CSS-related sites http://www.meyerweb.com/eric/css/ The web site of Eric Meyer, a leading-edge web developer http://www.w3.org/style/css/learning W3C s list of CSS resources http://www.bluerobot.com/web/layouts/ A reservoir of CSS page layouts http://www.blooberry.com/indexdot/css/ CSS syntax reference list 60