Help with CSS!!!

Hi everybody, this is my first post

I have made a PHP Script:

<?php

    define('QUERY_0', 'http://api.hostip.info/get_html.php?ip=');
    define('QUERY_1', 'http://www.google.com/ig/api?weather=');

function getWeather() {
    
   if (!empty($_SERVER['HTTP_CLIENT_IP']))
    {
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))
    {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    }
    else
    {
        $ip = $_SERVER['REMOTE_ADDR'];
    }

    $url0 = QUERY_0.$ip;
    $ch0 = curl_init();
    curl_setopt($ch0, CURLOPT_URL, $url0);
    curl_setopt($ch0, CURLOPT_HEADER, 0);
    curl_setopt($ch0, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch0, CURLOPT_FAILONERROR, TRUE);
    $geo = curl_exec($ch0);
    curl_close($ch0);
    if( preg_match('/City: (.*)\nIP:/', $geo, $matches) ){
        $results = $matches[1];
    }else{
        $results = 'getLocation failure';

    }

    $location = urlencode($results);
    $url1 = QUERY_1.$location;
    $ch1 = curl_init();
    curl_setopt($ch1, CURLOPT_URL, $url1);
    curl_setopt($ch1, CURLOPT_HEADER, 0);
    curl_setopt($ch1, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch1, CURLOPT_FAILONERROR, TRUE);
    $weather = curl_exec($ch1);
    curl_close($ch1);
    $xml = new SimplexmlElement($weather);
echo '<div id="weather">';
foreach($xml->weather as $item) {

        foreach($item->forecast_information as $new) {
            echo $new->city['data'];
            }

        foreach($item->current_conditions as $new) {

            echo '<div class="weatherIcon">';
            echo '<img src="http://www.google.com/' .$new->icon['data'] . '"/><br/>';
	    echo $new->condition['data'];
            echo $new->temp_f['data'];
            echo $new->temp_c['data'];
            echo $new->humidity['data'];
            echo $new->wind_condition['data'];
            echo '</div>';
            }

        foreach($item->forecast_conditions as $new) {

            echo '<div class="weatherIcon">';
            echo '<img src="http://www.google.com/' .$new->icon['data'] . '"/><br/>';
            echo $new->day_of_week['data'];
            echo $new->condition['data'];
            echo $new->low['data'];
            echo $new->high['data'];
            echo '</div>';
            }

    }

echo '</div>';
}

getWeather();

?>

PHP:

This script returns the output below:

<div id="weather">St John's, NL<div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/cloudy.gif"/><br/>Cloudy320Humidity: 87%Wind: W at 22 mph</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/rain_snow.gif"/><br/>TueRain and Snow3032</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/snow.gif"/><br/>WedSnow Showers3235</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/rain_snow.gif"/><br/>ThuRain and Snow3035</div><div class="weatherIcon"><img src="http://www.google.com//ig/images/weather/snow.gif"/><br/>FriSnow Showers2932</div></div>

HTML:

This is what it looks like:

hxxp://img268.imageshack.us/img268/4711/weathermockup.png

Code (markup):

and here is what the actual XML looks like:

<xml_api_reply version="1">
−
<weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
−
<forecast_information>
<city data="St John's, NL"/>
<postal_code data="ST. JOHN'S, NL"/>
<latitude_e6 data=""/>
<longitude_e6 data=""/>
<forecast_date data="2010-02-16"/>
<current_date_time data="2010-02-16 23:26:51 +0000"/>
<unit_system data="US"/>
</forecast_information>
−
<current_conditions>
<condition data="Cloudy"/>
<temp_f data="32"/>
<temp_c data="0"/>
<humidity data="Humidity: 87%"/>
<icon data="/ig/images/weather/cloudy.gif"/>
<wind_condition data="Wind: NW at 18 mph"/>
</current_conditions>
−
<forecast_conditions>
<day_of_week data="Tue"/>
<low data="30"/>
<high data="32"/>
<icon data="/ig/images/weather/rain_snow.gif"/>
<condition data="Rain and Snow"/>
</forecast_conditions>
−
<forecast_conditions>
<day_of_week data="Wed"/>
<low data="32"/>
<high data="35"/>
<icon data="/ig/images/weather/snow.gif"/>
<condition data="Snow Showers"/>
</forecast_conditions>
−
<forecast_conditions>
<day_of_week data="Thu"/>
<low data="30"/>
<high data="35"/>
<icon data="/ig/images/weather/rain_snow.gif"/>
<condition data="Rain and Snow"/>
</forecast_conditions>
−
<forecast_conditions>
<day_of_week data="Fri"/>
<low data="29"/>
<high data="32"/>
<icon data="/ig/images/weather/snow.gif"/>
<condition data="Snow Showers"/>
</forecast_conditions>
</weather>
</xml_api_reply>

Code (markup):

What I'm trying to achieve is pictured ^above^. I figure CSS is the best way to go about it but I don't know much about CSS. I'm kind of a noob to web design. Any examples would be greatly appreciated. I hope you all find this script useful