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

There are several ways to include style definitions

Include a file
Place them inline
Add a style parameter to the html tag

  <! Read the styles from a file >
<link href='http://yoursite.com/stylesheet.css' type='text/css' rel='stylesheet' >

  <! Define styles inline >
<style type="text/css">

body {
 font-family: tahoma, arial, sans-serif;
 font-size: 0.8em;
 color: #000000;
 background: #ffffff;
}

</style>

  <! Define styles inside an html tag >
<div style="float: right" class=my_class>

Basic Format

Multiple properties are separated with semicolons
Spaces and returns are ignored

selector { property: value }

selector { property1: value1; property2: value2 }

selector { 
 property1: value1; 
 property2: value2; 
}

The semicolon after the last property is not required.

Selector Types

Any single html element	p h3 table ...	h2 { margin-top: 4px; margin-bottom: 0px; } <h2>Some heading</h2>	Applies the styles to all occurrences of that element
Multiple definitions	a, h2, td	h1, h2, a { margin-top: 4px; margin-bottom: 0px; } <h1>Some heading</h1> <h2>Some heading</h2> <a>Some text</a>	Assign the same style to any number of selectors separated by commas.
Cascading selection	#table_id p	#my_table_id td { background-color: #C0C0C0; }	Combine any number of selectors separated by white space
Comments	/* block comment */	/* some comment / .my_table td { background-color: #C0C0C0; / grey */ }	Follows c-syntax for block comments ONLY Use comments as appropriate
Comments	// single line comment	// this syntax fails - do not use .my_table td { background-color: #C0C0C0; }	Warning - The standard c-type single line comments do not work with IE 6
A user defined class	.class_name	.time {color: #0F0F0F } <td class=time> some text <h2 class=time> some text </h2>	A user defined class works with any element type
A user defined class associated with a specific element type	element.class_name	td.time {color: #0F0F0F } <td class=time> some text	Associating a class with a specific element type allows the name to be reused with other element types, but with different properties
ID Selectors	#id_name	#category_div div.tabs-panel { height: 140px; overflow: auto; } <div id=category_div> </div>	Though ID's can be assigned to any html tag, these are typically used with block elements - div, span, table, and the like.
Pseudo-classes and Pseudo-elements	element:pseudo_class element:pseudo_element	a:link {color: red} p:first-line {color: red}
Some examples from wp-admin.css		ul.categorychecklist li { margin: 0; padding: 0; line-height: 19px; } #category-adder h4 { margin-top: 4px; margin-bottom: 0px; }
Controlling precedence	!important	.my_popup { margin:0 !IMPORTANT; padding:0 !IMPORTANT; } .calendar_eventday a { color:#a00 !IMPORTANT; }	Normally, the newest definition wins. However, "!important" wins over everything not also tagged as "!important". (Not case sensitive. Any number of spaces (or none at all) may occur after the '!'.)

reference

Anchor tags

By default, anchor tags are what the user clicks on to open a new page. Typically, they are

Underlined
Change color once they are used

However, styles can be applied to change all that.

a:link	unvisited link
a:visited	visited link
a:hover	mouse over link
a:active	selected link

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).

#form_tabs a{
  float: left;
  display: block;
  font: bold 11px Arial;
  text-decoration: none;
  margin: 0 5px 0 0; /*Margin between each menu item*/
  padding: 5px 10px;
  background-color: #464646;
  border-top: 1px solid white;
  color: white;
}

#form_tabs a:hover{
  background-color: #c6d9e9;
  color:#246;
}

#form_tabs .current a{ /*currently selected tab*/
  background-color: #c6d9e9;
  color:#246;
  border-color:#FFFFFF;
}

Related JavaScript

function show_tab(sender, container, div_to_show, divs_to_hide)
{
  ids = document.getElementById(container).getElementsByTagName('li');
  for(i=0; i<ids.length; i++){
    ids[i].className = '';
  }

  sender = document.getElementById(sender);
  sender.className = 'current';

  div_to_open = document.getElementById(div_to_show);
  div_to_open.style.display = 'block';

  divs_to_close = divs_to_hide.split(",");
  for(k=0; k<divs_to_close.length; k++){
    document.getElementById(divs_to_close[k]).style.display = 'none';
  }
}

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.

#form_tabs ul{
  margin:0;
  padding: 0;
  list-style: none;
}

#form_tabs li{
  display: inline;
  margin: 0 2px 0 0;
  padding: 0;
}

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.

<tt style="background:#f0f0f0">grey</tt>

<font class=my_class>Any text</font>

.my_class {
  background-color: #e0e0e0;  /* light gray */
  color: #a00;                /* dark red   */
}

.my_class_2 {
  color: white;
  background-color: #e0e0e0;
}

.my_class_3 {
  color: blue;
  background-color: #e0e0e0;
}

6-character hex values

#rrggbb

#ff0000  red    color:red   red
#00ff00  green  color:green green  color:lime lime
#0000ff  blue   color:blue  blue

3-character hex values

#rgb

#f00     red
#0f0     green
#00f     blue

Reference - Color chart

Height

16em specifies 16 lines using the current font height.

This is an example from press-this.css

#categorydiv div.tabs-panel {
 height: 140px;
 overflow: auto;
}

Reference

Layers

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.

/* attempt to fix the admin menus */
#adminmenu .wp-submenu {
 xz-index: 2;      /* the default value                   */
 z-index: 20000;   /* I thought this might be high enough */
}

Misc

cursor: crosshair

Author: Robert Clemenzi