How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

CSS can be tricky. It can also be incredibly easy. I had a lot of help getting my head wrapped around CSS when I was first starting out and I take great pleasure in helping others the same way I was first helped: with solid code examples to learn from.

Here, we’re going to lay out a WordPress Theme CSS development arsenal for you:

• A stylesheet that resets default CSS across all web browsers and makes a sane standard we can work from
• A set of 5 fluid stylesheets that will create ALL the common blog and website layouts you expect—and each one ready to adapt into a fixed width layout.
• Fonts with rem units so that they are easy to adapt
• Many global and common markup styles pre-defined.
• Simple responsive navigation menu for small screens.
• Default button styles.
• A blank, commented stylesheet with all major selectors included, ready for your styles.
• An example stylesheet with a sample, CSS-only design so that you can see the selectors in action, and build off of it.
• An introduction to RTL stylesheets, with a working RTL stylesheet for our sample CSS-only design.

Ready to hit the target?

Reset CSS

Our Reset CSS is adapted from Eric Meyer’s famous Reset CSS with some minor, minor changes. Basically what it does is take all the typographical defaults of every browser and … obliterates them. You’re left with a squashy, gray mess.

It’s beautiful.

What this does is equalize the rendering of every browser, leaving you free to ignore countless individual quirks particular to each one.

Using it is simple. Add the following to your style.css, at the very top, immediately after the initial comments section.

/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
html {
	font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
body {
	background: #fff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
ol, ul {
	list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a:focus {
	outline: thin dotted;
}
a:hover,
a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
	outline: 0;
}
a img {
	border: 0;
}

There’s no need to memorize the reset styles. Just paste them to the top of your stylesheet each time you start a new project. Reload your page and check how it looks in multiple browsers (if you can). It’s wonderfully gross, isn’t it?

Rebuild CSS

Our Rebuild CSS is my own personal invention adapted from an early version of the Blueprint CSS typography stylesheet and refined first in Thematic and, most currently, in the Underscores Project. What it does is swing back some vertical rhythm in our pages, but in a really smart way.

What I’ve tried to do with this iteration of my typography-rebuild CSS is combine the best of both worlds for web typography: using rems (with pixel fall backs) for font height, with relative line-height for the main declaration on the body element, and Ems for all subsequent vertical margins (like for paragraphs and lists).

What does this mean? It’s really easy to set your font height later—without doing any math—and have all of your typographical elements follow suit with an appropriate vertical rhythm (the vertical space between type elements like paragraphs and lists).

Let’s add the rebuild style rules right after our reset.

/* =Global
----------------------------------------------- */

body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
	clear: both;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* Text elements */
p {
	margin-bottom: 1.5em;
}
ul, ol {
	margin: 0 0 1.5em 3em;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
	margin-left: 1.5em;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0 1.5em 1.5em;
}
b, strong {
	font-weight: bold;
}
dfn, cite, em, i {
	font-style: italic;
}
blockquote {
	margin: 0 1.5em;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	padding: 1.6em;
	overflow: auto;
	max-width: 100%;
}
code, kbd, tt, var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark, ins {
	background: #fff9c0;
	text-decoration: none;
}
sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: 75%;
}
big {
	font-size: 125%;
}
figure {
	margin: 0;
}
table {
	margin: 0 0 1.5em;
	width: 100%;
}
th {
	font-weight: bold;
}
button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button,
input {
	line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
	*overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid #ccc;
	border-color: #ccc #ccc #bbb #ccc;
	border-radius: 3px;
	background: #e6e6e6;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	color: rgba(0,0,0,.8);
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
	font-size: 12px;
	font-size: 1.4rem;
	line-height: 1;
	padding: 1.12em 1.5em 1em;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa #bbb;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
}
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb #bbb;
	-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
	box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
	padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}
input[type=text],
input[type=email],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
	color: #111;
}
input[type=text],
input[type=email] {
	padding: 3px;
}
textarea {
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 3px;
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 98%;
}

/* Links */
a {
	color: royalblue;
}
a:visited {
	color: purple;
}
a:hover,
a:focus,
a:active {
	color: midnightblue;
}

The Standard Styles

There are some elements in WordPress that you’re just going to have to style every time. This includes styles for floating all the images, as well as handling menus, captions, image galleries, widgets, post content, and comments. Let’s add them right now. Paste the following just below the styles you just added.

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/* Text meant only for screen readers */
.assistive-text {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

/* =Menu
----------------------------------------------- */

.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation li {
	float: left;
	position: relative;
}
.main-navigation a {
	display: block;
	text-decoration: none;
}
.main-navigation ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	position: absolute;
		top: 1.5em;
		left: 0;
	z-index: 99999;
}
.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}
.main-navigation ul ul a {
	width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
	display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}

