Skip to main content

Ivan Teoh

Something personal yet public

WordPress Theme Development 10 - Stylesheet

Now come to the look of the web site. Style sheets play an important role in this. I decided to slip the whole stylesheet into different categories: reset, layout, colour, typography and ie. Main style sheet, style.css, will import those categories. Main style sheet also include the style of WordPress default generated classes as shown below.

71-style.css (Source)

@import "style/css/reset.css";
@import "style/css/layout.css";
@import "style/css/colour.css";
@import "style/css/typography.css";
@import "style/css/ie.css";

/* WordPress Generated Classes. More info: */
.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;

.alignleft {
    float: left;

.alignright {
    float: right;

.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;

/* *** WordPress Class Tags *** */
.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}



Comments powered by Disqus