Introducing XWeb

The Basics
Using CSS
Parameters
Images
Advanced XWeb
References
 
CSS Basics
Main Text
Navigation
Images
Extras

Changing the look of your site with CSS

CSS stands for "Cascading StyleSheets" and refers to a technology which can be used to tell a browser how to display different elements in an HTML page. CSS is a very powerful technology and we will give only a very brief introduction here, for more information visit either the CSS pages of the W3C or take a look at the tutorial at W3Schools.

Using CSS is quite easy. Just open your favored text editor and enter the information which elements to format how like this: 

  body { background-color: white; }

This CSS fragment will tell the browser to format the element <body> in a specific way, namely to give it a white background. You can give multiple instructions between the braces and you can give instructions for any HTML element. The generic structure looks like this: 

  element { layout-aspect1: value1; layout-aspect2: value2; ... }

Whitespace is ignored, you can specify the information in any formatting you want, e.g. this might be more readablw for complex instructions: 

  element {
      layout-aspect1: value1;
      layout-aspect2: value2;
      ...
  }

Order is not important either and you can add comments by putting them between "/*" and "*/" like this: 

  /* formatting for some element */
  element {
      /* text layout */
      layout-aspect1: value1;
      layout-aspect2: value2;
      
      /* other layout */
      ...
  }

Many of these informations will be inherited by elements nested into the one you specified, e.g. each paragraph in the body will have white backgorund, too -- unless you specify otherwise. Or each table cell will use the colors given for the table itself unless you give more specific instructions. Not all formatting rules will be inherited but usually CSS does what you want and you don't have to care. An example for a formatting rule which will not be inherited is a border: if you set a border on a paragraph elements in the paragraph (images, font changes, links) will not have any border unless you give them borders explicitely.

You can enlist multiple elements to format in the same fashion by separating them with commata: 

  p,ul,ol { ... }

The example will give coherent formatting to the paragraphs and unordered/ordered lists, the result will be exactly the same as specifying the same rules for each of them. There are also three ways to specify more exactly which elements you want to format (more exact: five, but we skip the media types and identifiers here). You can specify nesting of elements by separating multiple element names like this: 

  td img { ... }

The rules given here will be only applied on images in a table cell, not on other images. Another option is using class names separated from the element name by a dot: 

  table.navigation { ...}

This will format only a table which is declared to be of the class "navigation" like this: 

  <table class="navigation">
     ...
  </table>

CSS classes can be used to format specific elements on a page and is used heavily by the generic stylesheet as we will see on the following pages.

A last way to be more specific is to use so-called pseudo-classes, they can be used to specify specific parts or states of the HTML elements. One of the most common usages is to define how a link should look like when the mouse is over it: 

  a:hover { ... }

Pseudo-classes are separated from the element by a colon instead of the dot. You can combine all three approaches like this: 

  table.navigation a:hover { ... }

to specify how mouse over effects in the navigation table should look like or like this: 

  a.xwebLink:hover { ... }

to specify how the mouse over effects for links resolved by XWeb should look like (the class is added by the generic stylesheet.

Enough dry theory, let's add an CSS stylesheet to the site. Write the background example into an empty textfile, save it as style.css into the content directory of your site and add it as <file> entry to your site like this: 

  <structure>
    <section name="My Project" sourceDir="projectDescription" targetDir="project">
      <!-- entries -->    
    </section>
    <!-- more sections -->    
    <section name="People" sourceDir="people" targetDir="people">
      <!-- entries -->    
    </section>
    <file sourceFile="style.css" targetFile="style.css" type="copy" id="style"/>
  </structure>

Important here is the attribute id which will be used to find the right file to use as CSS stylesheet in the output. Unless you specify a different id to use the generic stylesheet will use for a file with the id set to "style" to use as CSS stylesheet.

In addition we need to define how to handle the "copy" type, add this to the <layout> section: 

  <layout>
    <!-- other documentStyles -->    
    <documentStyle type="copy">
      <copy/>    
    </documentStyle>
  </layout>

This will just cause XWeb to copy your stylesheet into the output. If you want to experiment with the CSS instructions you might want to change the CSS directly in the ouput so you don't have to rerun XWeb everytime you change something. But don't forget to copy changes you want to keep into the input file, the output file will be overwritten without warning the next time you run XWeb.

If you use a Windows browser you probably want to use a different color than white for testing, try using common color names like "blue", "green" or "yellow" instead. After you recreate your site all pages should use the color you specified as background color.

The following pages show how to use CSS for the different aspects of the site, each containing some examples for the usage. There is a reference for the CSS classes where you can find all CSS classes generated by the stylesheet.