Custom CSS for viewing a draft page on the frontend?

There is probably a better way but you could add the following CSS to your stylesheet, which will add a little banner when viewing a page that has a status of draft.

.status-draft.hentry:before {
    content: "Previewing a Draft";
    background: #87C5D6 !important;
    display: block;
    text-align: center;
}

You could also use these classes for the different statuses.

.status-pending

.status-publish

.status-future

.status-private

Works for me.