CSS or Cascading Style Sheets is a mechanism by which Web Designers can separate 'content' from 'presentation'. In other words, we can have two different 'sources' which control how data is finally displayed on a web page. The first 'source' is the data itself - the raw content while the second 'source' will contain instructions on how to display the 'raw content'. This is very useful since one could be modified without deep knowledge of the other. As an example, a designer may change the look-and-feel of a website without having to understand the content of the website. Similarly, a 'webmaster' can add new content to the webpage without worrying about how each element will look on the screen.

Let´s explain this in the simpliest possible way. Let´s say you want to dress up yourself in the morning. Simple HTML is you without your clothes. So you need to dress up. You will have a special selection for shoes, for shirts, for accessories, for every thing you put on. The same holds true for what CSS does to websites.

In other words, CSS has a special class for every element you would like to use to ”dress” a web page.

The CSS specifications are maintained by the World Wide Web Consortium (W3C).

Basically a CSS file contains multiples classes, which describe properties for different elements in a web page. For example, a usual class is a which applies to hyperlinks. The properties for the a class will work over any hyperlink available in the page.

What that means is that suppose we have a CSS class that says:

a:hover 
{
        color: red;
        text-decoration: none;
}

When a user visits a website that uses the above CSS and happens to hover his mouse over any hyperlink, it will turn red in color and will not be underlined (usual hyperlinks are always underlined). Pretty cool, huh ?

For those of you that do know a little bit more of HTML you already know there are four different setting for a link in any HTML document; normal links, active links, visited links and hover. With CSS we can define special behaviours if we define special subclasses. If we want to do that then we create the a.link, a.active, a.visited and a.hover classes, each one with their special properties.

There are a lot of CSS classes, that works in different parts of a web page. But you get the idea. Now check Out this Demo from w3schools to see how CSS works.

Please see here and here for a hands-on explanation of some important CSS classes that PBase uses.

There are three important things you need to know when you use CSS in PBase.

• PBase has a lot of CSS classes and it is easy to get overwhelmed if you are happening to look at some advanced CSS sheets that some users use. Start with something simple, such as this and work your way up.

• PBase supplies a default CSS style sheet for every gallery page. This is to ensure that if you do not want to do any styling on your own, at least the default style looks acceptable. The default PBase stylesheet looks like this.
  
  However, most PBase users add their own styles on top of the default styles. Usually, this is stored in a different CSS file. This helps us separate our own style from PBase's default styles. So next time you poke around a PBase gallery and notice links to two different style sheet files, don't get confused. The first one is PBase's default style sheet and the second one is the stylesheet you choose to apply on top. You can add new styles in your own stylesheet or change styles that the default PBase stylesheet defines. It actually work pretty well - for whatever you do not define in your own stylesheet, the default PBase stylesheet acts as a 'safety net'.

• Not everything can be done with CSS. CSS is only about changing the presentation style of elements that already exist on your webpage. Usually, you will find yourself using a combination of CSS + HTML + JavaScript to do fancy things in your gallery.We can use HTML mad JavaScript in our “user description” area when we click on “edit gallery” in PBase. Just remember to check the HTML Usage Flag in the edit page.

Sidenote: you might also have noticed that PBase allows you to change the text and the background color in the edit page that shows up when you click on 'edit this gallery' . This is a simple way to give some style to your pages without getting into CSS. Just note that CSS overrides those colors.

It is useful to keep our CSS code validated, just in case somebody wants to use it or learn from it. The most common used validator can be found at Jigsaw.w3org.

Please note that a valid CSS does not mean full browser compatibility, especially between the most popular ones: Microsoft Internet Explorer and Mozilla Firefox. Suffice to say that there are many small incompatibilities between popular browsers and you will just have to face them as you go along (*sigh*).

Also, do realize that by 'validating' your stylesheets - you may be giving up on several nice effects supported by many browsers. Therefore, you are the best judge on deciding if validation is for you. Instead of validating, some users prefer to insert proprietary codes that work for several browsers. That way, each browser will display the styles correctly, even though it is not validated and you get to exploit the newer features of your browsers that are not ratified by standards. The choice is yours.

• Sample page of PBase`s CSS

• Very complete CSS tutorials

• CSS onlie resources

• Learn what´s new with CSS!