• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.


HTML and CSS basics

Page history last edited by PBworks 13 years, 11 months ago




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 {


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;


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.

Comments (0)

You don't have permission to comment on this page.