set zoom and infowindows style in Google Maps

I'm trying to insert a google maps script with multiple markers and infowindows in my project. What I want to do is: -set a style css for infowindows (border, background-color, width, height, etc...) -move the closing button of the infowindows outside the infowindows (like in position relative) -set an automatic zoom to show clearly markers and infowindows
This is my code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 

    var map = new google.maps.Map(document.getElementById("map"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true
    });
    var markers = [
      { lat: 11.111111, lng: 11.111111, name: "<hgroup><h1>Title</h1><h2>Address</h2></hgroup>" },
      { lat: 22.222222, lng: 22.222222, name: "<hgroup><h1>Title</h1><h2>Address</h2></hgroup>" }
    ];
    for (index in markers) addMarker(markers[index]);
    function addMarker(data) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.name
      });
      var content = document.createElement("div");
      var title = document.createElement("div");
      title.innerHTML = data.name;
      content.appendChild(title);
      var infowindow = new google.maps.InfoWindow({
        content: content
      });
      infowindow.open(map, marker);
      google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
      });
    }
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
      var data = markers[index];
      bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    map.fitBounds(bounds);
  }
</script>

Could you explain step by step how to do what I want? I don't know Javascript, this code is a copy/paste edited by me, so I ask you to be clear and simple! Thank you!