/* Small menu */
.menu-toggle {
	cursor: pointer;
}
.main-small-navigation .menu {
	display: none;
}

/* =Content
----------------------------------------------- */

.sticky {
}
.hentry {
	margin: 0 0 1.5em;
}
.entry-meta {
	clear: both;
}
.byline {
	display: none;
}
.single .byline,
.group-blog .byline {
	display: inline;
}
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* =Asides
----------------------------------------------- */

.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/* =Media
----------------------------------------------- */

.site-header img,
.entry-content img,
.comment-content img,
.widget img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
.site-header img,
.entry-content img,
img[class*="align"],
img[class*="wp-image-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
.site-header img,
.entry-content img,
img.size-full {
	max-width: 100%;
	width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
.wp-caption {
	border: 1px solid #ccc;
	max-width: 100%;
}
.wp-caption.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright {
	margin-bottom: 1.5em;
}
.wp-caption img {
	display: block;
	margin: 1.2% auto 0;
	max-width: 98%;
}
.wp-caption-text {
	text-align: center;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}
.site-content .gallery {
	margin-bottom: 1.5em;
}
.gallery-caption {
}
.site-content .gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.site-content .gallery dd {
	margin: 0;
}
.site-content .gallery-columns-4 .gallery-item {
}
.site-content .gallery-columns-4 .gallery-item img {
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/* =Navigation
----------------------------------------------- */

.site-content .site-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}
.site-content .nav-previous {
	float: left;
	width: 50%;
}
.site-content .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/* =Comments
----------------------------------------------- */

.bypostauthor {
}

/* =Widgets
----------------------------------------------- */

.widget {
	margin: 0 0 1.5em;
}

/* Search widget */
#searchsubmit {
	display: none;
}

Now you have some base styles in place on which you can build further. If you’d like guidance on how to style these elements, please download one of the sample stylesheets, which are linked in the Example Stylesheets section at the end of this lesson.

All The Layouts You’ll Ever Need

The _s theme ships with 5 rock-solid, indestructible layouts: content-sidebar, sidebar-content, sidebar-content-sidebar, sidebar-sidebar-content, and content-sidebar-sidebar.

If you want, you can copy each of these stylesheets into the layouts directory you created in WordPress Theme Directory Structure. This way, you’ll have all of the layouts around for reference. This step is entirely optional; if you won’t be using all of the layouts, by all means only copy what you plan to use.

To use a layout in in your theme, just copy its styles into style.css. I like to place the layout-related rules under a new section in style.css called “Structure”. I place this “Structure” section just below the “Global” section, but you can place it wherever is best for your project.

As an example, if you want a content-sidebar layout, you’d grab the following from content-sidebar.css:

/* =Structure
----------------------------------------------- */
#primary {
float: left;
margin: 0 -25% 0 0;
width: 100%;
}
#content {
margin: 0 25% 0 0;
}
#secondary { /* Sidebar 1 */
float: right;
overflow: hidden;
width: 25%;
}
#tertiary { /* Sidebar 2 */
clear: right;
}
.site-footer {
clear: both;
width: 100%;
}

If you wanted a sidebar-content-sidebar layout, you’d paste the following instead, from sidebar-content-sidebar.css.

/* =Structure
----------------------------------------------- */
#primary {
float: left;
width: 100%;
}
#content {
margin: 0 20%;
}
#main .widget-area {
float: left;
overflow: hidden;
width: 20%;
}
#secondary { /* Sidebar 1 */
margin: 0 0 0 -100%;
}
#tertiary { /* Sidebar 2 */
margin: 0 0 0 -20%;
}
.site-footer {
clear: both;
width: 100%;
}

For a sidebar-sidebar-content layout (sidebar-sidebar-content.css), this code will do it.

/* =Structure
----------------------------------------------- */
#primary {
float: right;
margin: 0 0 0 -40%;
width: 100%;
}
#content {
margin: 0 0 0 40%;
}
#main .widget-area {
float: left;
overflow: hidden;
width: 20%;
}
.site-footer {
clear: both;
width: 100%;
}

For a content-sidebar-sidebar layout (content-sidebar-sidebar.css), here’s what you’d paste.

