Commented stylesheet for Serendipity (s9y) blog

Looking through the stylesheet you should notice I've grouped the styles into the following;

• general - these are the styles commonly used throughout your blog
• header - any styles used only in the banner or top menu of your blog
• footer - the very bottom section of your blog. Not all themes have a footer though
• entry - any styles used to display your posts including the post title, the date, link to the extended entry, and the links to comments and trackbacks
• comments - the way that comments are displayed can vary significantly, and these styles make this happen.
• comment form - the comment form can be customised so the the input boxes are different sizes. In addition, it is possible to change the color and background of input boxes
• sidebar - each sidebar plugin has its own block within the sidebar and these styles determine the border, title font and color etc.
• calendar - if you use the calendar plugin you could alter the styles from this section. The calendar is a table within the sidebar. Generally you should only adjust the fonts and colors. The grey borders tend to work best with most themes.
• image (media) - these styles affect the way images within your entries are displayed. Please note that these styles only alter the images placed into your entry by the media popup in the administration suite

Working with Styles
The W3C have defined the way that styles are to be formatted, and it goes like this. The selector (eg the body, or h1) is opened and closed by curly brackets, and all declarations must be within the curly brackets and written as property name, a colon, the value, and then a semi-colon. The following is an example from the default stylesheet;

body {
font-size: 10pt;
margin: 0;
background-color: #D2DFF2;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 30px;
}

If that seems needlessly complex, we all had to get used to it, and after the initial jolt it starts to make sense so keep with it. Read it twice if you have to.

At this point I imagine you're probably wondering how to work out the properties and values. There are a lot of them, and you can't just make up your own. I would recommend buying a good book on HTML and CSS stylesheets. My personal favorite is HTML for the World Wide Web with XHTML and CSS written by Elizabeth Castro and available from Amazon Bookshop.

EDIT: Late Jan 2006, in response to Dave's comment. Undocumented styles are easy to find, simply view source from your browser. What Dave is looking for can be found in this line;

<h3 class="serendipitySideBarTitle serendipity_calendar_plugin">Calendar</h3>

Notice the class has two properties, .serendipitySIdeBarTitle and .serendipity_calendar_plugin. Additional styles for this plugin title could be applied using the second style name.