WordPress - css Basics

Large parts of WordPress are written in css (style sheets). Unfortunately, this makes debugging problems (making changes) a serious problem.

This is not a css reference - just a few hints to get started.

How to Include Styles | Basic Format | Selector Types | Anchor tags | List tags | Playing with color | Height | Layers | Misc

How to Include Styles

There are several ways to include style definitions

Basic Format

The semicolon after the last property is not required.

Selector Types


Anchor tags

By default, anchor tags are what the user clicks on to open a new page. Typically, they are However, styles can be applied to change all that. According to w3schools.com, these are order sensitive and must be in the order shown.

This code is from a tab control. In this case, the anchors (links) are defined as list elements but displayed horizontally and without underlines. The "tabs" are created using display: block. JavaScript clears the associated class for every tab except the one associated with the displayed data (class=current).

Related JavaScript Full discussion of the tab control

List tags

Normally, an unordered list (ul) is rendered as a vertical list with each list element (li) placed on a separate line. The following code (also from my tab control) shows how to disable the normal formatting.

Playing with color

To change the color of text without creating a line break, I use the font tag. (Be sure to close it.) These examples show using hexadecimal values and named colors. Reference - Color chart


16em specifies 16 lines using the current font height.

This is an example from press-this.css



There is a serious design problem in WordPress - the administration menus are rendered under comboBoxes. (Unbelievable!)

Supposably, this can be fixed using stylesheets (z-index:5 should be rendered above z-index:2) ... except that layers can not be set in Internet Explorer.

Well, then the basic WordPress design should be changed to fix this.


Author: Robert Clemenzi
URL: http:// mc-computing.com / ISPs / WordPress / css.html