Public Forums 71,145 posts

[bulgin Friend bulginJoin date: February 2008Posts: 24Downloads:0Uploads:2]

#126332

I’m finding that a lot of tweaks and changes need to be done in the style sheets but I have a nagging question about them — is there a utility that will correspond the gobbledygook code in the style sheet to the actual elements on the web page? Style sheets are supposed to make life easier but I spend a lot of time trying to track down the code in the style sheet that corresponds to a rendering on the web page. Are there any utilities that will show a cross-reference match between web page renderings and style sheets so I can zero in on the appropriate code to change? I have Web Developer installed on my Firefox but that does not create the correspondence I need, or at least I cannot find it.

For example — I see that I need to increase the padding on a certain element that I see see already rendered on the web page. How do I find the corresponding .css code without looking line by line through the .css stylesheet? Oftentimes the .css code is not that well documented in the file, if at all.

Anybody know of a utility that does what I need? Thanks in advance.

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#241370

Have you ever tried using the FireFox web browser. There is an add on tool called Web Developer. With this tool you can select to use the View Style Information under the CSS option and you will see all areas of CSS just by hovering. Then just click on the area of your choice and it will pop open the CSS location right above the web page and you will know what code to look for. I use this all the time. 🙂

[kicr Friend kicrJoin date: June 2007Posts: 84Downloads:30Uploads:10 Thanks: 13 Thanked: 6 times in 1 posts]

#241399

There is an excellent Firefox addon: Firebug

You can inspect your webseite to find used classes and many more. The best function in my opinion: changing the css live!!

Ciao KiCR

[Author]

Posts