chcslonline.org Text –wrapping around Images

chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad document and save it as imagestyle.css in the css folder. We are going to be using the id selector with the name wrap. The float property is used to wrap a text around an image. It takes one of three values. Left, right and none. Write the following style on the imagestyle file. #wrap{ Float: right; Margin: 10px; } To get a space between the image and the text, we use the margin property. This gives a space around the entire image. If we want specific sides of the image to have a space, we use the margin-left, margin-right, margin-top, margin-bottom.

chcslonline.org To apply the style, go back to the products page and reference the style sheet in the head section. We can apply it to the img tag thus. Edit your img tag to look like the one below. If we want more than one image on the same page, with text floated around it, now to the opposite of the first image, since the first was floated right, then we float the second left. We set up another style in the style sheet, like this #wrapleft{ Float: left; Margin:10px; Clear: right; }

chcslonline.org The clear property is used to clear any floating element and it takes one of four Values Left, right, both and none. Because the first image was floated to the right, we clear the right. Now lets place a second image and apply the second style to it. <img src =“images/moon. jpg” alt =“peaceful moon” height = “500” width = “500”id =“wrapleft”>

chcslonline.org borders The border property are, Border-style: the value it takes are one of the following: dashed, dotted, double, groove, inset, none, ridge and solid Border-width: it takes values in pixels but can also take the value of thin, thick and medium Border-color: takes the same values of colors we learnt in previous lectures. Open your imagestyle.css file and add the following style #border{ Border-style: dotted; Border-width: medium; Border-color:rgb(255,0,0); } Try using this style for one of your p tags in the products folder.

chcslonline.org BACKGROUND The background of a page can be changed by setting up a style for the body element. To change the color of page, the background-color property is used. To use images as background of a page, we need to set up a style for the body with the background-image property. The background-image property takes its value thus Background-image: url(‘folder_name/file_name’); The default for background image is for it to be repeated and you’ll have your image repeated all over the page. To solve this, the background-repeat property With a value of no-repeat is used. It takes one of four values, repeat, repeat-x, repeat-y and no-repeat.