Viewing CSS text information?

Hello,

Is there any plugin that will let me select a piece of text in a
webpage, and then see ALL the CSS text properties that effect the way
the text is displayed? For example, I'd like to select text and
immediately be able to see:

- font family
- size
- font-weight
- color
- letter spacing

Sometimes, these properties can be scattered across different classes,
and it's a pain to go through the CSS and track them all down. It's
even a pain to track them down when they are in one class. I
downloaded Firefox's web dev toolbar, but didn't see any such option.

Trent wrote:

Is there any plugin that will let me select a piece of text in a
webpage, and then see ALL the CSS text properties that effect the way
the text is displayed? For example, I'd like to select text and
immediately be able to see:

- font family
- size
- font-weight
- color
- letter spacing

Sometimes, these properties can be scattered across different classes,
and it's a pain to go through the CSS and track them all down. It's
even a pain to track them down when they are in one class. I
downloaded Firefox's web dev toolbar, but didn't see any such option.

On the Web Dev toolbar, choose the CSS menu, then "View Style
Information". The cursor should change to a crosshair. Click on any page
element, and you'll get a new window or tab open with all applicable
stlye information.

HTH . . .

P

*Trent* wrote:

Hello,

Is there any plugin that will let me select a piece of text in a
webpage, and then see ALL the CSS text properties that effect the way
the text is displayed? For example, I'd like to select text and
immediately be able to see:

- font family
- size
- font-weight
- color
- letter spacing

Sometimes, these properties can be scattered across different classes,
and it's a pain to go through the CSS and track them all down. It's
even a pain to track them down when they are in one class. I
downloaded Firefox's web dev toolbar, but didn't see any such option.

http://www.mozilla.org/projects/inspector/

Once installed/invoked, enter a URI, choose 'Inspect', choose the 'Find
a node to inspect by clicking on it' button on the left of the address
bar, select an element in document to study. In the right pane, select
'CSS Style Rules' to see specified rules or choose 'Computed style' to
see a complete (or if not complete then an almost complete) list of
rules used to actually display the document. In the 'CSS Style Rules'
panel you can edit and add new rules and see the results in real time.
--
Andrew Urquhart
- FAQ: www.css.nu/faq/ciwas-aFAQ.html
- Archive: www.tinyurl.com/ysjbm (Google Groups)
- My reply address is invalid, see www.andrewu.co.uk/contact/