WordPress relies heavily on the presentation styles within CSS. With the use of Themes, you have an almost infinite choice of layout options. WordPress Themes make it easy to change your website look, and open up the field to help you create your own Theme and page layout.

CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.

This article briefly describes the use of CSS in WordPress, and lists some references for further information. For information on CSS itself, see Know Your Sources#CSS.

WordPress and CSS

WordPress Themes use a combination of template files, template tags, and CSS files to generate your WordPress site s look.

Template Files

Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates.

Template Tags

Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Stepping Into Template Tags.

Stylesheet

The CSS file is where it all comes together. On every template file within your site there are HTML elements wrapped around your template tags and content. In the stylesheet within each Theme are rules to control the design and layout of each HTML element. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can “float” in the middle of the viewer s screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder.

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, together the alignment and caption classes are:

Each Theme should have these or similar styles in its style.css file to be able to display images and captions properly. The exact HTML elements and class and ID values will depend on the structure of the Theme you are using.

Go to Detail Page

The following isnt about choosing a WordPress Theme, but finding the CSS styles within your current Theme. Often a problem occurs in one part of the layout or template. For instance, there is a border you dont want between the sidebar menu and the rest of the page. You hunt and hunt but you cant find any reference to the border. Now what?

Playing CSS Detective

Lets begin by playing CSS detective. You know where the problem is, you just cant find the problem. In the above example, you need to hunt for an errant border.

Begin by carefully examining a generated page (or test page) and look for some identifying text in the sidebar, near the errant border. Lets say that listed in the sidebar, you have a post title called “All About Harry”. You know you will find that title in your sidebar when you view the pages source code.

To view a page source code, go up to the menu bar of your browser and choose VIEW > PAGE SOURCE or VIEW > SOURCE. A page will pop up featuring the source code of the page.

Use your handy detective tool, Ctrl+F, to activate your search. Type in “all about harry” and click FIND. Odds are, unless you have the words “all about harry” in your post, it will take you to the first showing of the phrase “all about harry” which is probably in your sidebar. If not, hit FIND again until you have found the right phrase in the right area.

If you are using Internet Explorer, an alternate method is to use the Internet Explorer Developer Toolbar, which allows you to visually see and select the elements, IDs, and classes on the page. It displays the elements within the hierarchy of the page, their CSS attributes, and can outline DIVs, tables, etc. You can download the Toolbar from Microsoft.

Once you have found the phrase, its time to play CSS detective. Look up through the code from the phrase “All About Harry” for one of two things. It will look something like either of these, using words like sidebar, menu, or sidecolumn

Go to Detail Page

Fonts Represent Your Content

Theres no doubt that your words, your posts, are the meat and potatoes of your blog or website. Those words, along with your lovely colors and pictures, tell your website’s story. But, don’t forget to pay attention to your font selections. The fonts you choose in designing your theme can influence whether or not people hang around to see more than a page or two of your pretty work.

Fonts come in a wide variety of types and styles, but unfortunately, unless the user actually has that font installed on their machine, they will see something that is only “close”, such as a generic serif or sans-serif, to what you wanted to present. If you want to see a list of what you have installed on your machine, visit several of the font sites listed below or this font test. If your font is there, you will see it. If not, you will see a generic Courier font.

In your Themes style sheet (style.css usually) you can control the font-family (the list of fonts to display), the color, the size, and other aspects of your font. The following example sets the fonts for your sidebar menu, sets the size to 1em high, and sets the color to blue:

#menu {font-family: Verdana, Arial, Helvetica,
sans-serif; font-size:1em; color:blue; }

As you can see, you have set more than one font in the font-family. If the user does not have Verdana, Arial will take over. If Verdana and Arial are missing, they have a chance to use Helvetica. If all else fails, the users system fonts takes over and uses the default font for sans-serif. This list of choices helps the designer control the fonts and insures a more consistent “look and feel”.

Font families tend to be single words, but on occasion you will find a phrase to represent a font such as Lucida Console. This is set in the style selector surrounded with quote marks such as:

#menu {font-family: Verdana, Arial, Helvetica,
“Lucida Console”, sans-serif;…..

Fonts in WordPress

WordPress Themes use fonts in many different ways, and not always consistently. It depends upon the Theme authors decisions and needs in designing a Theme. Different fonts can be found in different areas of the website, one type in the header, another in the sidebar (or maybe two or three), and another font style or type in the post content area. Finding those fonts in order to change them, can give a user grief

Since fonts can be anywhere, finding the font you want to change can be a challenge. Generally, an overall font is set in the body of a website.

body {font-family: Verdana, Arial, Helvetica,
Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0; }
This covers the definition of the fonts found within the site that are not definied by a specific tag, class or div. Its the “fall-back font”.

Fonts found within the header of a site are normally found within the header div and same for the sidebar or menu and footer style divisions. The content, though, may be more challenging to track down.

Fonts within the post content area are often found within the following, but not always, CSS classes:

• content
• post
• entry
• post-entry

Go to Detail Page