In the window, you have three areas. While the uppermost shows the webpage as usual, the lower left area shows the phpWebSite generated xhtml, and the lower right area the css styles. It shows the actual styles in effect and where they come from, rather exactly from where they come.
No headache more about the complex intermix of several style sheets comming together, Firebug not only leads you to the current style in effect and where it is placed in the style sheet, but visualizes also the cascading effect - not always easy to imagine in deep.
1.2.2.Example change background
In this example, xhtml is pointed to the body tag, and css points to the styles assigned to body with background-color #DFE3BA.
Not only we may enjoy the kind of tranparent informations delivered by FireBug, we also temporaty may change every detail of the current properties. Let abritary change the background color to #FF9900, something like an orange in the rgb scheme. The change is seen immediatly.
Well, the background consist of something layed very in the background :-).
1.2.3.Inspection
Another big colored flat is seen in the middle. We just do not know, what xhtml with what css is responsible for. Simply click in the middle of the flat and the context menu (right mouse buttom) offers an Inspect Element:
The ispection immediatly leads to the corresponding xhtml tag in the left lower area, while the view to the element within the webpage, area above, is synchronized highlighted.
That is an xhtml div with an id named #container and the style of #container has properties like background-color of #ADB583. When we set the focus to the corresponding xhtml div tag, the highlight vanishes and we see the native color.
1.2.4.Change element example
And now, we are able to change it. Let take some color like sandy, that is a #FFFFCC rpg color code.
Again, the effect is seen immediatly.
1.2.5.Temporary and permanent changes
Regard, the changes just made are only temporary. To build an own theme, you should notice the corresponding style references FireBug tells. A practical workflow to alter permanently is, to have your site open with something (I prefer SCP) to edit the shown css file directly. That is easy, because the source line numbers are told by FireBug also supporting easy navigation. You only should regard the cascading logic. In this matter, FireBug also helps, because the top of the cascading pyramide is always seen at top. You perhaps only have to observe the adjaced style assignments a bit more below. Permanent changes saved are seen in FireBug also when you refresh the webpage in the browser.
Only for fun, let change something else then a flat, for example a border line we can detect around #container, changed from former white (#FFFFFF) to a kind of blue with rgb #006699.
Now, you are right to assume, the possibilities to change style with css is nearly infinite.
eZine
