Cascading style sheets are an important part of website design but when something is not quite right, it can be tricky to establish exactly what's wrong and where to fix it.
The Inspect Element tool in the Firefox browser can help.
Many websites use cascading style sheets (css) to specify visual characteristics like fonts size and colour, text spacing and layout rules. CSS makes it easier to have a consistent appearance across all pages of a site - and make changes - without having to edit each page. This is a Good Thing. Things get messy when a site uses multiple stylesheets (that 'cascade') - tracking down exactly which file to change and testing that your changes will achieve the result you want can be tedious.
The Firefox browser [1] has some built-in functions that can help.
As an example, if I want to change the appearance of items in a bulleted list:
Right-click on the text for which you want to view or modify the styles and click the 'Inspect Element' option in the context menu.
This tool has many features, but for now we only need to look at the right hand panel which shows the styles related to the selected text. In particular the list style (ul=unordered list) is currently set to 'disc inside none' (items are marked with dots indented on the first line with no image).
There are two important features:
- We can change the style definition directly in the style panel (eg change 'inside' to 'outside') and see the result immediately in the page.
- We can see the filename and line number from this definition is taken, so once we decide what it should be, we know where to make the change. In this case it's 'basic.css', line 90.
The list looks nicer (I think) with hanging indents (ie the item markers are 'outside')
In practice you might also adjust want to adjust the margins.
Even with nifty tools like this, you still need a working knowledge of the CSS rules if you expect to achieve the formatting results you want.[2]
References
