This is an introduction into how the datasite CSS template works for Website Developers and Designers who are writing CSS for the Datasite eBusiness Platform. Our template has been designed to enable easy styling of the HTML generated by datasite but at the same time still offer the variety of CSS hooks and HTML wrappers required to achieve almost any design a company would want

The concept is that the Datasite framework creates high quality lean HTML code and the designer can then create CSS files to style the code generated. We provide a vast range of CSS hooks and can add more hooks if the feature you want to style cannot be done.

Please see the Datasite CSS Template Quick Start Guide page if you want to get started quickly, then you can come back here to learn about the template.

There are a few constants with regard to this template that directly affect how your CSS will render.

• XHTML Strict doctype
  • A strict doctype provides a more predictable environment for styling websites to work on all the major web browsers.
  • Requires knowledge of which HTML elements are allowed and therefore which elements require styling.
  • It puts IE into strict mode. If you are used to using the box model hack it is no longer necessary. However, strict mode does not fix a lot of bugs in IE. www.positioniseverything.net is an invaluable resource for learning about the bugs and how to fix them.
• Reset Style Sheet
  • It is helpful to set default styles that reset every element's default rendering. See (meyerweb.com - reset reloaded) for an example. This means that all browsers will have a consistent starting point from which to style the website.
  • It does require that the basic elements such as <h1> <p> <strong> <em> are all defined in the main CSS file. A style sheet (default.css) is provided if you prefer not to start from scratch.
• The Markup
  • Accessible (WAI,WCAG,AAA)
  • Search engine visibility
  • CSS hooks and HTML wrappers for achieving most designs (3-column, 2-column, 1-column and mixtures of these depending on location)
  • Source-order
  • Semantic use of class and id

The first thing to do is understand how you will include your custom CSS files in the template:

• upload at least one CSS file to your site's static directory. You should have the FTP details already (if not please email support@versatilia.com).
• in the admin area under 'Website' > 'CSS & JS Files' add a new dependency.
• fill in the filename eg. style.css or script.js, you can also create files under the static folder if you want to organise your files eg. css/ie.css
• you can choose a media type if it is a CSS file you are including.
• it is best to include your CSS before any javascript so use 'sort order' to achieve this.
• you can target files to specific versions of internet explorer using conditional comments

It is impossible to author CSS without getting to know the markup. This is broken up into 3 main sections.

1. HTML Structure
2. Boxes
3. Basic Constructs and Elements

It is useful to read these sections to get an idea of how the HTML is structured however you can skip right to a list of the various CSS hooks available to you here.

You can use one of the image button provided but it is recomended that you use the Blank button set to get regular browser buttons. You can style these with CSS in all manner of ways. The following CSS will make a regular button use a background image and hide the standard text:

  input.submit {
    overflow: hidden;
    width: 150px;
    height: 33px;
    text-indent: -999px; /* hides the regular text */
    background: url(submit-button.png) no-repeat left top; /* replace 150x33 pixel area with image of button */
    cursor: pointer; /* make the button appear clickable on hover */
  }
 
  /* you can swap out the background image on hover aswell to highlight it */
  input.submit:hover {
    background: url(submit-button-hover.png) no-repeat left top;
  }