Creating Layouts Using CSS. Lesson 9

Size: px

Start display at page:

Download "Creating Layouts Using CSS. Lesson 9"

David Kelley
6 years ago
Views:

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 2

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. 3

4 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) 5

6 6 The CSS Box Model

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

8 8 The CSS box model individual sides

9 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;} 10

11 11 Shorthand notation for the margin property

12 12 Using the margin property

13 Specifying the Individual Margin Properties Sets the individual margin properties p {margin-left: 2em; margin-right:2em;} 13

14 Using the individual margin properties Using the individual margin properties 14

15 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 16 A <p> element with negative left margins

17 17 An <h1> element with negative bottom margin

18 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

19 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 20 Shorthand notation for the padding property

21 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 22 Using the individual padding properties

23 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 24 Border properties

25 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

26 Specifying Border Style (continued) p {border-color: red; borderwidth: 1px; border-style: solid;} 26

27 27 Different border styles

28 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 29 Shorthand notation for the border-style property

30 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 31 Different border widths

32 32 Shorthand notation for the border-width property

33 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

34 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 35 Shorthand notation for the border-color property

36 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

37 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

38 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

39 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 39

40 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 40

41 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 41

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

43 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; }

44 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 44

45 45 Normal text flow around a floating image

46 46 Using the clear property

47 CSS Positioning

48 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

49 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 50 Block-level element normal flow

51 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 51

52 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

53 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

54 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 54

55 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

56 CSS Page Layouts 56

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

58 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

59 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

60 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 60

Module 2 (VII): CSS [Part 4]

INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals