Special CSS Styling I Use on This Site

If you're new here, you may want to subscribe via -or-

After a year of blogging I have discovered some secrets of CSS (Cascading Style Sheets). I’ve come a long way from the simple cub-reporter theme I started with nearly one year ago with my first post. CSS is one of the most fun aspects of blogging for me these days. In case you are into CSS or are curious, here’s a full copy/paste of the code I use to style my posts:

/*[[ --- Special Class Styling ---]]*/
/*[[ --- DIV: styling a background image and style for entire posts or chunks of posts) ---]]*/

DIV.journal {
padding-top: 100px;
height: auto;
background: url(’images/journal.jpg’) 0% 6px no-repeat;
}

DIV.aside {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#ffffcc;
background-position:bottom right;
background-repeat:no-repeat;
}

DIV.thought {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#eee;
background-position:bottom right;
background-repeat:no-repeat;
}

DIV.code {
background:#F2F2F2 url(images/code.gif) top left no-repeat;
border-top:1px dashed #CCC;
border-bottom:1px dashed #CCC;
font-family:”Courier New”, Courier, monospace;
padding:5px 10px 5px 30px;
}

DIV.conversation {
margin-top: 1.5em;
margin-bottom: 50px;
border-top: 2px solid #CCE5FF;
border-left: 2px solid #CCE5FF;
border-right: 2px solid #CCE5FF;
width: 496px;
padding: 1px 5px;
margin-bottom: 0px;
font-family: Courier New, Courier, monospace;
font-size: 11px;
background: #E7F3FF;
border-bottom: 2px solid #CCE5ff;
}

DIV.photo {
margin-bottom: 0px;
width: 510px;
padding-top: 15px;
padding-bottom: 15px;
background: url(’images/photo_bg.gif’);
}

DIV.postcard {
height: auto; padding-left: 10px;
padding-top: 125px;
padding-right: 10px;
font-family: Courier New, Courier, monospace;
background: url(’images/postcards/postcard.jpg’) 0% 6px no-repeat;
padding-bottom:15px;
margin-bottom:15px;
}

DIV.video {
text-align: center;
width: 510px;
background-color: #ccc; }

/*[[ --- p and span class styling (for styling lines or paragraphs inside of division styles) ---]]*/

.aside {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#ffffcc;
background-position:bottom right;
background-repeat:no-repeat;
}

.code {
background:#F2F2F2 url(images/code.gif) top left no-repeat;
border-top:1px dashed #CCC;
border-bottom:1px dashed #CCC;
font-family:”Courier New”, Courier, monospace;
padding:5px 10px 5px 30px;
}

.url {
padding-left: 10px; background: url(’images/url_bg.gif’) 0% 6px no-repeat;
}

.conversation {
margin-top: 1.5em; margin-bottom: 50px; border-top: 2px solid #CCE5FF; border-left: 2px solid #CCE5FF; border-right: 2px solid #CCE5FF; width: 496px; padding: 1px 5px; margin-bottom: 0px; font-family: Courier New, Courier, monospace; font-size: 11px; background: #E7F3FF; border-bottom: 2px solid #CCE5ff;
}

.photo {
margin-bottom: 0px; width: 510px; padding-top: 15px; padding-bottom: 15px; background: url(’images/photo_bg.gif’);
}

.postcard {
height: auto; padding-left: 10px; padding-top: 125px; padding-right: 10px; font-family: Courier New, Courier, monospace; background: url(’images/postcards/postcard.jpg’) 0% 6px no-repeat; padding-bottom:15px; margin-bottom:15px;
}

.video { text-align: center; width: 510px; background-color: #ccc; }

img.center {
display: block;
margin: 5px auto;
border: 5px solid #000;
max-width: 480px;
}

Tags: blog, computers, Cyberculture, tech

This entry was posted on Tuesday, December 18th, 2007 at 12:30 pm and is filed under Blogging. So far it has had 149 views. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

RSS feed | Trackback URI