Introduction

HTML and CSS in PBwiki are intimately related. You will never need to generate HTML yourself, because WikiStyle automatically gets converted (you can use HTML if you want to, however). However, to effectively create a stylesheet, you'll need to know a little bit about HTML, how PBwiki generates it, and how it relates to CSS.

The relationship

Although HTML can stand alone without CSS (it won't look good, but that's another story), CSS is completely dependent on HTML elements. The only purpose of CSS, an abbreviation of Cascading StyleSheets, is to format HTML elements. An HTML document enhanced with CSS should in turn minimize the amount of formatting within the document, streamlining it.

They are called cascading stylesheets because styles can be set at multiple levels, with the most specific styles for an element taking precedence. See CSS for more info.

The secret to customization in PBwiki is the wiki.css file, which is a text file of CSS declarations created by the user and then uploaded into their file directory. PBwiki automatically recognizes the file and links it into all pages the same way it links the different skin files. Note that this feature is only available for those who have paid for CSS support.

PBwiki document structure

Please see the Layout Diagram for an indepth look at the layout of a PBwiki page. It is made up of multiple nested <div> elements, which define everything from the header at the top of the page to the wiki's content area and SideBar. These are the major elements most people want to customize.

For example the following code has given the head region a slight green tint on this page:

#header {
   background:#ddffdd;
}

PBwiki content area

Some people may want to also customize user-generated content. For example, you may wish to make all ! level headers have a colored background and an underline all the way across the screen. That could be achieved with the following declaration in your wiki.css file:

#displaycontent h1 {
   border-bottom:1px solid #000000;
   background:#ffcccc;
}

The result of this would be headers that looked like:

Header Example

Not the most compelling design, but it makes a point. You had to know the HTML associated with the ! header to create the CSS declaration, but once you created it, you don't have to think about it. Your WikiStyle editing remains exactly the same as before.

Final thoughts

You don't have to know many tags or much HTML, but you'll have to know some. Outside of the user-content area, the most important element is the <div> tag, which is used to define all the various parts of the page. Inside the content area, most WikiStyle tags come from rather intuitive HTML, which you can find at WikiStyle to HTML.

Use this wiki as a resource to explore the HTML tags available and how to style them.