Boost Fertility New Invention Ups Success Rates.pdf
Module11: Creating A External Style Sheet and Creating A Gallery
1. Module 11:Setting Up An External Style Sheet With A Gallery
Step 1:Using Google Images select 5 pictures which are the same size preferably less than 400pixels
on either side.
Step 2:Place these Images in a folder.
3.Start a new web page that includes the following code and include it in the folder. Save it as a HTML
file named practice.html.
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf8" />
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Test Font</p>
<hr>
<div id="redbox">
</div>
</body>
</html>
4.Using a notepad enter the following code. Save this page as mystyle.txt in the same folder.
body{width:1000px;
height:900px;
background-color:#efefef;}
p {font-family: georgia, serif; font-size:24px;}
hr {color: #000000; height: 20px }
#redbox{
width:300px;
2. height:300px;
background-color:green;
}
Step 5: Size your divs and page to accept the sizes of the images in your
gallery. Make space for a galllery in terms of width and height.
Step 6 :Add the following HTML code to the div you want the photo ton
show.Repeat the red text for each photo. Make sure your names are correct
and the image is saved in your web folder.
HTML :
<ul class="hoverbox">
<li>
<a href="1.jpg"><img src="1.jpg" alt="text" />
<img src="1.jpg" alt="text" class="preview" /></a>
</li>
Step 7: Add the following CSS to your external style sheet. You only need to
add it once.
CSS :
.hoverbox
{
cursor: default;