How do I style the latest post?

there is nothing special in your template that should have prevented any of the ‘standard’ ways of doing this.

try and change this line:
<div class="post" id="post-<?php the_ID(); ?>">
to:
<div class="post<?php if($wp_query->current_post == 0 && !is_paged())echo ' latest-post'; ?>" id="post-<?php the_ID(); ?>">

then style:
.post.latest-post { background-color: #123edf; }

The first post is getting the style applied to it, but my theme’s #content .post style is applying the gray background color over top of the blue color defined in your .post.latest-post style. I’m not sure how to fix this…

Thank you

the #content .post style is more specific than the one I suggested –

try:

#content .post.latest-post { background-color: #123edf; }

This is a little off topic but when I make a new page and publish it I cant get it to come up on the web. What am I missing here?

If this isn’t too much work, could you also tell me how to style the text for this box?
It is keeping the same styles as the rest of the site.

For instance, I would like the title and content to be white with a dark background for the first post only.

I would like the title and content to be white with a dark background for the first post only

possibly (you need to adjust the colors):

#content .post.latest-post { background-color: #555; color: #eee; }
#content .post.latest-post h2 a { color: #ddd; }
#content .post.latest-post h2 a:hover { color: #fff; }
#content .post.latest-post .wrap { background-color: #222; }

however, this wordpress forum’s primary purpose is not the help with fine-tweaking css styles; you could try to get working with one of the free web tools such as firebug or similar, to identify the css selectors of screen elements of your site, and style them in your theme’s stylesheet.
there are free online tutorials such as w3school.com which you could use to increase your knowledge of css (and html, php).