Question

I am using one template to build my web site. I want to add some pictures on a page that are enlarged and opened in a new window when user clicks them.

I have found some pieces of code by search but real problem I am facing is that this template is build using CSS of which I have very less exposure. Those pieces of code required putting code in body of HTML that I am not able to do here using this template.

Here is style sheet I am using & made all pages using it. How do I add few pictures to a page like when they are clicked, are enlarged in a new window.

* {
    margin: 0;
    padding: 0;
}
a:link {
color: #506F09;
}
body {
background: url(images/backgr.jpg) top left no-repeat #2D2E2B;
}
#tot{
position:relative;
overflow:hidden;
z-index:0;
}
#antet{
background:#2D2E2B;
height:100px;
border-bottom:#F7FDE1 solid 7px;
margin-left: 157px;
}
.butonas1{
background:url(images/butonas3.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas1 a:link{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:visited{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:hover{
text-decoration:none;
color:#2D2E2B;
}
.butonas2{
background:url(images/butonas1.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:#F7FDE1;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas2 a:link{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:visited{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:hover{
background:url(images/butonas3.png) left top no-repeat;
text-decoration:none;
height:62px;
width:125px;
position:absolute;
top:0;
left:0;
color:#2D2E2B;
}
#logo_sus{
background:url(images/logo1.png) left no-repeat;
height:178px;
width:171px;
position:absolute;
left:274px;
top:60px;
}
#bara {
position:relative;
height:62px;
}
#container{
width:408px;
background:url(images/sus.jpg) top center no-repeat #F7FDE1;
float:left;
margin-left:470px;
display:inline;
z-index:1;
}
#jos {
background:url(images/jos.jpg) no-repeat bottom center;
width:408px;
height:30px;
z-index:1;
 }
.text{
width:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
margin:30px 12px;
} 
.titlu {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
.titlu2 {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
padding-left:170px;
padding-top:20px;
}
.clear{
height:1px;
clear:both;
}
#bottom {
background:url(images/bara.jpg) bottom left no-repeat;
height:30px;
width:556px;
float:left;
margin-left:340px;
margin-top:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#F7FDE1;
text-align:right;
display:inline;
z-index:1;
}
#bottom span{
padding-right:25px;
}
#jos2 {
background:url(images/jos2.jpg) no-repeat bottom center;
width:563px;
height:53px;
z-index:1;
 }

Answer 1

How do I add few pictures to a page like when they are clicked, are enlarged in a new window.

You do not need CSS to achieve that. Just add an anchor around the image in your markup:

<a href="/images/image1_large.jpg" title="Open picture in new window" target="_blank">
  <img src="/images/image1_small.jpg" alt="Image 1" />
</a>

But if you like a STRICT doctype, or if you trust your readers on using the therefore designed browser features, I would recommend to open the image in the same window; the user can always override that with middle- or right mouseclick:

<a href="/images/image1_large.jpg" title="Open picture in this window">
  <img src="/images/image1_small.jpg" alt="Image 1" />
</a>

And to open a link in a popup window, you need to call the JavaScript window.open(); routine, as explained e.g. on this page.