INTRODUCTORY Tutorial 4 Exploring Graphic Elements and Images

XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Wrap text around an image Use an image as a horizontal rule Format the default horizontal rule Use the tag Investigate the box model Explore the padding, margin, and border properties

XP Objectives Float an image or text Use the clear property Change the list style type and position Use an image in a bulleted list Format and float headings Create definition lists Work with background properties New Perspectives on Blended HTML, XHTML, and CSS3

XP Including Images, Borders, and Text on Web Pages Guidelines for using images – Add extra space around images so the text doesn’t crowd them – Use light, simple backgrounds that don’t interfere with the text – Add space between text and borders to avoid clutter – Put graphics and text side by side to minimize scrolling New Perspectives on Blended HTML, XHTML, and CSS4

XP Inserting an Image New Perspectives on Blended HTML, XHTML, and CSS5

XP Enhancing the Appearance of Horizontal Rules New Perspectives on Blended HTML, XHTML, and CSS6

XP Setting Horizontal Rule Properties To specify the format of a horizontal rule, enter the following code where you want the rule to appear: Use the following properties to set the appearance of the rule: width: Use to set the width in pixels or as a percentage value of the screen width. Percentages are preferred text-align: Use to align the rule left, center, or right. Center is the default value height: Use to set the height (the thickness) of the rule in pixels. The default value is 2px color: Use to change the color of the rule. Use named values, RGB values, or hex values New Perspectives on Blended HTML, XHTML, and CSS7

XP Setting Horizontal Rule Properties New Perspectives on Blended HTML, XHTML, and CSS8

XP Setting Horizontal Rule Properties New Perspectives on Blended HTML, XHTML, and CSS9

XP Using the Box Model New Perspectives on Blended HTML, XHTML, and CSS10

XP Using the Padding Properties While the margin property controls white space outside an element, the padding property controls white space inside an element When you create an element with a background color, letters that have ascenders (such as the letter d) or descenders (such as the letter g) might be clipped New Perspectives on Blended HTML, XHTML, and CSS11

XP Using the Margin Properties The margin property is often used with images to create white space on one or more sides of an image New Perspectives on Blended HTML, XHTML, and CSS12

XP Using the Border Properties You use the border properties to draw a border around any block-level element, such as headings, blockquotes, or paragraphs To create a style using the border shortcut property, use the style: border: color style thickness; where color is a named color, RGB triplet, or hexadecimal value, style is solid, double, dotted, dashed, groove, ridge, inset, outset, or none, and thickness is thin, medium, or thick New Perspectives on Blended HTML, XHTML, and CSS13

XP Using the Border Properties New Perspectives on Blended HTML, XHTML, and CSS14

XP Using the Border Properties New Perspectives on Blended HTML, XHTML, and CSS15

XP Using the Border Properties New Perspectives on Blended HTML, XHTML, and CSS16

XP Positioning Images New Perspectives on Blended HTML, XHTML, and CSS17

XP Using the float Property If you want to wrap text around an image, use the float property with a value of left or right New Perspectives on Blended HTML, XHTML, and CSS18

XP Using the float Property New Perspectives on Blended HTML, XHTML, and CSS19

XP Using the Clear Property To create a style to clear an element, use the property: clear: value; where value is left, right, or both New Perspectives on Blended HTML, XHTML, and CSS20

XP Setting List Properties To specify the format of a list, enter the following code where you want the list to appear: ul { or ol { list-style-property: value; Use the following properties to set the appearance of the list: list-style-type: Use this to change the bullet type, the numbering, or the lettering for a list. Values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none list-style-image: Use this to insert an image instead of one of the list style types. Specify a value in the format url(imagename) New Perspectives on Blended HTML, XHTML, and CSS21

XP Setting List Properties list-style-position: Use this to position the bullet either inside or outside the indented text for the list item. Values are inside or outside (the default) list-style: This is the shortcut property that specifies the type, the image, and the position; list the values for each property in that order vertical-align (for images): If necessary, use the vertical- align property to align a liststyle- image with the list item text. Values are top, middle, and bottom New Perspectives on Blended HTML, XHTML, and CSS22

XP Using the list-style-type Property You use the list-style-type property to change the appearance of the default solid bullet for unordered lists New Perspectives on Blended HTML, XHTML, and CSS23

XP Applying the list-style-image Property You use the list-style-image property to change the bullet to a graphic image The list-style property is the shortcut property for list styles The vertical-align property can be used to position an element, such as an image, vertically with text – Top – Middle – Bottom New Perspectives on Blended HTML, XHTML, and CSS24

XP Applying the list-style-image Property New Perspectives on Blended HTML, XHTML, and CSS25

XP Working with Definition Lists To create a definition list, use the following syntax: defined term1 definition1 defined term2 definition2 where defined term is the word or phrase to be defined and definition is the definition of the term New Perspectives on Blended HTML, XHTML, and CSS26

XP List-style Properties New Perspectives on Blended HTML, XHTML, and CSS27

XP Setting Background Properties To specify the appearance of a background, enter the following code: body { background-property: value; } Use the following properties to set the appearance of the background: background-image: Use this to place an image behind the contents of an element. The image can be any.gif or jpg image, but the syntax must be similar to this: url(imagename.gif). background-position: Use this to position an image on the page without the need for tables or frames. Use keywords or percentage values New Perspectives on Blended HTML, XHTML, and CSS28

XP Setting Background Properties background-repeat: Use this to repeat an image horizontally, vertically, or to fill the entire screen. When using the default value, repeat, (the image is repeated to the right and down the page to fill the entire window with copies of the same image). Other values are repeat-x (the image is repeated horizontally across the window), repeat-y (the image is repeated vertically down the window), no-repeat (the image is not repeated), and background-attachment (determines whether an image scrolls with the insertion point) background: This is the shortcut property used to change all of the background properties. Properties and values must be listed in a set order New Perspectives on Blended HTML, XHTML, and CSS29

XP Setting Background Properties New Perspectives on Blended HTML, XHTML, and CSS30

XP Setting Background Properties New Perspectives on Blended HTML, XHTML, and CSS31