IT IS OK if you have no CSS experience. This is how I learned. You have to play with the code and seeing it in action like this will help.

Copy the code below, I'll explain what does what next. Paste this code in a new html friendly text document such as Notepad (NOT MS WORD or any formal word editing program).

Next, arm yourself with a great color code schemer. I recommend HyperGurl Color Match. Also, Color Schemer. This is an important step because most of the adjusting and personalizing you will do in your 'hoods is by changing those colors. Have your colors chosen, but make it as easy as hopping from one window to another and copying and pasting to change them over and over until you are happy with it.

I am using this format:

.css class name {color: #blah; font: 10px arial,blah,whatever;}
    [my class] this class makes my hair turn plaid or something

What I've done is display the basic coding I used to alter 'hoods, along with their details and a brief explanation of what that class does. If it is a css class we created, it will say [our class] if it is an AW one it will say [jot class]. All are put to use in the 'hood page because either Jot's natural page coding references those CSS classes, or we reference them ourselves within the page. At the bottom I'll show examples of this. The CSS Class itself is in blue.

'Hood examples to follow along with (that use these classes in a stylesheet): Mohenjo-Daro, Bodh Gaya, Angkor and Yoshiwara. Each have something unique about them too coding wise. I will be referencing them below.

<style type="text/css"> <!--
    [neither really]This is just the beginning of your css stylesheet. Moving on.

.gram {border: 2px solid #; }
    [jots class]This is the border around the page. In Mohenjodaro you can see it's a torquoise color. In Angkor however, it's disappeared! If you set this color to the same as the overall page, it will disappear for you too. But only black will make it truly seamless with the entire page.

.gram hr { border: none 0; border-top: 1px solid #; height: 2px;}
    [jots class] The two lines, 1 under 'Articles of wherever' and 1 under 'Discussions of wherever', this alters them in color and style.

.gram .gram { border: 1px solid #; color:#; background-color:#}
    [jots class] This affects the box around the google ad and also the one around the residences. Specifically the color and style of the border, the color of the majority of the non-link text within (not google ad tho) and the background color should you choose to style one. An example of all three altered is in Yoshiwara 'hood.

.pageStyleSheet {background-color: #; color: #;}
    [jots class] This is the majority of your page. This determines your background color, text color, etc. I normally only change my background color and font color with this tho, and leave the font changes to the '.hood' class. Up to you.

.pageStyleSheet div i {color: #;}
    [jots class] In several places throughout the page there are italicized words. This alters their color for an interesting look.

.pageStyleSheet a:link {color: #;}
.pageStyleSheet td a:link {color: #;}
.pageStyleSheet td a:visited {color: #;}
.pageStyleSheet td a:hover {color: #;}
    [jots class] This alters the color of all links in the page.

td div b {color: #;}
    [jots class] This changes the large title at the top of the page, and also the location it falls within in sentence just above it.

td div div b {color: #;}
    [jots class] Changes the location type name (urbs, residences, etc) and 'hood location name in the residences box under the main perspective. Also underneath, to the 'travel to other "Districts" districts is altered.

.dynamicnum, .dynam {color: #;}
    [jots class] Changes anyplace in the 'hood page that has a number involved.


.hood {font-family: Arial,Helvetica; font-size: 10px; text-align:left; color:#}
    [our class] Finally to our classes! This is the meat of your 'hood page. If you encapsulate everything in a container tag like 'div' and reference this css class, this determines the font style, size, color and alignment.

.hoodtitles {font: 10px Arial,Helvetica; color: #;}
    [our class] This was created to make writing subheaders easier. Look in Bodh Gaya, the subtitle 'Hindu Temples' is set by Shanti's use of this css class. Also in Mohenjo-Daro, where there are many repetitions, it becomes handy to just call on a class instead of coding each one seperately.

.hoodcredit {font: 10px Arial,Helvetica; color: #; text-align:right;}
    [our class] Last one, not necessary. At the bottom of all of the linked 'hoods, you will see where this hoodcredit is put to use. At the bottom right of the page, where it lists the designer and writers. Was just an easy way to code this then copy it wherever needed. Your free to use it if its handy.

--> </style>

Want to put these to use? Well some will be put to use naturally by Jot's coding. Some you need to put to use yourself, in this case anything that begins with .hood Here are ways to do that.Note you need the period before your class in the stylesheet above, but not when referencing them.

<div class="hood">The body of your entire hoods contents and at the end.. </div>

Or to determine your 'hood designers and writers:

<div class="hoodtitles">
City builders: <br /> <a href="url">Ningyo Minamoto</a>
</div>

And for those subtitles you can use any of the three.

<div class="hoodtitles">Subheader that gives you a full page break before and after </div>

<p class="hoodtitles">Subheader that also gives you a full page break before and after</p>;

<span class="hoodtitles">Subheader that gives you no page breaks before or after</span>

You also have to put in all your own details obviously. All colors have been left blank and font sizes are all set at either 00 or 10px which is really tiny. You will need to adjust these to suit your needs. Try to list three fonts or two very basic ones in case the viewer doesnt have it on their computer. The proper way to code a color is to find the 6 digit hex code that denotes your color and put it after the pound sign/#. An example of both:

The best way to get a grip on this isnt to stare at this until your eyes fall out. Take the code in your notepad text doc filled in with a bunch of color choices, minimal content, just enough to start seeing it, and start editing your hood today. This is the best way to learn. No one is watching, there are no secret counters being sent to Jot. You can hit that edit button ALL DAY.