469,306 Members | 2,459 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,306 developers. It's quick & easy.

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.
Jul 20 '05 #1
3 2173
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
Jul 20 '05 #2
*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/
Jul 20 '05 #3
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?

I downloaded Firefox's web dev toolbar, but didn't see any such
option.


It's there, nonetheless. Under CSS menu, "View style information"
(ctrl-shift-s).

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by NH | last post: by
4 posts views Thread by N. Graves | last post: by
3 posts views Thread by tom.youdan | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.