/* =Structure
----------------------------------------------- */
#primary {
float: left;
width: 100%;
}
#content {
margin: 0 40% 0 0;
}
#main .widget-area {
float: left;
overflow: hidden;
width: 20%;
}
#secondary { /* Sidebar 1 */
margin: 0 0 0 -40%;
}
#tertiary { /* Sidebar 2 */
margin: 0 0 0 -20%;
}
.site-footer {
clear: both;
width: 100%;
}

Finally, for a sidebar-content layout (sidebar-content.css), here’s the magic code.

/* =Structure
----------------------------------------------- */

#primary {
float: right;
margin: 0 0 0 -25%;
width: 100%;
}
#content {
margin: 0 0 0 25%;
}
#secondary { /* Sidebar 1 */
float: left;
overflow: hidden;
width: 25%;
}
#tertiary { /* Sidebar 2 */
clear: left;
}
.site-footer {
clear: both;
width: 100%;
}

The simplest method of turning any one of these layouts into a fixed-width layout is to add a width and centering margin to the .site div. For example:

.site {
    margin: 0 auto;
    max-width: 980px;
}

Adding an RTL stylesheet

If you plan to distribute your theme, it’s highly recommended that you add an RTL stylesheet. RTL stylesheets flip the horizontal direction of your theme to accomodate languages that read from right to left. Therefore, in your RTL stylesheet, you must:

• Convert all of your “float: left” rules to “float: right”, and vice versa
• Convert “left” margin and padding to “right” margin and padding, and vice versa
• If you’ve added any images that depend on direction (such as arrows), you may need to create RTL versions that you can call up in your RTL stylesheet

To get your RTL stylesheet started, open rtl.css (or create this file in your theme’s root directory if you don’t have it). Paste this code at the top.

/*
Theme Name: Shape

Adding support for language written in a Right To Left (RTL) direction is easy -
it's just a matter of overwriting all the horizontal positioning attributes
of your CSS stylesheet in a separate stylesheet file named rtl.css.

http://codex.wordpress.org/Right_to_Left_Language_Support
*/

body {
	direction: rtl;
	unicode-bidi: embed;
}

Now you need your RTL styles! How you build them is up to you. You can do it manually, going through your sylesheet and converting all of the horizontal rules one at a time. The WordPress Codex has helpful steps for this process.

If your stylesheet is large or you just don’t feel like doing it manually, you can use a tool that will automatically convert LTR properties to RTL. One good example tool is CSS Janus. You can copy and paste your CSS and it’ll generate RTL properties for you to paste into your RTL stylesheet!

Even if you use a conversion tool, you still need to test your RTL styles and tweak them, because some properties may have been missed. I recommend the RTL tester plugin, which adds a nifty “Switch to RTL” link in your admin bar. You’ll be able to see your RTL styles in action!

Adding a Theme Screenshot

You’ll need to add a screenshot that accurately depicts what the theme looks like. The current recommended size for screenshots is 600 pixels wide by 450 high. Screenshots must be saved in PNG formats and named “screenshot.png”.

Refer to the The WordPress Codex for the latest guidelines on screenshots.

Example Stylesheets

If you’d like to see an example stylesheet that styles most of the theme elements with a simple design, download the Shape Sample Style.

To apply the sample stylesheet to the theme you’ve just built, follow the instructions in the README file included with the download.

Learning Stylesheet

The learning stylesheet is for those who are feeling adventurous. It contains every major ID or class selector from the theme, empty and ready for you to fill in. Some of the selectors have basic styling applied to them to get you started, but most are empty. Comments are also included to help guide you along. Download the learning stylesheet here. To install it, rename it to “style.css” and then drag it into your theme’s root directory, replacing your current stylesheet.

How To Create a WordPress Theme

This post is part of the The ThemeShaper WordPress Theme Tutorial: 2nd Edition that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

1. WordPress Theme Tutorial Introduction
2. Developing Theme Sense
3. Theme Development Tools
4. Creating a Theme HTML Structure
5. Template and Directory Structure
6. Setting Up Your Theme Functions
7. Secure Your WordPress Theme
8. The Header Template
9. The Index Template
10. The Single Post, Post Attachment, & 404 Templates
11. The Comments Template
12. The Search Template & The Page Template
13. The Archive Template
14. The Sidebar Template & The Footer Template
15. Reset-Rebuild Theme CSS & Define Your Layouts
16. Custom Background & Custom Header
17. Distributing Your WordPress Theme