Today I will tell you about WordPress stylesheet the beating heart of WordPress themes.


What is Theme Stylesheet?

In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. The stylesheet must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

The following is an example of the first few lines of the stylesheet, called the stylesheet header.

Theme Name: Twenty Thirteen
Theme URI:
Author: the WordPress team
Author URI:
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI:
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.


Note the list of Tags used to describe the theme. These allow user to find your theme using the tag filter. You can find a full list in the Theme Review Handbook.

Stylesheet style.css file must be in root folder of the theme including index.php sidebar.php header.php and footer.php . You can also have an additional stylesheet for RTL (Right to Left) languages such as (Persian, Arabic, Hebrew) named rtl.css


Other pages will be optional as your theme function requires such as single.php (if you want have bloging website and publish updates) or page.php comments.php 404.php single-{post-type}.php etc. But we are not going to talk about these files as long as this article is about stylesheets.


WordPress Generated Classes

Several classes for aligning images and block elements (div, p, table etc.) were introduced in WordPress 2.5: aligncenter, alignleft and alignright. In addition the class alignnone is added to images that are not aligned, so they can be styled differently if needed.

The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, and one more for accessibility. Together, the classes are:

PS: these classes are required in your style.css file if not your theme will not pass the test (we will talk about this test later).

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;

div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;

.alignright {
    margin: 5px 0 20px 20px;

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;

a img.alignnone {
    margin: 5px 20px 20px 0;

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;

.wp-caption.alignright {
    margin: 5px 0 20px 20px;

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;

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

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
        white-space: nowrap;
	height: 1px;
	width: 1px;
	overflow: hidden;

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */


These classes are required however they have value or just empty brackets.


Need more information? click here.

Share this article: