GeoSearch CSS Tutorial

Basic CSS

style Tag

The first thing we need to do to start playing around with CSS in GeoSearch is to learn how to define a "style" section in our html page.

A style tag is formed just like any other HTML tag. Since we will be adding CSS info, we will specify the type as "text/css":

	<style type="text/css"></style>

The important thing here is where we put the tag. A style tag must be located in the header section of an HTML document, so we want to make sure to put the new tag somewhere after the <head> and before the </head>:

    <head>

        ...
        
        <style type="text/css"></style>
        
        ...

    </head>

CSS for list and map Divs

Now that we have our style section set up, it's time to try out some actual CSS code.

A CSS declaration for a specific DOM Element (like our list or map div) begins with a hash mark, followed by the ID of the element. So if our elements are defined as such:

    <div id="map"></div>
    <div id="list"></div>

...then CSS declarations will look like this:

    <head>
        ...
        <style type="text/css">
            #list{
                ...
            }

            #map{
                ...
            }
        </style>
        ...
    </head>

The following are some different values that you can use to modify the size and position of elements from a CSS declaration:

height/width: specify values like 300px or 50% determines height and width of element
left/right/top/bottom: specify values like 5px or 10% determines position of elements relative to left, right, top, bottom of page or other elements
float: specify values like right or left. This is a special attribute which forces the layout of objects to the left or right of the page.

Note that unless explicitly stated, values should't wrapped in quotes.

So! A full CSS element declaration inside a style tag should look something like this:

    <head>
        ...
        <style type="text/css">
            #list{
                float: left;
                left: 5px;
                width: 400px;
                height: 300px;
            }

            #map{
                float: right;
                right: 5px;
                width: 400px;
                height: 300px;
            }
        </style>
        ...
    </head>

To finish this section, we give you several examples of different CSS configurations using the above properties.

Next: Changing the Fonts